BottomNavigationView使用指南

2017-02-21 本文已影响1470人王诛魔Phy

最后效果.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了

BottomNavigationView使用指南

猜你喜欢

热点阅读