BottomNavigationView的使用

官方更新了Support25.0.0，今天我們來認識一下BottomNavigationView，也就是底部導航，官方建議BottomNavigationView的item在3~5之間。

我的使用環境build.gradle中的引用如下：

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:recyclerview-v7:25.0.1'
}

第一步：佈局文件  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:design="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dingmouren.bottomnavigationviewdemo.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom_navigation_view"
        />
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorAccent"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:itemBackground="@android:color/holo_blue_light"
        app:menu="@menu/menu_bottom_navigation_view"
        />
</RelativeLayout>

注：這兩個引用都可以使用，

xmlns:design="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"

比如使用design   下面就是這個樣子

design:itemIconTint="@android:color/white"

 app:itemIconTint=" " 這裏是爲tab中的icon着色，

 app:itemTextColor=" "這裏是設置icon下面文本顏色，

app:itemBackground=" "這是設置tab的背景顏色，

app:menu="@menu/menu_bottom_navigation_view" 設置底部導航的菜單

第二步：BottomNavigationView的菜單xml文件,跟平常的菜單沒有什麼兩樣。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item1"
        android:checked="true"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="發短信"/>
    <item
        android:id="@+id/item2"
        android:icon="@android:drawable/ic_menu_call"
        android:title="打電話"
        />
    <item
        android:id="@+id/item3"
        android:icon="@android:drawable/ic_dialog_map"
        android:title="地圖"/>
</menu>

第三步：初始化BottomNavigationView對象，並設置選中時的監聽

private void initListener() {
    mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()){
                case R.id.item1:
                    showToast("發短信啦");
                    break;
                case R.id.item2:
                    showToast("打電話啦");
                    break;
                case R.id.item3:
                    showToast("去旅遊啦");
                    break;
            }
            item.setChecked(true);
            return true;
        }
    });
}

就是這麼簡單的使用。

github源碼傳送門：https://github.com/DingMouRen/BottomNavigationViewDemo