Android BottomNavigationView，底部導航欄的簡單實現

時間 2019-11-17

標籤 android bottomnavigationview 底部導航簡單實現欄目 Android 简体版

原文原文鏈接

關於 Material Design 相關的控件，以前整理了一個系列文章，並在 GitHub 上創建一個 MDSamples 工程，使用代碼和文字解說配合的方式逐一說明。截止目前，大體寫有八九篇文章。期間，因爲一些工做變更和雜事，停了一些時間。如今，有點時間，準備續上。php

以前的文章，參考列表以下：html

這一篇要說的是 Android App 中的 BottomNavigation 設計，底部導航欄，設計規範可參考官網：java

Material Design Components 之 Bottom Navigationandroid

support.design 包中對應提供的控件是 BottomNavigationView，提供很少於 5 個菜單的底部導航欄實現。git

咱們先來看一下基本使用：程序員

<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 文件：github

<?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 着色器實現一個圖標多種狀態下使用。：app

<?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 文字顏色定義。ide

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 量身定製的，可供參考。