Android底部菜单的两种实现方式

市面上的APP常见的一个UI界面就是底部有多个菜单按钮，通过点击不同的按钮切换不同的页面。如微信，QQ等..
之前在开发一个新闻客户端的时候也使用了这种布局，当时使用的是 RadioGroup +RadioButton 来完成的。
后面在开发一个即时通讯APP的时候发现使用RadioGroup +RadioButton有一些局限行，于是改成用 FragmentTabHost 来完成。
这里简单记录一下如何用这两种技术来实现底部菜单的效果:

RadioGroup+RadioButton

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical"
 >
<android.support.v4.view.ViewPager
 android:id="@+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
 />
<RadioGroup
 android:id="@+id/rg_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@mipmap/bottom_tab_bg"
android:orientation="horizontal"
 >
<RadioButton
 android:id="@+id/rb_home"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_home_selector"
android:text="首页" />

<RadioButton
 android:id="@+id/rb_news"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_news_selector"
android:text="新闻中心" />

<RadioButton
 android:id="@+id/rb_smart"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_smart_selector"
android:text="智慧服务" />

<RadioButton
 android:id="@+id/rb_gov"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_gov_selector"
android:text="政务" />

<RadioButton
 android:id="@+id/rb_setting"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_setting_selector"
android:text="设置" />
</RadioGroup>
</LinearLayout>

style与selector的内容此处不给出。

//获取资源
RadioGroup radioGroup = (RadioGroup) view.findViewById(R.id.rg_group);

ViewPager noScrollViewPager = = (NoScrollViewPager) view.findViewById(R.id.noScrollViewPager);
//给ViwPage设置Adapter
        noScrollViewPager.setAdapter(XXXX);
        radioGroup = (RadioGroup) view.findViewById(R.id.rg_group);
        //默认radioGroup的那个是被选中的
        radioGroup.check(R.id.rb_home);
        //还需在viewpager中显示该radioGroup对应的viewpager
        xxxxx
        //设置RadioGroup的点击监听,用来设置点击切换界面
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                 switch (i){
                     case R.id.rb_home:
                     //点击不同的radioGroup刷新到不同的viewpager
                         noScrollViewPager.setCurrentItem(0, false);
break;
                     case R.id.rb_news:
                         noScrollViewPager.setCurrentItem(1,false);
break;
                     case R.id.rb_smart:
                         noScrollViewPager.setCurrentItem(2,false);
break;
                     case R.id.rb_gov:
                         noScrollViewPager.setCurrentItem(3,false);
break;
                     case R.id.rb_setting:
                         noScrollViewPager.setCurrentItem(4,false);
break;

                 }
            }
        });

如上所示的代码即可完成。效果图：

这样虽然可以完成底部菜单的显示，但这种方法有这强的局限性。比如在设置RadioButton的时候是使用drawableTop来加入图片的。这种做法不能设置图片的宽高等属性，在某些时候则这种方法不可用。

FragmentTabHost

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".HomeActivity">

<FrameLayout
 android:id="@+id/main_frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
 />
<!--如下的写法不能变，id值都是固定的-->
<android.support.v13.app.FragmentTabHost
 android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
 >
<FrameLayout
 android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0">
</FrameLayout>
</android.support.v13.app.FragmentTabHost>
</LinearLayout>

Activity

//生成底部菜单共三步.
/*
 *1.初始化Tabhost
 *2.新建TabSpec
 *3.添加TabSpec到TabHost
 */
   FragmentTabHost  fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        fragmentTabHost.setup(this,getFragmentManager(),R.id.main_frameLayout);

 //通过循环添加
        for(int i=0;i<4;i++){
            //newTabSpec的参数表示唯一表示符。用来确定那个被点击
         TabHost.TabSpec tabSpec =  fragmentTabHost.newTabSpec(tabSpecs[i]).setIndicator(View view);
         //方法setIndicator()的参数即为显示的view
         fragmentTabHost.addTab(tabSpec,fragmentArray[i],null);
         //addTab的第二个参数即为该TabSpec对应的fragment
        }
        //取消每个条目之间的分割线
        fragmentTabHost.getTabWidget().setDividerDrawable(android.R.color.white);
        // 初始化 第一个条目被选中 通过唯一标识符确定
        fragmentTabHost.setCurrentTabByTag(tabSpecs[0]);

具体给TabSpec设置的View是我自定义的view。此处不给出代码.
效果图: