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

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來承載這些子頁面，并會提供一組選項卡讓用戶通過點擊對應的選項的方式來進行頁面之間的快速切換，而這一組選項卡根據擺放位置的不同，一般可以分為下面兩種實現方式：

  • 放在頂部，采用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();
    }

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



可以看到，上面我們設置了很多的屬性，下面我們就一一來講解各個屬性的含義。

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();

三、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 知識梳理系列：

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,563評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,694評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 178,672評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,965評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,690評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,019評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,013評論 3贊 449
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,188評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,718評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3贊 360
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,149評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,845評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2贊 380

推薦閱讀更多精彩內容