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

短命女 2022-08-20 14:17 237阅读 0赞

市面上的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;
    
                     }
                }
            });

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

![这里写图片描述][20160302185355434]  
这样虽然可以完成底部菜单的显示，但这种方法有这强的局限性。比如在设置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"
            />
          
        <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。此处不给出代码.  
效果图:  
![这里写图片描述][20160302191912264]

[20160302185355434]: /images/20220731/402645c8f19849a59fa2c03482ddfd4d.png
[20160302191912264]: /images/20220731/3fa279bd95b742f394b44b89d9362fbb.png