1. 程式人生 > >【每天積累一點點】BottomNavigationView使用教程

【每天積累一點點】BottomNavigationView使用教程

一:基本用法

1:在res/menu目錄下定義選單佈局:


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

    <item
       
android:id="@+id/recents"
       
android:title=

"第一"
       
android:icon="@mipmap/ic_discovery_gray"/>
    <item
       
android:id="@+id/favorites"
       
android:title="第二"
       
android
:icon="@mipmap/ic_library_gray"/>
    <item
       
android:id="@+id/nearby"
       
android:title="第三"
       
android:icon="@mipmap/ic_news_gray"/>

    <item
       
android:id="@+id/recents1"
       
android:title="第四"
       
android:icon="@mipmap/ic_discovery_gray"/>
    <item
       
android:id="@+id/favorites1"
       
android:title="第五"
       
android:icon="@mipmap/ic_library_gray"/>
</menu>


2:在你佈局檔案的適當位置使用BottomNavigationView並引用剛才定義的menu:


<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_three"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="20dp"
    app:menu="@menu/bottom_navigation_menu" />

二:自定義樣式

1:在res/drawable下定義item中圖示和文字選中或正常狀態下的樣式bottom_bar_item_selector.xml


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


2:定義整個item按壓或正常狀態下的背景樣式:

a:在res/drawable下定義不使用水波紋的樣式(按下變色)bottom_bar_item_bg.xml

注:下面的style沒有適用該效果


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@android:color/white"/>
    <item android:drawable="@color/bg_page"/>
</selector>


b:在res/drawable-v21目錄下定義使用水波紋效果bottom_bar_ripple.xml

注意水波紋效果只在API21或更高才有效果

注:下面的程式碼使用了該效果


<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white">
<!--color定義了水波紋的顏色-->
</ripple>


3:在res/values/styles.xml中定義style


<style name="BottomNavigation">
    <!--整個控制元件的背景色,如果itemBackground沒有設定正常狀態下的背景色,則有效,否則無效,因為被覆蓋了-->
    <item name="android:background">@color/colorPrimary</item>
    <!--item的背景色,可以設定按壓下的水波紋效果,水潑紋效果要放置在drawable-v21下,或者在drawable下用targetApi約束-->
    <item name="itemBackground">@drawable/bottom_bar_ripple</item>
    <!--圖示顏色-->
    <item name="itemIconTint">@drawable/bottom_bar_item_selector</item>
    <!--字型顏色-->
    <item name="itemTextColor">@drawable/bottom_bar_item_selector</item>
    <item name="paddingStart">50dp</item>
    <item name="paddingEnd">50dp</item>
</style>


4:使用style


<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_two"
    style="@style/BottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/tv_bottom"
    android:layout_marginBottom="20dp"
    app:menu="@menu/bottom_navigation_menu" />


5:或者你也可以不使用style,而是直接適用itemTextColor,itemIconTint,itemBackground等屬性:

 

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/colorPrimary"
    app:itemBackground="@drawable/bottom_bar_ripple2"
    app:itemIconTint="@drawable/bottom_bar_item_selector"
    app:itemTextColor="@drawable/bottom_bar_item_selector"
    app:menu="@menu/bottom_navigation_menu" />


三:監聽item的選中狀態


bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        if (item.getItemId() == R.id.favorites) {
            Utils.showToast(BottomNavigationActivity.this, "第二被選中");
        }
        return true;//要return true否則點選各個item就沒法選中了
    }
});


四:通過程式碼實現選中某一個item


bottomNavigationView.getMenu().getItem(1).setChecked(true);


五:獲取選中的item


/**
 * 官方沒有提供獲取選中的item的方法,需要自己遍歷
 */
@OnClick(R.id.bt_get_selection)
public void onGetSelection() {
    int selectionIndex = 0;
    Menu menu = bottom.getMenu();
    for (int i = 0; i < menu.size(); i++) {
        if (menu.getItem(i).isChecked()) {
            selectionIndex = i;
        }
    }
    selectionIndex = 0;
    Utils.showToast(this, "選中了第" + (selectionIndex + 1) + "個");
}