關於 Material Design 相關的控制元件，之前整理了一個系列文章，並在 GitHub 上建立一個 MDSamples 工程，使用程式碼和文字解說配合的方式逐一說明。截止目前，大致寫有八九篇文章。期間，由於一些工作變動和瑣事，停了一些時間。現在，有點時間，準備續上。
之前的文章，參考列表如下：
- Android TabLayout 分分鐘打造一個滑動標籤頁
- Android 一文告訴你到底是用Dialog，Snackbar，還是Toast
- Android FloatingActionButton 重要的操作不要太多，一個就好
- Android 初識AppBarLayout 和 CoordinatorLayout
- Android CoordinatorLayout實戰案例學習《一》
- Android CoordinatorLayout 實戰案例學習《二》
- Android 詳細分析AppBarLayout的五種ScrollFlags
- Android TextInputLayout，打造 Material Design 風格的文字輸入框
這一篇要說的是 Android App 中的 BottomNavigation 設計，底部導航欄，設計規範可參考官網：
Material Design Components 之 Bottom Navigation
support.design 包中對應提供的控制元件是 BottomNavigationView，提供不多於 5 個選單的底部導航欄實現。
我們先來看一下基本使用：
<android.support.design.widget.BottomNavigationView
android:id="@+id/bnv_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemIconTint="@color/selector_blue"
app:itemTextColor="@color/selector_blue"
app:menu="@menu/menu_bottom_navigation"/>複製程式碼使用 menu 資源定義選單內容，也就是這裡的 res/menu/menu_bottom_navigation.xml 檔案：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_home"
android:title="Home"
android:icon="@drawable/ic_action_home"/>
<item
android:id="@+id/action_explore"
android:title="Explore"
android:icon="@drawable/ic_action_explore"/>
<item
android:id="@+id/action_me"
android:title="Me"
android:icon="@drawable/ic_action_me"/>
</menu>複製程式碼除了 app:menu 屬性定義選單內容，BottomNavigationView 能夠使用的定製屬性並不多，有這幾個：
app:itemIconTint：Icon 圖示著色，值為一個 ColorStateList ，可以在 color 資原始檔夾中定義。使用這個屬性，奇妙利用 tint 著色器實現一個圖示多種狀態下使用。：
<?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/blue"></item>
<item android:color="@color/gray"></item>
</selector>複製程式碼app:itemTextColor：Label 文字顏色定義。
app:itemBackground：背景內容。
效果如下：
上圖是 3 個選單時的展示和互動方式，即選單文字和圖示同時顯示，選中時有一個大小變化過程（這裡不是動畫，通過原始碼可以看到，其實只是一個簡單的尺寸上的瞬時縮放）。但是，當超過 3 個選單時，文字就不再顯示。對比看一下 5 個選單時的效果圖：
可以看到，互動方式也發生變化，選中有一個左右移動騰出空間的過程。那再多一點選單數量，比如 6 個時呢？對不起，要報錯啦，不支援！
注意：根據 Material Design 對底部導航欄的設計要求，BottomNavigationView 只支援 3 到 5 個子選單數量的導航欄。並且，考慮到使用者體驗，3 個及3個以下選單數量的導航欄，與超過 3 個時，互動過程也有所區分。關於最多支援 5 個字選單的內容，可以從 BottomNavigationView 原始碼中檢視：
public static final int MAX_ITEM_COUNT = 5;
當超出這個數量時，產生非法引數異常。
通過 setOnNavigationItemSelectedListener() 方法可以監聽不同子選單的選中切換事件。但是，竟然沒有一個簡便的方法直接設定選中某個子選單，就像 check(id) 這樣。不知是不是 BottomNavigationView 控制元件設計時的遺漏。目前能夠想到的一個做法就是獲取 menu item 物件，利用 performClick() 模擬點選事件，如：
BottomNavigationView view = (BottomNavigationView) findViewById(R.id.bnv_menu);
view.findViewById(R.id.action_explore).performClick();複製程式碼以上便是 BottomNavigationView 的所有內容，按照 Android 上的 Bottom Navigation 設計規範定製而成。可以看出，使用起來還是很簡單的。同時，可定製性也非常有限。比如，想在底部某個子選單新增一個小紅點提示的檢視，就有些難以處理。如果使用 RadioGroup 實現導航欄的話，就靈活一些。
附：GitHub 站有一個 BottomNavigationBar 開源專案，專門針對 Material Design 風格的 Bottom Navigation 量身定製的，可供參考。
關於我：亦楓，部落格地址：yifeng.studio/，新浪微博：IT亦楓
微信掃描二維碼，歡迎關注我的個人公眾號：安卓筆記俠
不僅分享我的原創技術文章，還有程式設計師的職場遐想
