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