Material Design 控件知識梳理(7) BottomNavigationBar

1、概述

當某個主頁面有多個子頁面時，咱們通常會採用ViewPager來承載這些子頁面，並會提供一組選項卡讓用戶經過點擊對應的選項的方式來進行頁面之間的快速切換，而這一組選項卡根據擺放位置的不一樣，通常能夠分爲下面兩種實現方式：

• 放在頂部，採用TabLayout
• 放在底部，採用BottomNavigationBar

今天，咱們介紹第二種方式。

2、BottomNavigationBar詳解

2.1 基本用法

引入依賴包：

compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
複製代碼

在佈局當中引入控件，這裏，咱們將它放置在容器的底部：

<android.support.design.widget.CoordinatorLayout 
    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"
    tools:context="com.demo.lizejun.repotransition.NavigationBarActivity">
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
複製代碼

在代碼中對數據進行初始化：

private void initViews() {
        mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation);
        //1.設置Mode
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        //2.設置BackgroundStyle
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        //3.設置背景色
        mBottomNavigationBar.setBarBackgroundColor(android.R.color.white);
        //4.設置每一個Item
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_1, "Item 1").setActiveColorResource(android.R.color.holo_blue_dark));
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_2, "Item 2").setActiveColorResource(android.R.color.holo_green_dark));
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_3, "Item 3").setActiveColorResource(android.R.color.holo_orange_dark));
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_4, "Item 4").setActiveColorResource(android.R.color.holo_green_dark));
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_5, "Item 5").setActiveColorResource(android.R.color.holo_orange_dark));
        //5.初始化
        mBottomNavigationBar.initialise();
    }
複製代碼

上面代碼的運行效果以下圖所示：

能夠看到，上面咱們設置了不少的屬性，下面咱們就一一來說解各個屬性的含義。

2.2 BottomNavigationBar的Mode屬性

Mode的設置對應於這句：

mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
複製代碼

這個屬性有兩種可選的值，MODE_FIXED和MODE_SHIFTING

• MODE_FIXED：選中的Item會稍大於未選中的Item，不管Item是否選中，都會顯示文字和圖標。
• MODE_SHIFTING：選中的Item明顯大於未選中的Item，未選中的Item只顯示圖標，而且在選中項切換的時候，會有必定的偏移效果。

在2.1當中，咱們演示的就是第一種方式，下面，咱們看一下第二種方式的效果：

mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
複製代碼

2.3 BottomNavigationBar的BackgroundStyle屬性

BackgroundStyle的設置對應於這句：

mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
複製代碼

這個屬性有兩個可選的值：

• BACKGROUND_STYLE_STATIC
• BACKGROUND_STYLE_RIPPLE

這兩種選項決定了兩點：整個BottomNavigationBar的顏色和被選中Item的顏色，在解釋這個以前，咱們須要先了解一下三種顏色：

• barBackgroudColor：只能經過BottomNavigationBar來設置

mBottomNavigationBar.setBarBackgroundColor(android.R.color.white);
複製代碼

• activeColor：被激活顏色，能夠經過BottomNavigationBar來進行全局的設置，也能夠給每一個Item單獨設置

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_1, "Item 1").setActiveColorResource(android.R.color.holo_blue_dark));
複製代碼

• inActiveColor：未被激活顏色，能夠經過BottomNavigationBar來進行全局的設置，也能夠給每一個Item單獨設置。

注意到，上面這三種顏色並非說被選中的Item的文字和圖標的顏色必定是被激活顏色，這須要根據BackgroundStyle來決定，在每種模式下，被選中Item的文字圖片顏色、未被選中的Item的文字圖標顏色、整個BottomNavigationBar的背景顏色的對應關係爲：

也就是說， inActiveColor在任什麼時候候都是未被選中 Item的文字和圖片顏色，而其它兩種則否則：

• 在static模式下，activeColor是被選中Item的文字圖標顏色，backgroundColor爲BottomNavigationBar的背景色
• 而在ripple模式下，恰巧是反過來。

