Android导航菜单选项卡总结

前言

如果你之前没接触过的话，建议先下载demo，对比本文进行学习；
如果你向我一样，总是忘记，那就动动小手收藏一下吧~~~
demo: https://github.com/liuleshuai/NavigationMenuBar

爱你

干货

现在的App底部一般都有一个可切换的菜单，通常使用有以下5种方式实现：

  • TabHost(过时)
  • Radiobutton(自定义)
  • FragmentTabHost
  • TabLayout(5.0新增)
  • BottomNavigationView(5.0新增)

1.TabHost

它添加的是Activity而不像上面那些全部使用Fragment来显示内容。

过时，不推荐使用，略...

2.Radiobutton

原理就是通过设置button的样式来模拟菜单操作，可以参考这篇文章：
https://blog.csdn.net/duolaimila/article/details/51315623

不推荐，略...

3.FragmentTabHost

依赖

布局

  • 底部菜单栏的布局一般如下所示：
<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=".MainActivity">    

   <FrameLayout        
              android:id="@+id/realcontent"        
              android:layout_width="match_parent"        
              android:layout_height="0dp"        
              android:layout_weight="1">    
    </FrameLayout>    

    <!--<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />-->

    <android.support.v4.app.FragmentTabHost        
              android:id="@android:id/tabhost"          
              android:layout_width="match_parent"        
              android:layout_height="wrap_content"        
              android:background="#ffffff" >      
 
         <FrameLayout         
               android:id="@android:id/tabcontent"            
               android:layout_width="0dp"            
               android:layout_height="0dp"            
               android:layout_weight="0" >
         </FrameLayout>    
     </android.support.v4.app.FragmentTabHost></LinearLayout>

注意：

  1. FragmentTabHost的id是需要使用安卓自带的id，必须设置为@android:id/tabhost。
  2. FragmentTabHost中的FrameLayout也需要使用安卓自带的id，@android:id/tabcontent。

另外，需要添加一个菜单Item的布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tab_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="12sp" />
</LinearLayout>

代码

  • 绑定
   mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
   //绑定Fragment
   mTabHost.setup(this, getSupportFragmentManager(), R.id.realcontent);

   //绑定viewpager
//   mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);
  • 设置菜单选项卡
for (int i = 0; i < count; i++) {
   // 给每个Tab按钮设置标签、图标和文字
   TabHost.TabSpec tabSpec = mTabHost.newTabSpec(textViewArray[i])
                    .setIndicator(getItemView(i));
   // 将Tab按钮添加进Tab选项卡中，并绑定Fragment
   mTabHost.addTab(tabSpec, fragmentArray[i], null);
   //设置Tab被选中的时候颜色改变
   mTabHost.getTabWidget().getChildAt(i)
          .setBackgroundResource(R.drawable.selector_tab_background);
 }

注意：
上述代码中的.newTabSpec(textViewArray[i])是为菜单设置String类型的Tag标识，不一定要设置为菜单标题，但是一定不能重复，推荐设置成菜单的名称，肯定没人会设置两个一样的菜单吧 :)

    private View getItemView(int i) {
        View view = LayoutInflater.from(this).inflate(R.layout.fragment_tab_host_item, null, false);
        TextView tv = view.findViewById(R.id.tab_textview);
        tv.setText(textViewArray[i]);
        Drawable drawable = ContextCompat.getDrawable(this,R.mipmap.ic_launcher);
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        tv.setCompoundDrawables(null, drawable, null, null);
        return view;
    }
  • 其它设置
 //去掉分割线 null 或 LinearLayout.SHOW_DIVIDER_NONE
 mTabHost.getTabWidget().setDividerDrawable(null);

 //设置默认第一个
 mTabhost.setCurrentTab(0);

如果绑定的是ViewPager，还需要对页面切换进行处理

  /*为了当点击下面菜单时,上面的ViewPager能滑动到对应的Fragment*/
  mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                int position = mTabHost.getCurrentTab();
                vp.setCurrentItem(position);
            }
  });

  //设置页面切换时的监听器
  vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            mTabHost.setCurrentTab(arg0);
        }

        @Override
        public void onPageScrollStateChanged(int state) {      
        }
    });

不用担心上述二者的监听造成循环调用，VP和FragmentTabHost内部已经为我们做好了处理，即如果目标位置和当前位置相同，不会触发OnPageChangeListener和OnTabChangeListener回调。

源码如下：


VP部分源码
TabHost部分源码

4.TabLayout

依赖

compile 'com.android.support:support-v4:xx.x.x'
compile 'com.android.support:design:xx.x.x'

布局

<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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="100p"
        //导航栏背景颜色
        android:background="#ffff00"
        //指示器颜色
        app:tabIndicatorColor="#66ff33"
        //指示器高度
        app:tabIndicatorHeight="20p"
        //普通状态下文字的颜色
        app:tabTextColor="@color/colorPrimary"
        //选中时文字的颜色
        app:tabSelectedTextColor="#CC33FF"
        //是否可滑动：fixed：固定；scrollable：可滑动
        app:tabMode="fixed"
        //居中模式：fill:填充; center:居中
        app:tabGravity="fill"
        //设置选项卡的背景
        app:tabBackground="@drawable/selected"
        //设置字体大小：此处要写一个style） 
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

