BottomNavigationView--基本使用總結(jié)

1翻默、BottomNavigationView 是什么读规?

BottomNavigationView 是安卓官方提供的底部導(dǎo)航欄盔性,能夠方便的實(shí)現(xiàn)下圖中的底部導(dǎo)航效果。

Paste_Image.png

按照 官方的設(shè)計規(guī)范 https://material.io/guidelines/components/bottom-navigation.html# 當(dāng)?shù)撞繉?dǎo)航的標(biāo)簽在 3--5 個之間的時候(含3劲妙、5), 可以使用BottomNavigationView 湃鹊。

當(dāng)導(dǎo)航標(biāo)簽少于3個的時候,也可以使用镣奋,不會報錯币呵,但實(shí)際項(xiàng)目中一般不會有少于三個的;如果導(dǎo)航標(biāo)簽超過5個侨颈,在使用BottomNavigationView 時在運(yùn)行期會報錯余赢,錯誤信息如下:
java.lang.IllegalArgumentException: Maximum number of items supported by BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()。意思是說哈垢,最多不能超過 5 個條目妻柒!

2、BottomNavigationView的使用前提及相關(guān)屬性

(1)耘分、使用前提

BottomNavigationView是放置在design包中的举塔,所以,使用前需要先引入com.android.support:design:25.1.0包求泰,引入方式有兩種央渣,一種是直接從當(dāng)前module的 gradle 文件中編輯,一種是從Project Structure 界面的 dependences 選項(xiàng)卡中導(dǎo)入渴频。導(dǎo)入方式芽丹,參考下圖:

直接從當(dāng)前Module的gradle文件中編輯.png
從Project Structure 界面的 dependences 選項(xiàng)卡中導(dǎo)入.png

(2)主要屬性及方法

  • android:background

整個BottomNavigationView 的背景色,設(shè)置背景色之后卜朗,切換選項(xiàng)時依舊會有水波紋效果(設(shè)置背景色也是為了將底部導(dǎo)航和上方的內(nèi)容進(jìn)行分割區(qū)分)

  • app:itemBackground

條目的背景色拔第。設(shè)置之后在切換選項(xiàng)時將無法看到水波紋效果

  • app:itemIconTint

條目圖標(biāo)的顏色〕《ぃ可以是單一顏色蚊俺,也可以是顏色selector。通常建議設(shè)置selector惹悄,當(dāng)未選中時指定一種顏色春叫,選中時再指定另一種顏色。該selector 定義在 res -- color 目錄下泣港。(未設(shè)置該屬性時,默認(rèn)未選中狀態(tài)為深灰色价匠,選中狀態(tài)時的顏色為當(dāng)前主題的 colorPrimary 顏色)

  • itemTextColor

條目文本的顏色当纱。可以是單一顏色踩窖,也可以是顏色selector坡氯。通常建議設(shè)置selector,當(dāng)未選中時指定一種顏色,選中時再指定另一種顏色箫柳。該selector 定義在 res -- color 目錄下手形。未設(shè)置該屬性時,默認(rèn)未選中狀態(tài)為深灰色悯恍,選中狀態(tài)時的顏色為當(dāng)前主題的 colorPrimary 顏色)

  • app:menu

當(dāng)前BottomNavigationView 所引用的menu 菜單库糠。

  • setOnNavigationItemSelectedListener()

設(shè)置導(dǎo)航條目被選中時的監(jiān)聽器

  • getMenu( )

獲取當(dāng)前BottomNavigationView 中所引用的 menu 菜單對象

3、詳細(xì)示例代碼:

最終實(shí)現(xiàn)效果:


BottomNavigationView.gif
  • BottomNavigationViewActivity.java
