目錄

一、簡介

一、簡介

這是material design提供的一個標準底部導航欄的實現，可以輕鬆的實現導航欄選單之間的切換與瀏覽。使用方式更加快捷方便，適用於擁有3-5個子選單。

二、基本配置

（1）新增依賴：

（本人專案中使用的是較高版本的依賴）
專案中依賴：implementation 'com.android.support:design:28.0.0-rc02'
最新依賴：compile 'com.android.support:design:+'（容易出錯，依賴衝突）
指定依賴：compile 'com.android.support:design:26.1.0'
 

（2）添加布局：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bnv_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/main_bottom"
    app:itemTextColor="@drawable/main_bottom"
    />
 

（3）屬性說明：

itemBackground： 設定導航欄的背景顏色

itemIconTint： 設定導航欄中圖片的顏色

itemTextColor： 設定導航欄中文字的顏色

三、程式碼運用

（1）指定導航欄選單

佈局設定 ：

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottomNavigationView"
    app:itemBackground="@color/gray"
    app:itemIconTint="@drawable/main_bottom"
    app:itemTextColor="@drawable/main_bottom"
    app:menu="@menu/menu_bottom_navigation_view" />
 

app:menu ：引用選單佈局

menu_bottom_navigation_view.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/item_bottom_1"
        android:enabled="true"
        android:icon="@mipmap/set"
        android:title="選項一"
        app:showAsAction="ifRoom" />
      <item
        android:id="@+id/item_bottom_2"
        android:enabled="true"
        android:icon="@mipmap/set"
        android:title="選項二"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/item_bottom_3"
        android:enabled="true"
        android:icon="@mipmap/set"
        android:title="選項三"
        app:showAsAction="ifRoom" />

</menu>

效果圖：

（2）程式碼新增導航欄選單

無需指定選單佈局：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bnv_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/main_bottom"
    app:itemTextColor="@drawable/main_bottom"
    />

動態新增選單項（Item）：

Menu menu = bnvMenu.getMenu();
menu.add(0,i,i,"標題一");//設定選單標題
MenuItem item = menu.findItem(i);
item.setIcon(R.mipmap.set);//設定選單圖片

刪除最後一個選單項（Item）：

bnvMenu.getMenu().removeItem(bnvMenu.getMenu().size()-1);

效果圖：

（3）設定選中選單顏色

app:itemIconTint="@drawable/main_bottom"
app:itemTextColor="@drawable/main_bottom"

main_bottom.xml

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

（4）常用方法

//設定預設選中item
bottomNavigationView.getMenu().getItem(1).setChecked(true);

//設定導航欄選單項Item選中監聽
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        String title = item.getTitle().toString();
        switch (item.getItemId()) {
            case R.id.item_bottom_1:
                RxToast.showToastShort(activity, title);
                break;
            case R.id.item_bottom_2:
                RxToast.showToastShort(activity, title);
                break;
            case R.id.item_bottom_3:
                RxToast.showToastShort(activity, title);
                break;
        }
        return true;
    }
});

（5）超過3個選單項動畫效果問題

看了許多部落格歸納後的解決方法

一、新api去除動畫的方法：

//預設動畫
bottomNavigationView.setLabelVisibilityMode(0);
//預設清除動畫（顯示文字）
bottomNavigationView.setLabelVisibilityMode(1);
或佈局中新增：app:labelVisibilityMode="labeled"

二、舊api去除動畫的方法

@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);
            //去除動畫
            item.setShiftingMode(false); //api 28之前
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        LogUtils.e( "Unable to get shift mode field");
    } catch (IllegalAccessException e) {
        LogUtils.e( "Unable to change value of shift mode");
    }
}

四、原始碼地址

五、參考文件

六、內容推薦