注意：
上述TabLayout布局中，android:layout_height="100p"这里需要注意，不能设置成wrap_content，必须设置具体数值，否则会出现无法显示菜单标题的问题。切记！！！切记！！！切记！！！

style.xml

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textSize">6sp</item>    
    <item name="android:textColor">@color/gary</item>
</style>
tabGravity&tabMode

代码

//绑定VP
tabHost.setupWithViewPager(pager);
  • 通过指定Tab的方式设置菜单
//指定Tab的位置
Tab one = mTabLayout.getTabAt(0);
Tab two = mTabLayout.getTabAt(1);
Tab three = mTabLayout.getTabAt(2);
Tab four = mTabLayout.getTabAt(3);
//设置Tab的图标，假如不需要则把下面的代码删去
one.setIcon(R.mipmap.ic_launcher);
two.setIcon(R.mipmap.ic_launcher);
three.setIcon(R.mipmap.ic_launcher);
four.setIcon(R.mipmap.ic_launcher);

绑定好VP和TabLayout后，菜单的tv内容默认是从适配器中getPageTitle获得。

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    ... ...

    //PageTitle就是Tab的Text
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}
  • 你还可以通过setCustomView的方式对菜单进行设置：
  //自定义菜单
  for (int i = 0; i < adapter.getCount(); i++) {
       TabLayout.Tab tab = tabHost.getTabAt(i);
       if (tab != null) {
           tab.setCustomView(adapter.getTabView(i));
       }
   }

   //在适配器中，返回自定义View
   public View getTabView(int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
        ImageView iv = view.findViewById(R.id.iv);
        TextView tv = view.findViewById(R.id.tv);
        iv.setImageResource(images.get(position));
        tv.setText(title.get(position));
        return view;
    }

通过这种方式设置的好处是，不用关心适配器中getPageTitle的返回值啦！所有的设置都在view内。

5.BottomNavigationView

依赖

本文用的是 官方！官方！官方！

布局

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/black_line_white_inner"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_navigation_view" />
</android.support.design.widget.CoordinatorLayout>

注意:app:menu="@menu/bottom_navigation_view"是必须设置的，这个布局里面是导航菜单的内容。

bottom_navigation_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

   <item
        android:id="@+id/wechat"
        android:icon="@mipmap/icon_project_not_selected"
        android:title="微信"
        app:showAsAction="always" />
    <item
        android:id="@+id/communcation"
        android:icon="@mipmap/icon_knowledge_hierarchy_not_selected"
        android:title="通讯录"
        app:showAsAction="always" />
    <item
        android:id="@+id/find"
        android:icon="@mipmap/icon_navigation_not_selected"
        android:title="发现"
        app:showAsAction="always" />
    <item
        android:id="@+id/mine"
        android:icon="@mipmap/icon_home_pager_not_selected"
        android:title="我"
        app:showAsAction="always" />
</menu>

代码

//监听VP，触发BNV
mViewPager.addOnPageChangeListener(onPageListener);
private ViewPager.OnPageChangeListener onPageListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            bottomNavigationView.getMenu().getItem(position).setChecked(true);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

//监听BNV，触发VP
bottomNavigationView.setOnNavigationItemSelectedListener(onItemSelectedListener);
private BottomNavigationView.OnNavigationItemSelectedListener onItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            resetToDefaultIcon();//重置到默认不选中图片
            switch (item.getItemId()) {
                case R.id.wechat:
                    mViewPager.setCurrentItem(Constants.FIRST);
                    item.setIcon(R.mipmap.icon_project_not_selected);
                    break;
                case R.id.communcation:
                    mViewPager.setCurrentItem(Constants.SECOND);
                    break;
                case R.id.find:
                    mViewPager.setCurrentItem(Constants.THIRD);
                    break;
                case R.id.mine:
                    mViewPager.setCurrentItem(Constants.FOURTH);
                    break;
                default:
                    break;
            }
            return true;
        }
    };

//解决 BottomNavigationView 图标位移非等分问题（使用的时候 item 数大于 3 个时会有位移）
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

BottomNavigationViewHelper .java

public class BottomNavigationViewHelper {

    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

补充

如果想禁用选中菜单时放大的动画效果，只需要在资源文件dimen.xml中，如下设置：

<!--BottomNavigationView 有文字-->
<dimen name="design_bottom_navigation_active_text_size">10sp</dimen>
<dimen name="design_bottom_navigation_text_size">10sp</dimen>


<!--BottomNavigationView 只放图标，无文字-->
<dimen name="design_bottom_navigation_active_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_margin">16dp</dimen>

Demo

https://github.com/liuleshuai/NavigationMenuBar

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,591评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,448评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,823评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,204评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,228评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,190评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,078评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,923评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,334评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,428评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,022评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2赞 354

推荐阅读更多精彩内容