/**
 * 作者:CnPeng
 * <p>
 * 時間:2017/4/11:下午8:32
 * <p>
 * 說明:安卓原生底部導(dǎo)航欄 BottomNavigationView 的基本使用示例
 * <p>
 * 使用時需要先引入 design 包
 * <p>
 * 底部Item的數(shù)量不能超過5 涮毫,否則會報錯瞬欧,報錯信息如下: java.lang.IllegalArgumentException: Maximum number of items supported by
 * BottomNavigationView is 5. Limit can be checked with BottomNavigationView#getMaxItemCount()
 * <p>
 * 當(dāng)item超過3個時,未被選中的item 只顯示圖標(biāo)罢防,只有被選中的才會顯示圖標(biāo)和文字艘虎;而3個及3個以內(nèi)時圖標(biāo)和文字都會顯示
 * <p>
 * 如果底部Item 想實(shí)現(xiàn)小紅點(diǎn),就無法使用BottomNavigationView 了 咒吐。/(ㄒoㄒ)/~~
 */

public class BottomNavigationViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_navigation_view);

        final TextView tv_whichItemSelected = (TextView) findViewById(R.id.tv_whichItemSelected);

        BottomNavigationView bnv_001 = (BottomNavigationView) findViewById(R.id.bnv_001);

        //為底部導(dǎo)航設(shè)置條目選中監(jiān)聽
        bnv_001.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(
                    @NonNull
                            MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.item1:
                        tv_whichItemSelected.setText(item.getTitle());
                        break;
                    case R.id.item2:
                        tv_whichItemSelected.setText(item.getTitle());
                        break;
                    case R.id.item3:
                        tv_whichItemSelected.setText(item.getTitle());
                        break;
                    case R.id.item4:
                        tv_whichItemSelected.setText(item.getTitle());
                        break;
                    case R.id.item5:
                        tv_whichItemSelected.setText(item.getTitle());
                        break;
                }
                
                return true;    //這里返回true野建,表示事件已經(jīng)被處理。如果返回false恬叹,為了達(dá)到條目選中效果候生,還需要下面的代碼 
                // item.setChecked(true);  不論點(diǎn)擊了哪一個,都手動設(shè)置為選中狀態(tài)true(該控件并沒有默認(rèn)實(shí)現(xiàn))
                // 妄呕。如果不設(shè)置陶舞,只有第一個menu展示的時候是選中狀態(tài),其他的即便被點(diǎn)擊選中了绪励,圖標(biāo)和文字也不會做任何更改

            }
        });

        //默認(rèn)選中底部導(dǎo)航欄中的第三個
        bnv_001.getMenu().getItem(2).setChecked(true);
    }
}
  • activity_bottom_navigation.xml
<?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">

    <TextView
        android:id="@+id/tv_whichItemSelected"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <!--
    itemBackground  item的背景  ,設(shè)置之后將無法看到默認(rèn)的水波紋效果
    itemIconTint    item圖標(biāo)的顏色肿孵,可以是固定值,可以是 顏色selector(定義在 res —— color 目錄)
    itemTextColor   item文字的顏色疏魏,可以是固定值停做,可以是 顏色selector
    
    如果不設(shè)置itemIconTint和 itemTextColor的時候,當(dāng)某一個item被選中大莫,選中時圖標(biāo)和文字的顏色是 當(dāng)前主題的 colorPrimary 顏色
  
    background    整個底部導(dǎo)航的背景色蛉腌,設(shè)置之后,在切換被選中的item時依舊具有水波紋效果只厘。(設(shè)置background 也是為了能夠明顯的區(qū)分底部導(dǎo)航和上方的具體內(nèi)容)
    -->
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_001"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/e7e7e6"
        app:itemIconTint="@color/selectot_bnv"
        app:itemTextColor="@color/selectot_bnv"
        app:menu="@menu/menu_bottom_navigation"/>


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

    <item android:id="@+id/item1"
          android:icon="@drawable/hot_green"
          android:title="Item1"/>
    <item android:id="@+id/item2"
          android:icon="?android:attr/actionModeShareDrawable"
          android:title="Item2"/>
    <item android:id="@+id/item3"
          android:icon="@drawable/act_attentioned"
          android:title="Item3"/>
    <item android:id="@+id/item4"
          android:icon="@android:drawable/btn_star_big_off"
          android:title="Item4"/>
    <item android:id="@+id/item5"
          android:icon="@drawable/mainfocus"
          android:title="Item5"/>

