Android底部导航栏BottomNavigatonView的使用方式

BottomNavigationView

今天创建工程的时候无意间点到了Bottom Navigatoin Activity于是就四处学习了解了一下，写一篇文章，以免自己忘记。

第一步

你可以直接使用studio自带的创建一个Activity，new-Activity-Bottom Navigation Activity创建一个Activity。


你会发现系统自动给创建好了模板，特别注意的是res文件夹下的menu菜单，多了一个navigation.xml

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

Activity的xml文件里面BottomNavigationView的代码

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

Activity中的代码

private TextView mTextMessage;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Overridei
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    mTextMessage.setText(R.string.title_home);
                    return true;
                case R.id.navigation_dashboard:
                    mTextMessage.setText(R.string.title_dashboard);
                    return true;
                case R.id.navigation_notifications:
                    mTextMessage.setText(R.string.title_notifications);
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        mTextMessage = (TextView) findViewById(R.id.message);
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

运行一下，显示的效果都是默认的。按照我们自己的需求，我们将会对的文字和图片进行修改，还有文字和图片的颜色。

第二步，了解一下Vector Asset的使用

BottomNavigationView里面添加的图片都是使用的xml的格式
其中的一个图片示例

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,13h8L11,3L3,3v10zM3,21h8v-6L3,15v6zM13,21h8L21,11h-8v10zM13,3v6h8L21,3h-8z" />
</vector>

首先制作这样的图片对格式是又要求的
点击drawable-new-Vector Asset

Asset Type选择使用系统的图片还是本地文件，本地文件的格式要求问SVG和PSD的，下面讲解的是添加自己的本地图片，你也可以选择Clip Art中的其他系统图片。

然后点击Local file，选择已经准备好的svg的图片，点击next和finish即可创建一个vector类型的图片


在你的drawable文件夹里面就会出现ic_marker.xml的一张图片，打开后是这个样子

<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#009DD9" android:pathData="M512,249.98c-99.39,0 -180.71,81.32 -180.71,180.71s81.32,180.71 180.71,180.71 180.71,-81.32 180.71,-180.71 -81.32,-180.71 -180.71,-180.71zM512,551.15c-66.26,0 -120.47,-54.21 -120.47,-120.47s54.21,-120.47 120.47,-120.47 120.47,54.21 120.47,120.47 -54.21,120.47 -120.47,120.47z"/>
    <path android:fillColor="#009DD9" android:pathData="M512,39.15c-216.85,0 -391.53,174.68 -391.53,391.53 0,349.36 391.53,572.24 391.53,572.24s391.53,-222.87 391.53,-572.24c0,-216.85 -174.68,-391.53 -391.53,-391.53zM512,930.64C424.66,873.41 180.71,686.68 180.71,430.68c0,-183.72 147.58,-331.29 331.29,-331.29s331.29,147.58 331.29,331.29c0,256 -243.95,442.73 -331.29,499.95z"/>
</vector>

第三步，假设你已经准备好了三张图片

然后更新menu中的navigation.xml,设置icon属性为你自己的图片，title为下方显示的文字

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_map"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_earth"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_marker"
        android:title="@string/title_notifications" />

</menu>

预览后的效果

发现已经成功的换成了自己的图片

第四步，更改点击和没有点击时的颜色

点击包名-New-Android Resource File

Resource type选择Drawable，写好文件名，点击OK

打开main2_selector.xml文件显示一下代码

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

</selector>

想要更改颜色需要添加下面两句话,这样颜色选择文件就写好了

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--选中的颜色-->
    <item android:color="@color/red" android:state_checked="true" />
    <!--未选中的颜色-->
    <item android:color="@color/green" android:state_checked="false" />
</selector>

color.xml 中的代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
  	......
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

最后在Activity的xml文件里的BottomNavigationView组件中添加图片和文字的颜色属性

<android.support.design.widget.BottomNavigationView
        ......
        app:itemIconTint="@drawable/main2_selector"
        app:itemTextColor="@drawable/main2_selector"
       .......
        app:menu="@menu/navigation" />

这样就是实现了颜色的更改，效果如下

注意：如果里面的图标超过了三个

如果图标超过了三个，需要在BottomNavigationView组件中添加属性，不然就会只显示选中的图片下的文字，就像这样：

<android.support.design.widget.BottomNavigationView
        ......
        app:labelVisibilityMode="labeled"
        ......
        >

labelVisibilityMode中的属性值：
labeled : 保持所有文字便签显示
unlabeled ：只显示图标
selected ：在选中的时候显示文字标签，有动画效果
auto : 在 1-3 个按钮时使用 labeled ，大于 3 个按钮使用 selected

最后，如果你创建的是一个Empty Activity

你需要创建一个menu文件夹和一个menu.xml
在res上右键new-Directory 命名问menu

然后在menu文件夹上右键new-Menu resource file输入文件名，点击ok即可。
然后照上述步骤添加相应的代码。