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

澤毛發表於2017-12-21
Material Design控制元件Navigation

一、概述

當某個主頁面有多個子頁面時，我們一般會採用ViewPager來承載這些子頁面，並會提供一組選項卡讓使用者通過點選對應的選項的方式來進行頁面之間的快速切換，而這一組選項卡根據擺放位置的不同，一般可以分為下面兩種實現方式：

  • 放在頂部，採用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>
複製程式碼

在程式碼中對資料進行初始化：

    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();
    }
複製程式碼

上面程式碼的執行效果如下圖所示：

Material Design 控制元件知識梳理(7) BottomNavigationBar
可以看到，上面我們設定了很多的屬性，下面我們就一一來講解各個屬性的含義。

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);
複製程式碼

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

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的背景顏色的對應關係為：

Material Design 控制元件知識梳理(7) 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);
複製程式碼

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

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));
複製程式碼

效果如下圖所示：

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

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();
複製程式碼

三、BottomNavigationBar的顯示和隱藏

3.1 手動隱藏和顯示BottomNavigationBar

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

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

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

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

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>
複製程式碼

只需要這兩部操作，就可以實現動態地顯示和隱藏了：

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

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

相關文章