Material Design 控件知識梳理(1) - Android Design Support Library 是什么
Material Design 控件知識梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知識梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知識梳理(4) - FloatingActionButton
Material Design 控件知識梳理(5) - DrawerLayout && NavigationView
Material Design 控件知識梳理(6) - Snackbar
Material Design 控件知識梳理(7) - BottomNavigationBar
Material Design 控件知識梳理(8) - TabLayout
Material Design 控件知識梳理(9) - TextInputLayout

一屁桑、概述

當某個主頁面有多個子頁面時透乾，我們一般會采用ViewPager來承載這些子頁面溉愁，并會提供一組選項卡讓用戶通過點擊對應的選項的方式來進行頁面之間的快速切換混卵，而這一組選項卡根據(jù)擺放位置的不同，一般可以分為下面兩種實現(xiàn)方式：

• 放在頂部玫氢，采用TabLayout
• 放在底部赡盘，采用BottomNavigationBar

今天捡遍，我們介紹第二種方式。

二眨业、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>

在代碼中對數(shù)據(jù)進行初始化：

    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的文字和圖標的顏色一定是被激活顏色背桐，這需要根據(jù)BackgroundStyle來決定优烧，在每種模式下，被選中Item的文字圖片顏色链峭、未被選中的Item的文字圖標顏色畦娄、整個BottomNavigationBar的背景顏色的對應關(guān)系為：

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

對于2.1中例子的Item 1，它的BackgroundStyle為BACKGROUND_STYLE_STATIC曲横，因此在它被選中的時候喂柒，文字和圖片的顏色為給它設置的ActiveColor，而整個BottomNavigationBar的背景色為BackgroundColor禾嫉，現(xiàn)在我們看一下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 監(jiān)聽Item的切換

可以通過下面的方法來監(jiān)聽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從未選中狀態(tài)變?yōu)檫x中狀態(tài)時回調(diào)
• onTabUnselected孽椰，某個Item從選中變?yōu)槲催x中時回調(diào)
• onTabReselected昭娩，某個Item已經(jīng)處于選中狀態(tài)，但是它又被再次點擊了黍匾，那么回調(diào)這個函數(shù)栏渺。

2.6 指定當前選中的位置

指定初始時刻的位置：

mBottomNavigationBar.setFirstSelectedPosition(3).initialise();

動態(tài)改變位置：

mBottomNavigationBar.selectTab(2);

2.7 初始化

在改變設置之后，需要在最后調(diào)用下面這句才會生效

mBottomNavigationBar.initialise();

三锐涯、BottomNavigationBar的顯示和隱藏

3.1 手動隱藏和顯示BottomNavigationBar

通過下面的兩個方法可以手動顯示和隱藏BottomNavigationBar：

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

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

3.2 根據(jù)列表的滾動來顯示和隱藏

如果我們的根布局使用的是CoordinatorLayout磕诊，那么可以通過給BottomNavigationBar設置內(nèi)置的Behavior來實現(xiàn)動態(tài)地顯示和隱藏，首先繼承于這個內(nèi)置的Bahavior，給它指定一個構(gòu)造函數(shù)：

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>

只需要這兩部操作霎终，就可以實現(xiàn)動態(tài)地顯示和隱藏了：

更多文章滞磺，歡迎訪問我的 Android 知識梳理系列：

• Android 知識梳理目錄：http://www.reibang.com/p/fd82d18994ce
• 個人主頁：http://lizejun.cn
• 個人知識總結(jié)目錄：http://lizejun.cn/categories/