</menu>
  • selector_bnv.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#f4b733" android:state_checked="true"></item>
    <item android:color="#666565"></item>
</selector>

4烙丛、總結(jié)

  • (1)BottomNavigationView 整體實(shí)現(xiàn)比較簡單,但是擴(kuò)展性不強(qiáng)羔味。比如河咽,想在某個條目的右上角加上小紅點(diǎn),這就行不通了赋元。忘蟹。飒房。

  • (2)沒有提供直接選中某項(xiàng)的方法,默認(rèn)選中第一項(xiàng)媚值。如果想更改默認(rèn)選中狠毯,就需要通過getMenu( ) 方法獲取menu 對象,然后獲取其中的具體 item褥芒,最后再調(diào)用item 的 setChecked(true)

  • (3) 總的條目數(shù)量不能超過5個嚼松。當(dāng)條目數(shù)量小于等于三個時,能將條目的圖標(biāo)和title 完全展示出來喂很。如果大于3個小于等于5個惜颇,則只有被選中的條目才能同時展示圖標(biāo)和title,未被選中的條目只展示圖標(biāo)少辣。

  • (4)創(chuàng)建 menu 菜單的時候凌摄,沒必要手寫,可以切換到design模式下漓帅,直接拖拽锨亏,然后再最右側(cè)更改屬性即可,大致如下圖:

Paste_Image.png

參考:
http://codpoe.me/2016/10/27/bottom_navigation_view/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忙干,一起剝皮案震驚了整個濱河市器予,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌捐迫,老刑警劉巖乾翔,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異施戴,居然都是意外死亡反浓,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門赞哗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來雷则,“玉大人,你說我怎么就攤上這事肪笋≡屡” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵藤乙,是天一觀的道長猜揪。 經(jīng)常有香客問我,道長坛梁,這世上最難降的妖魔是什么湿右? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮罚勾,結(jié)果婚禮上毅人,老公的妹妹穿的比我還像新娘。我一直安慰自己尖殃,他們只是感情好丈莺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著送丰,像睡著了一般缔俄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上器躏,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天俐载,我揣著相機(jī)與錄音,去河邊找鬼登失。 笑死遏佣,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的揽浙。 我是一名探鬼主播状婶,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼馅巷!你這毒婦竟也來了膛虫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤钓猬,失蹤者是張志新(化名)和其女友劉穎稍刀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體敞曹,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡账月,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了异雁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捶障。...
    茶點(diǎn)故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖纲刀,靈堂內(nèi)的尸體忽然破棺而出项炼,到底是詐尸還是另有隱情,我是刑警寧澤示绊,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布锭部,位于F島的核電站,受9級特大地震影響面褐,放射性物質(zhì)發(fā)生泄漏拌禾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一展哭、第九天 我趴在偏房一處隱蔽的房頂上張望湃窍。 院中可真熱鬧闻蛀,春花似錦、人聲如沸您市。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茵休。三九已至薪棒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間榕莺,已是汗流浹背俐芯。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钉鸯,地道東北人吧史。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像亏拉,于是被迫代替她去往敵國和親扣蜻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評論 2 351

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

  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,737評論 22 665
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,860評論 25 707
  • 第5章 菜單及塘、按鈕及導(dǎo)航 一莽使、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個獨(dú)立的組件笙僚,根...
    凜0_0閱讀 4,954評論 0 66
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程芳肌,因...
    小菜c閱讀 6,376評論 0 17
  • 1.我愿意深深地扎入生活,吮盡生活的骨髓肋层,過得扎實(shí)亿笤,簡單,把一切不屬于生活的內(nèi)容剔除得干凈利落栋猖,把生活逼到絕處净薛,用...
    風(fēng)熊花吉閱讀 344評論 0 0