1翻默、BottomNavigationView 是什么读规?
BottomNavigationView 是安卓官方提供的底部導(dǎo)航欄盔性,能夠方便的實(shí)現(xiàn)下圖中的底部導(dǎo)航效果。
按照 官方的設(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)入方式芽丹,參考下圖:
(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)效果:
- 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è)更改屬性即可,大致如下圖: