一、Bottom Navigation

• 這裡我就不介紹Material Design了,想了解更多就去看看官網，來看看他們自己的Introduction：(溫馨提示：由於本人英語水平有限，以下引用均用有道翻譯來翻譯)

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
我們挑戰自己，為我們的使用者創造一種視覺語言，它綜合了優秀設計的經典原則和技術和科學的可能性。這是材料設計。這個規範是一個活的檔案，將會更新，因為我們繼續發展的原則和材料設計的細節。

• Bottom Navigation，想要使用Bottom Navigation，個人建議先看一下Bottom Navigation的設計，再來學習怎麼用它。

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
底部導航條使得在單個點選中探索和切換頂級檢視變得很容易。

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.
點選底部導航圖示將直接帶您到相關檢視或重新整理當前活動檢視。

Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.
底部導航主要用於移動裝置。為了達到類似的效果，桌面，使用邊導航。

Usage
Three to five top-level destinations
Destinations requiring direct access
3到5個頂級目的地
目的地需要直接訪問

Color
Tint the active icon with the app’s primary color. Use black or white if the bottom navigation bar is already colored.
用app的主色來著色活動圖示。如果底部導航欄已經著色，請使用黑色或白色。

Specs
Width of each action: The width of the view divided by the number of actions (with a max of 168dp and a minimum of 80dp)
Height: 56dp
Icon: 24 x 24dp
每個動作的寬度:檢視的寬度除以運算元(最大值為168dp，最小為80dp)
高度:56 dp
圖示:24×24 dp

二、使用

• 最快的方法就是在android studio中直接新建一個Bottom Navigation Activity。當然也可以新建一個Empty Activity。
• 首先新增以下依賴

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

1、MainActivity.java

package com.example.lcf.myapplication;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView mTextMessage;

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

        mTextMessage = (TextView) findViewById(R.id.message);

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            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_edit:
                        mTextMessage.setText(R.string.title_edit);
                        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;
            }
        });
    }
}

2、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lcf.myapplication.MainActivity">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="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" />

</android.support.constraint.ConstraintLayout>

3、navigation.xml，右擊menu資料夾新建一個Menu resource file，name為navigation，由於我在這裡使用了vector drawable，所以還要新增以下依賴implementation 'com.android.support:support-vector-drawable:26.1.0'。navigation.xml的程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    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_edit"
        android:icon="@drawable/ic_edit_black_24dp"
        android:title="@string/title_edit" />
    <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>

三、上圖來看看

• 執行截圖如下：

• 上面是四個top-level destinations的，來看看3個的

• 對比一下，如果只有三個動作，則始終顯示圖示和文字標籤
  如果有四個或五個操作，則僅將非活動檢視顯示為圖示。