【每天积累一点点】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) + "个");
}