Android UI Material Design交互设计(一)--BottomNavigationView底部菜单

Android UI Material Design交互设计(一)–BottomNavigationView底部菜单
Android UI Material Design交互设计(二)–Toolbar的基本使用与样式修改
Android UI Material Design交互设计（三）–SnackBar 详解
Android UI Material Design交互设计（四）–AppBarLayout 与Toolbar结合
Android UI Material Design交互设计(五)–CollapsingToolbarLayout 折叠布局
Android UI Material Design交互设计(六)–CoordinatorLayout之精髓Behavior 自定义Behavior

这个转GIF工具出了点问题，变成闪屏了
以前我们做这样的底部导航，需要自定义view或者很对view来组成这样的效果，很麻烦。但是Material Design中的BottomNavigationView一个控件完美解决来这个问题

如何使用：

一：添加依赖

    implementation 'com.android.support:design:28.0.0'

二：布局使用
布局文件如下：activity_home.xml

   <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:text="首页"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/text"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@color/white"
        app:itemTextColor="@color/navigation_menu_item_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation"/>
</android.support.constraint.ConstraintLayout>

BottomNavigationView的重要属性介绍

1. 属性一: app:itemBackground 指定的是底部导航栏的背景颜色,默认是主题的颜色;
2. 属性二: app:itemIconTint 指的是导航栏中图片的颜色 其实也可以不用设置，可以用图片自己的颜色
3. 属性三: app:iteamTextColor 指的是导航栏文字的颜色
4. 属性四: app:menu 指的是底部导航栏各个菜单items

@menu/navigation 文件是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/home_selector"
        android:title="@string/title_home"/>

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

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

</menu>

三：代码中设置item点击监听事件

public class HomeActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

    TextView message;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        BottomNavigationView bottom = findViewById(R.id.bottom);
        message = findViewById(R.id.text);
        bottom.setOnNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()){

            case R.id.navigation_home:
                message.setText("首页");
                return true;
            case R.id.navigation_dashboard:
                message.setText("统计");
                return true;
            case R.id.navigation_notifications:
                message.setText("我的");
                return true;
        }
        return false;
    }
}

注意：

这里底部导航图片与颜色都是点击会变化的，这里的颜色与图片都是用了selector状态选择器代码如下：
颜色：
@color/navigation_menu_item_color 文件代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:color="@color/colorAccent"></item> <!-- selected颜色 -->
    <item android:state_pressed="true"
        android:color="@color/colorAccent"/> <!-- pressed颜色 -->
    <item android:state_focused="true"
        android:color="@color/colorAccent"/> <!-- focused颜色 -->
    <item android:color="#008577"/> <!-- default颜色 -->

</selector>

home_selector.xml 代码

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

小结：BottomNavigationView不止可以实现底部菜单，头部菜单，中部菜单都行的