Android Material Design 之 BottomNavigationView

概述

BottomNavigationView 是 MD 風(fēng)格的底部導(dǎo)航視圖苍蔬,也是比較常見的視圖之一镐依。
詳細可以參照 MD 的官方文檔 https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-style

簡單實現(xiàn)

首先添加 design library

compile 'com.android.support:design:25.4.0'

布局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@id/bottom_navigation"
        android:background="@android:color/darker_gray" />
</RelativeLayout>

bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_home"
        android:icon="@drawable/ic_home"
        android:title="主頁" />

    <item
        android:id="@+id/item_share"
        android:icon="@drawable/ic_share"
        android:title="分享" />

    <item
        android:id="@+id/item_settings"
        android:icon="@drawable/ic_settings"
        android:title="設(shè)定" />

</menu>

代碼很簡單庇茫,這里就不再解釋了糟秘。

效果如下:

高級設(shè)置

圖標的顏色是可以修改的姨俩,做法如下

app:itemIconTint="@color/bottom_navigation_item_color"

添加 itemIconTint 屬性來設(shè)置選中狀態(tài)和未選中狀態(tài)下的圖標顏色鸟赫。

bottom_navigation_item_color.xml 代碼如下

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

效果如下:

圖標的顏色改掉了,但是文字的顏色沒有改掉今缚。

繼續(xù)添加 itemTextColor 屬性即可

app:itemTextColor="@color/bottom_navigation_item_color"

效果如下:

添加點擊事件

BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
        return true;
    }
});

官方建議 1~2 個 Item 的話不應(yīng)該使用 BottomNavigationView算柳,并且 Item 的數(shù)量不應(yīng)該超過 5 個醉锄,如果你設(shè)置了 6 個 Item 的話搁骑,會直接報以下錯誤

Caused by: java.lang.IllegalArgumentException: Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()

我們繼續(xù)添加 Item 到 5 個,效果變成下面這樣了

上圖中的效果叫做 ShiftingMode朋沮,通過查看源碼發(fā)現(xiàn)何荚,只要 Item 的數(shù)量達到 4 個的時候囱淋,就會開啟 ShiftingMode。

如果不想要 ShiftingMode餐塘,可以利用反射來實現(xiàn)绎橘,具體做法參照下面的鏈接
https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode

源碼

https://github.com/teletian/Android/tree/master/MaterialDesignSamples/BottomNavigationView

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市唠倦,隨后出現(xiàn)的幾起案子称鳞,更是在濱河造成了極大的恐慌,老刑警劉巖稠鼻,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冈止,死亡現(xiàn)場離奇詭異,居然都是意外死亡候齿,警方通過查閱死者的電腦和手機熙暴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慌盯,“玉大人周霉,你說我怎么就攤上這事⊙窃恚” “怎么了俱箱?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長灭必。 經(jīng)常有香客問我狞谱,道長乃摹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任跟衅,我火速辦了婚禮孵睬,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伶跷。我一直安慰自己掰读,他們只是感情好,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布叭莫。 她就那樣靜靜地躺著磷支,像睡著了一般。 火紅的嫁衣襯著肌膚如雪食寡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天廓潜,我揣著相機與錄音抵皱,去河邊找鬼。 笑死辩蛋,一個胖子當著我的面吹牛呻畸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悼院,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼伤为,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了据途?” 一聲冷哼從身側(cè)響起绞愚,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎颖医,沒想到半個月后位衩,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡熔萧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年糖驴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片佛致。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡贮缕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出俺榆,到底是詐尸還是另有隱情感昼,我是刑警寧澤,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布罐脊,位于F島的核電站抑诸,受9級特大地震影響烂琴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蜕乡,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一奸绷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧层玲,春花似錦号醉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至润绵,卻和暖如春线椰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背尘盼。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工憨愉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人卿捎。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓配紫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親午阵。 傳聞我的和親對象是個殘疾皇子躺孝,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,769評論 25 707
  • 太長了,還是轉(zhuǎn)載吧...今天在看博客的時候底桂,無意中發(fā)現(xiàn)了@Trinea在GitHub上的一個項目Android開源...
    龐哈哈哈12138閱讀 20,154評論 3 283
  • 眷戀這個詞植袍,柔于愛,勝于喜歡籽懦,脫俗于依賴奋单。是頻回頭,是常低眉猫十,是走路搖搖擺擺的手览濒,是微風(fēng)吹過又停留的頭發(fā),是風(fēng)箏和...
    蘇小旗閱讀 303評論 0 3
  • 昨天是七夕拖云,是織女牛郎相會的日子贷笛,也是朋友圈秀恩愛,拉仇恨的日子宙项,但乏苦。。也是上班的日子。 待在辦...
    雞蛋蛋_2adb閱讀 194評論 0 0
  • 1 2 3 1int main(){printf("hello world");}
    RocEDU閱讀 218評論 0 1