美文网首页Android UI
BottomNavigationView使用指南

BottomNavigationView使用指南

作者: 王诛魔Phy | 来源:发表于2017-02-21 18:20 被阅读1470次
    最后效果.gif

    Android Support Library 25 中增加了 BottomNavigationView
    所以你必须使用com.android.support:design:25.0.0以上的版本才能玩

    1.在 build.gradle 文件中增加依赖:

    compile 'com.android.support:design:25.0.0'

    2.在main_activity.xml中添加:

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="@dimen/title_height"
            android:layout_alignParentBottom="true"
            app:menu="@menu/menu_tab_button"
            app:itemIconTint="@color/nav_color_select"
            app:itemTextColor="@color/nav_color_select"
            app:itemBackground="@color/text_white_color">
        </android.support.design.widget.BottomNavigationView>
    
    • 其中app:menu="@menu/menu_tab_button"决定了展示几个item,都长什么样
    • 其中,分别决定图标和文字选中和未选中item的状态,颜色
    app:itemIconTint="@color/nav_color_select"
    app:itemTextColor="@color/nav_color_select"```
    
    - 其中```app:itemBackground="@color/text_white_color"```则是整个view的背景颜色
    
    3.menu_tab_button.xml的代码如下:
    
    

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
    android:id="@+id/mian_tab_statistics"
    android:enabled="true"
    android:checked="true" //默认选中
    android:title="@string/nav_tongji"
    android:icon="@drawable/tongji"/>

    <item android:id="@+id/mian_tab_paidui"
        android:enabled="true"
        android:title="@string/nav_paidui"   //文字内容
        android:icon="@drawable/paidui"/>   //icon图标
    
    <item android:id="@+id/mian_tab_find"
        android:enabled="true"
        android:title="@string/nav_faxiang"
        android:icon="@drawable/faxian"/>
    
    <item android:id="@+id/mian_tab_more"
        android:enabled="true"
        android:title="@string/nav_more"
        android:icon="@drawable/more"/>
    

    </menu>

    
    
    ###然而,你以为会这么简单?? shiftingMode教你做人()
    ###这个只会在item个数超过3个才会出现.
    
    ![牛逼的特效(shiftingMode).gif](http:https://img.haomeiwen.com/i2520304/464b090fa4c8919c.gif?imageMogr2/auto-orient/strip)
    
    4.这让我如何是好?看了半天,在网上找到一个方法.
    

    /**

    • 一个关于BottomNavigationView的帮助类,用来关闭shiftingMode
    • @author 王诛魔 2017/2/10 下午6:35
    • @e-mail phyooos@163.com
      */

    public class BNVHelper {

    public static void disableShiftMode(BottomNavigationView navigationView) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.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 itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                itemView.setShiftingMode(false);
                itemView.setChecked(itemView.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            // Log
        } catch (IllegalAccessException e) {
            // Log
        }
    }
    

    }

    
    
    原作者@[ChristmasJason](http://www.jianshu.com/u/4d132a94e6e8):http://www.jianshu.com/p/e2a8791e80d6
    
    然后我看了一下源码**mShiftingMode** 这个布尔值决定了是否启用shiftingMode,所以上面的方法就是shiftingMode.setBoolean(menuView, false);
    
    
    然后就好了......
    
    提示:
    google说选中图标的颜色是这么改的,然而都是骗人的,这个应该是默认的设置,我也偷懒没有验证
    
    ![2017-02-21_17-59-10.png](http:https://img.haomeiwen.com/i2520304/c6c71ad14a9e0106.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    
    

    app:itemIconTint="@color/nav_color_select"
    app:itemTextColor="@color/nav_color_select"

    其实你配置了之后,就是这个东西来决定的,而不是app's primary color
    nav_color_select.xml这就是个选择器,代码如下:
    

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:state_pressed="true" android:color="@color/colorPrimary" />
    <item android:color="@color/gray_light" />
    </selector>

    
    
    ##End,到这里你的导航条也应该ok了
    
    
    
    
    
    
    

    相关文章

      网友评论

      • 5ef7222e2272:請問有人知道如何切換BottomNavigationView 的畫面嗎?
      • b87de13d3784:辣鸡,居然不能自定义selector
      • nobita0522:我想知道如何改变BottomNavigationView里面文字和图标大小,以及颜色的方法
      • hlla:居然没人来顶

      本文标题:BottomNavigationView使用指南

      本文链接:https://www.haomeiwen.com/subject/hrmuwttx.html