對於2.1中例子的Item 1，它的BackgroundStyle爲BACKGROUND_STYLE_STATIC，所以在它被選中的時候，文字和圖片的顏色爲給它設置的ActiveColor，而整個BottomNavigationBar的背景色爲BackgroundColor，如今咱們看一下BACKGROUND_STYLE_RIPPLE的狀況：

mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
複製代碼

2.4 給Item設置角標

經過BottomNavigationItem的setBadgeItem方法，能夠給每一個Item設置一個獨立的角標，對於角標支持設置它的背景、文案、文案顏色以及在選中時是否隱藏角標：

BadgeItem badgeItem = new BadgeItem()
                .setBackgroundColorResource(android.R.color.holo_red_dark) //設置角標背景色
                .setText("5") //設置角標的文字
                .setTextColorResource(android.R.color.white) //設置角標文字顏色
                .setHideOnSelect(true); //在選中時是否隱藏角標
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_5, "Item 5")
    .setActiveColorResource(android.R.color.holo_orange_dark)
    .setBadgeItem(badgeItem));
複製代碼

效果以下圖所示：

2.5 監聽Item的切換

能夠經過下面的方法來監聽Item之間的切換：

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_5, "Item 5").setActiveColorResource(android.R.color.holo_orange_dark).setBadgeItem(badgeItem));
mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {

            @Override
            public void onTabSelected(int position) {
                Log.d("onTabSelected", "position=" + position);
            }

            @Override
            public void onTabUnselected(int position) {
                Log.d("onTabUnselected", "position=" + position);

            }

            @Override
            public void onTabReselected(int position) {
                Log.d("onTabReselected", "position=" + position);

            }
});
複製代碼

• onTabSelected，某個Item從未選中狀態變爲選中狀態時回調
• onTabUnselected，某個Item從選中變爲未選中時回調
• onTabReselected，某個Item已經處於選中狀態，可是它又被再次點擊了，那麼回調這個函數。

2.6 指定當前選中的位置

指定初始時刻的位置：

mBottomNavigationBar.setFirstSelectedPosition(3).initialise();
複製代碼

動態改變位置：

mBottomNavigationBar.selectTab(2);
複製代碼

2.7 初始化

在改變設置以後，須要在最後調用下面這句纔會生效

mBottomNavigationBar.initialise();
複製代碼

3、BottomNavigationBar的顯示和隱藏

3.1 手動隱藏和顯示BottomNavigationBar

經過下面的兩個方法能夠手動顯示和隱藏BottomNavigationBar：

public void show(View view) {
        mBottomNavigationBar.unHide(true);
    }

    public void hide(View view) {
        mBottomNavigationBar.hide(true);
    }
複製代碼

3.2 根據列表的滾動來顯示和隱藏

若是咱們的根佈局使用的是CoordinatorLayout，那麼能夠經過給BottomNavigationBar設置內置的Behavior來實現動態地顯示和隱藏，首先繼承於這個內置的Bahavior，給它指定一個構造函數：

public class BottomBehavior extends BottomVerticalScrollBehavior<BottomNavigationBar> {

    public BottomBehavior(Context context, AttributeSet attributeSet) {
        super();
    }

}
複製代碼

把這個Behavior設置給BottomNavigationBar：

<android.support.design.widget.CoordinatorLayout 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"
    tools:context="com.demo.lizejun.repotransition.NavigationBarActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.demo.lizejun.repotransition.behavior.BottomBehavior"/>
</android.support.design.widget.CoordinatorLayout>
複製代碼

只須要這兩部操做，就能夠實現動態地顯示和隱藏了：

---

更多文章，歡迎訪問個人 Android 知識梳理系列：

• Android 知識梳理目錄：www.jianshu.com/p/fd82d1899…
• 我的主頁：lizejun.cn
• 我的知識總結目錄：lizejun.cn/categories/