BottomNavigationView使用指南

最后效果.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://upload-images.jianshu.io/upload_images/2520304-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://upload-images.jianshu.io/upload_images/2520304-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了






最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,881评论 4 368
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,052评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,598评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,407评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,823评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,872评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,037评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,778评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,505评论 1 247
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,745评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,233评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,568评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,231评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,141评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,939评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,954评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,784评论 2 275

推荐阅读更多精彩内容