最终效果如下图,点击菜单会切换Activity,有动画效果。
从早上起床就研究这个东西,因为之前一直都直接用系统提供的几个控件,从来没搞过图片背景、嵌套布局什么的,今天是第一次,没什么经验,花了一个上午才搞 定。
简单介绍一下思路,使用LinearLayout嵌套,分三部分,第一部分是顶部的标题栏,第二部分是内容,第三部分是底部菜单。参考网上的代码,一路顺 风顺水搞定,但在模拟器测试时出了问题(开发时用I9000),模拟器的屏幕是HVGA的,在上面运行看不到菜单栏。这个问题困扰了很久,网上也搜不出有 用的答案(说是用dip,不用px,我开始就是用dip的),最后还是自己冥思苦想解决了问题,解决方法也很简单,就是让内容fill_parent,然 后菜单layout_marginTop取个负值。
main.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:gravity="clip_horizontal" android:layout_height="fill_parent" android:id="@+id/toplayout"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="30dip" android:background="@drawable/header" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/toptv" android:gravity="center" android:textSize="20dip" android:layout_gravity="center" android:text="@string/home"/> </LinearLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="wrap_content" android:gravity="center" android:textSize="20dip" android:layout_gravity="center" android:text="@string/home" android:layout_height="fill_parent"/> </LinearLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_marginTop="-50dip" android:layout_height="50dip" android:gravity="bottom" android:background="@drawable/header"> <include layout="@layout/foot" /> </LinearLayout> </LinearLayout>
foot.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="80dip" android:layout_height="80dip" android:id="@+id/home" android:gravity="center_horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="50dip" android:gravity="center" android:paddingTop="29dip" android:background="@drawable/tab_home" android:id="@+id/hometv" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/line" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="80dip" android:layout_height="wrap_content" android:gravity="center_horizontal" android:id="@+id/channel"> <TextView android:layout_width="wrap_content" android:layout_height="50dip" android:gravity="center" android:paddingTop="29dip" android:background="@drawable/tab_channel" android:id="@+id/channeltv" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/line" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="80dip" android:id="@+id/fav" android:layout_height="wrap_content" android:gravity="center_horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="50dip" android:gravity="center" android:paddingTop="29dip" android:background="@drawable/tab_fav" android:id="@+id/favtv" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/line" /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="80dip" android:id="@+id/search" android:layout_height="wrap_content" android:gravity="center_horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="50dip" android:gravity="center" android:paddingTop="29dip" android:background="@drawable/tab_search" android:id="@+id/searchtv"/> </LinearLayout> </LinearLayout>
main.java:
package com.BottomMenu; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.Window; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.LinearLayout; import android.widget.TextView; public class main extends Activity { private LinearLayout home, channel, fav, search; TextView toptv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); Init(); } public void Init(){ Animation anim = AnimationUtils.loadAnimation(this,R.anim.scale); findViewById(R.id.toplayout).startAnimation(anim); //这两行是启动activity的动画效果 home = (LinearLayout) findViewById(R.id.home); TextView hometv=(TextView)home.findViewById(R.id.hometv); hometv.setBackgroundResource(R.drawable.tab_home_select); home.setBackgroundResource(R.drawable.tab_two_highlight); toptv=(TextView)findViewById(R.id.toptv); channel = (LinearLayout) findViewById(R.id.channel); channel.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(); intent.setClass(main.this, channel.class); main.this.startActivity(intent); } }); fav = (LinearLayout) findViewById(R.id.fav); fav.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(); intent.setClass(main.this, fav.class); main.this.startActivity(intent); } }); search = (LinearLayout) findViewById(R.id.search); search.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(); intent.setClass(main.this, search.class); main.this.startActivity(intent); } }); }; }
动画效果scale.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/decelerate_interpolator" android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:fillAfter="true" android:duration="300" /> </set>
其他几个activity代码就不贴了,反正内容都一样,下面有代码打包供大家参考。 BottomMenu
相关推荐
仿奇异UI 图片切换自动切换 底部菜单栏 全套UI 你会觉得很值
TabBarsAnimationDemo — 底部菜单push隐藏菜单栏动画(仿<京东> 及 <东方财富通> tabBar效果)
Fragment碎片实现底部菜单栏,仿支付宝UI
AndroidUI设计及开发底部菜单.doc
Android UI设计技巧 Android UI设计技巧Android UI设计技巧
ANDROID UI设计工具,方便ANDROID UI设计
本书详细阐述了与 Android UI开发相关的基本解决方案,主要包括 Android UI设计工具, Android UI布局, Android UI Widgets,Android UI选项菜单, Android UI本地菜单, Android UI操作栏, Android UI设计考虑, ...
在Android4.2.2中,导航栏(也就是屏幕底部的三个按钮,home,back,recentapp)是系统应用SystemUi.apk的一部分,简言之,我们的需求就是让我们的app来控制SystemUi.apk,达到动态显示隐藏屏幕底部导航栏的效果。...
线性布局LinearLayout 框架布局FrameLayOut RelativeLayout相对布局 绝对布局AbsoluteLayout TableLayout表格布局
《Android UI设计》面向创建移动应用的产品经理、设计师和开发者,系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的...
精通ANDROID UI设计
Android UI设计心得。包括线性布局(LinearLayout)、相对布局(RelativeLayout)、表格布局(TableLayout)、框架布局(FrameLayout)、绝对布局(AbsoluteLayout)。其中AbsoluteLayout在Android SDK2.3.3之后已经...
《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用...
androidUI设计器 自动生成.xml文件,很方便!
androidUI设计实践,你懂的。一般
Android UI设计书籍PDFAndroid UI设计书籍PDFAndroid UI设计书籍PDF
Android UI设计工具+ 工具使用说明文档
【Android UI设计与开发】第16期:滑动菜单栏(一)开源项目SlidingMenu的使用 - 我是一条寻水的鱼 - 博客频道 - CSDN.NET
android UI设计技巧 1、该做什么,不该做什么 2、设计哲学和考量 3、你必须考虑的UI框架特例 4、新的UI设计模式 5、图标和准则
资源名称:精彩绝伦的Android UI设计:响应式用户界面与设计模式资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。