Android底部tab切换界面的实现比较简单，可以利用TabHost直接实现，实现方式网上资源很多。那么除了用特定的组件来实现tab外能不能自己写代码实现呢。答案是肯定的。还有一个很常用的问题，就是不同的tab界面能否实现不同的标题栏？这个需求在项目中经常碰到，本文将讲叙Android底部tab切换界面的实现以及它与标题栏的结合。实现效果图如下：  上图就是我们要实现的效果图，切换到不同的界面有不同的显示标题。不多说直接上代码。 首先当然是布局文件，先实现标题栏布局。新建title.xml文件 ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="48dp" android:background="#111111" > <TextView android:id="@+id/title_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:textColor="#ffffff" android:textSize="18dp" android:visibility="gone" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textColor="#ffffff" android:textSize="22dp"/> <TextView android:id="@+id/title_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textColor="#ffffff" android:textSize="18dp" android:visibility="gone" /> </RelativeLayout> ~~~ 以上实现了标题栏的布局，title_left和title_right分别是标题栏的左、右按钮，默认情况下将其设置为不可见。 接下来就是tab栏布局文件的实现，新建一个tab.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_bottom" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#efefef" android:orientation="horizontal" > <LinearLayout android:id="@+id/nav_search" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:orientation="vertical" > <View android:id="@+id/nav_search_color" android:layout_width="fill_parent" android:layout_height="3dp" android:background="@color/nav_pressed" android:duplicateParentState="true" /> <ImageView android:id="@+id/nav_search_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="3dp" android:scaleType="center" android:src="@drawable/icon_square_nor1" /> <TextView android:id="@+id/nav_search_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="搜 索" android:textColor="@color/nav_pressed" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/nav_home_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:orientation="vertical" > <View android:id="@+id/nav_home_color" android:layout_width="fill_parent" android:layout_height="3dp" android:background="@color/nav_normal" /> <ImageView android:id="@+id/nav_home_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="3dp" android:scaleType="center" android:src="@drawable/icon_home_nor" /> <TextView android:id="@+id/nav_home_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="主 页" android:textColor="@color/nav_text_normal" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/nav_selfinfo_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:orientation="vertical" > <View android:id="@+id/nav_selfinfo_color" android:layout_width="fill_parent" android:layout_height="3dp" android:background="@color/nav_normal" /> <ImageView android:id="@+id/nav_selfinfo_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="3dp" android:scaleType="center" android:src="@drawable/icon_selfinfo_nor" /> <TextView android:id="@+id/nav_selfinfo_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="个人信息" android:textColor="@color/nav_text_normal" android:textSize="10sp" /> </LinearLayout> <LinearLayout android:id="@+id/nav_mess_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:orientation="vertical" > <View android:id="@+id/nav_mess_color" android:layout_width="fill_parent" android:layout_height="3dp" android:background="@color/nav_normal" /> <ImageView android:id="@+id/nav_mess_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="3dp" android:scaleType="center" android:src="@drawable/icon_meassage_nor" /> <TextView android:id="@+id/nav_mess_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:gravity="center_horizontal" android:text="信 息" android:textColor="@color/nav_text_normal" android:textSize="10sp" /> </LinearLayout> </LinearLayout> ~~~ 只需要看一部分就可以了，一个LinearLayout包括着一个View,ImageView和TextView，其中View是底部栏上方的那条横线。ImagView与TextView不用说，就是底部栏的头像和头像下方的文字。 主布局文件就是利用include把标题栏与底部栏融合到一起，并用ViewPage来显示不同页面。布局如下： ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <include android:id="@+id/top" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" layout="@layout/title" /> <include android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" layout="@layout/tab" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/top" android:layout_above="@id/tab" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" > </android.support.v4.view.ViewPager> </LinearLayout> </RelativeLayout> ~~~ 接下来的实现我们用到了Fragment,四个页面分别加载了四个Fragment。所以要写四个不同的fragment.xml,这个根据不同需求进行编写。那重头戏来了，下面贴出主程序。代码有点长，但不用担心，其实现原理很简单。 ~~~ public class MainActivity extends FragmentActivity { private ViewPager m_vp; private int navIndex = 0; private int currIndex = 0; private Fragment mfragment1; private Fragment mfragment2; private Fragment mfragment3; private Fragment mfragment4; private List<Fragment> fragmentList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initTitle(); getView(); initFragments(); } /** * 初始化标题，并加载四个Fragment */ public void initTitle(){ ((TextView) findViewById(R.id.title)).setText("搜索"); ((TextView)findViewById(R.id.title_left)).setVisibility(View.INVISIBLE); ((TextView)findViewById(R.id.title_right)).setVisibility(View.INVISIBLE); } private void getView(){ m_vp = (ViewPager)findViewById(R.id.viewpager); mfragment1 = new Fragment1(); mfragment2 = new Fragment2(); mfragment3 = new Fragment3(); mfragment4 = new Fragment4(); } /** * 初始化页面 */ public void initFragments() { fragmentList = new ArrayList<Fragment>(); fragmentList.add(mfragment1); fragmentList.add(mfragment2); fragmentList.add(mfragment3); fragmentList.add(mfragment4); findViewById(R.id.nav_search).setOnClickListener(new MyOnClickListener(0)); findViewById(R.id.nav_home_layout).setOnClickListener(new MyOnClickListener(1)); findViewById(R.id.nav_selfinfo_layout).setOnClickListener(new MyOnClickListener(2)); findViewById(R.id.nav_mess_layout).setOnClickListener(new MyOnClickListener(3)); setNavState(navIndex, 0); m_vp.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager())); m_vp.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { Log.i("zhi", arg0+""); switch (arg0) { case 0: if (navIndex != 0){ // 点击之前如果就是这个控件，不变化 setNavState(navIndex, 0); navIndex = 0; } break; case 1: if (navIndex != 1){ // 点击之前如果就是这个控件，不变化 setNavState(navIndex, 1); navIndex = 1; } break; case 2: if (navIndex != 2){ // 点击之前如果就是这个控件，不变化 setNavState(navIndex, 2); navIndex = 2; } break; case 3: if (navIndex != 3){ // 点击之前如果就是这个控件，不变化 setNavState(navIndex, 3); navIndex = 3; } break; default: break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } private void setNavState(int before, int after) { // 点击之前的那个按钮恢复正常 switch (before) { case 0: findViewById(R.id.nav_search_color).setBackgroundResource(R.color.nav_normal); ((ImageView )findViewById(R.id.nav_search_img)).setImageResource(R.drawable.icon_square_nor); ((TextView) findViewById(R.id.nav_search_text)).setTextColor(getResources().getColor(R.color.nav_text_normal)); break; case 1: findViewById(R.id.nav_home_color).setBackgroundResource(R.color.nav_normal); ((ImageView )findViewById(R.id.nav_home_img)).setImageResource(R.drawable.icon_home_nor); ((TextView) findViewById(R.id.nav_home_text)).setTextColor(getResources().getColor(R.color.nav_text_normal)); ((TextView)findViewById(R.id.title_right)).setVisibility(View.INVISIBLE); break; case 2: findViewById(R.id.nav_selfinfo_color).setBackgroundResource(R.color.nav_normal); ((ImageView )findViewById(R.id.nav_selfinfo_img)).setImageResource(R.drawable.icon_selfinfo_nor); ((TextView) findViewById(R.id.nav_selfinfo_text)).setTextColor(getResources().getColor(R.color.nav_text_normal)); ((TextView)findViewById(R.id.title_left)).setVisibility(View.INVISIBLE); break; case 3: findViewById(R.id.nav_mess_color).setBackgroundResource(R.color.nav_normal); ((ImageView )findViewById(R.id.nav_mess_img)).setImageResource(R.drawable.icon_meassage_nor); ((TextView) findViewById(R.id.nav_mess_text)).setTextColor(getResources().getColor(R.color.nav_text_normal)); break; default: break; } // 点击到的那个显示状态 switch (after) { case 0: findViewById(R.id.nav_search_color).setBackgroundResource(R.color.nav_pressed); ((ImageView )findViewById(R.id.nav_search_img)).setImageResource(R.drawable.icon_square_nor1); ((TextView) findViewById(R.id.nav_search_text)).setTextColor(getResources().getColor(R.color.nav_text_pressed)); ((TextView) findViewById(R.id.title)).setText("搜索"); break; case 1: findViewById(R.id.nav_home_color).setBackgroundResource(R.color.nav_pressed); ((ImageView )findViewById(R.id.nav_home_img)).setImageResource(R.drawable.icon_home_nor1); ((TextView) findViewById(R.id.nav_home_text)).setTextColor(getResources().getColor(R.color.nav_text_pressed)); ((TextView)findViewById(R.id.title_right)).setVisibility(View.VISIBLE); ((TextView)findViewById(R.id.title_right)).setText("设置"); ((TextView) findViewById(R.id.title)).setText("主页"); break; case 2: findViewById(R.id.nav_selfinfo_color).setBackgroundResource(R.color.nav_pressed); ((ImageView )findViewById(R.id.nav_selfinfo_img)).setImageResource(R.drawable.icon_selfinfo_sel1); ((TextView) findViewById(R.id.nav_selfinfo_text)).setTextColor(getResources().getColor(R.color.nav_text_pressed)); ((TextView)findViewById(R.id.title_left)).setVisibility(View.VISIBLE); ((TextView)findViewById(R.id.title_left)).setText("返回"); ((TextView) findViewById(R.id.title)).setText("个人信息"); break; case 3: findViewById(R.id.nav_mess_color).setBackgroundResource(R.color.nav_pressed); ((ImageView )findViewById(R.id.nav_mess_img)).setImageResource(R.drawable.icon_meassage_nor1); ((TextView) findViewById(R.id.nav_mess_text)).setTextColor(getResources().getColor(R.color.nav_text_pressed)); ((TextView) findViewById(R.id.title)).setText("信息"); break; default: break; } } public class MyViewPagerAdapter extends FragmentPagerAdapter{ public MyViewPagerAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } @Override public Fragment getItem(int arg0) { return fragmentList.get(arg0); } @Override public int getCount() { return fragmentList.size(); } } public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i) { index = i; currIndex=i; } @Override public void onClick(View v) { m_vp.setCurrentItem(index); } }; } ~~~ 相信大家都能看懂，这里简单讲解一下。程序首先运行initTitle对标题栏进行初始化，在getView中定义一个list装上四个Fragment，方便之后的调用。initFragments（）方法主要是完成对界面的加载和监听不到的触发事件。这里用到了Viewpage进行页面的切换。首先是监听底部栏按钮的的点击事件，点击的按钮触发ViewPage的setCurrentItem方法加载不同的ViewPage页。ViewPage对页面的变化进行监听，不同页面调用不同的setNavState()方法。最后就只剩下了解setNavState的作用了。setNavState方法用于对底部按钮的图标、字体状态还有标题栏的显示状态进行动态变化，switch(before)是操作之前点击的那个按钮的状态，switch(after)是操作之后点击的按钮的状态。 到这里主函数就讲完了。接下来要做是的就定义自己的Fragement，让它们去实现我们想要的界面。至此我们一个自定义的底tab界面就完成了。是不是很简单。以下我贴出源代码，下载不用积分，只希望对大家有点帮助。 [代码下载](http://download.csdn.net/detail/u014486880/8733109)