要點(diǎn)：本文主要寫使用 BottomNavigationView 和遇到的一些問題的解決辦法
引言
作為谷歌 Material Design Components 新控件 BottomNavigationView馁害， 提供應(yīng)用底部導(dǎo)航欄的實(shí)現(xiàn)宏邮。沒有這個(gè)控件之前，Android 底部導(dǎo)航欄一般通過 LinearLayout 包裹幾個(gè) Button 或使用 RadioGroup 和 RadioButton 來實(shí)現(xiàn)勉盅。使用 BottomNavigationView 這個(gè)控件洛二，可以提供更好的用戶體驗(yàn)和開發(fā)更容易蜀踏。此文主要介紹在使用 BottomNavigationView 過程中遇到的幾個(gè)問題摩渺。
如何使用
添加依賴
這個(gè)沒有什么好說的
compile 'com.android.support:design:25.0.0'
添加布局
布局分兩個(gè)部分，首先是總的布局：
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="@color/tab_home"
app:itemTextColor="@color/tab_home"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation" />
其次错蝴，配置導(dǎo)航項(xiàng)洲愤。在 res 的 menu 目錄下創(chuàng)建上面代碼中 app:menu="@menu/bottom_menu" 要引用到的文件：
<?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"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_category"
android:icon="@drawable/ic_category"
android:title="@string/title_category" />
<item
android:id="@+id/navigation_activity"
android:icon="@drawable/ic_activity"
android:title="@string/title_activity" />
<item
android:id="@+id/navigation_cart"
android:icon="@drawable/ic_cart"
android:title="@string/title_cart" />
<item
android:id="@+id/navigation_mine"
android:icon="@drawable/ic_mine"
android:title="@string/title_mine" />
</menu>
事件處理
主要是點(diǎn)擊事件的處理，代碼如下：
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:
return true;
case R.id.navigation_category:
setTitle(R.string.title_category);
return true;
case R.id.navigation_activity:
setTitle(R.string.title_activity);
return true;
case R.id.navigation_cart:
setTitle(R.string.title_cart);
return true;
case R.id.navigation_mine:
setTitle(R.string.title_mine);
return true;
}
return false;
}
});
通過以上的代碼顷锰，我們的代碼就能運(yùn)行起來柬赐，效果圖如下:[圖片上傳失敗...(image-7e3f7a-1512980965647)]：
沒那么簡(jiǎn)單
很快你會(huì)發(fā)現(xiàn)，接入簡(jiǎn)單官紫，但是真正符合我們的設(shè)計(jì)要求肛宋，我們還需要搗騰搗騰。
下面列舉一下我遇到的問題：
- 當(dāng)導(dǎo)航項(xiàng)大于三個(gè)的時(shí)候束世，選中項(xiàng)變大酝陈，其它文字被隱藏
- 當(dāng)我們自定義默認(rèn)和選中圖之后，選中的效果圖變色了
問題來了毁涉，我們?cè)趺唇鉀Q呢沉帮？
針對(duì)第一個(gè)問題，在網(wǎng)上查資料后，發(fā)現(xiàn)是 mShiftingMode 的問題穆壕，默認(rèn)是開啟的且谷歌沒有開放修改接口待牵。既然谷歌不給修改接口，那么我們就硬來喇勋，用反射來解決洲敢。實(shí)現(xiàn)代碼如下：
BottomNavigationViewHelper.disableShiftMode(navigation);
BottomNavigationViewHelper 代碼如下：
public class BottomNavigationViewHelper {
public static void disableShiftMode(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
item.setShiftingMode(false);
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
Log.e("BottomNavigationViewHelper", "Unable to get shift mode field", e);
} catch (IllegalAccessException e) {
Log.e("BottomNavigationViewHelper", "Unable to change value of shift mode", e);
}
}
}
針對(duì)第二個(gè)問題，各種谷歌百度后茄蚯，發(fā)現(xiàn)是控件默認(rèn)著色器的問題。知道問題所在睦优，解決起來就簡(jiǎn)單了渗常。只需一行代碼禁 tint 就好了
navigation.setItemIconTintList(null);
默認(rèn)和選中文字的顏色，只需要添加顏色 selector 就可以了
app:itemTextColor="@color/tab_home"
另外汗盘，BottomNavigationView 支持的導(dǎo)航項(xiàng)數(shù)量是3-5個(gè)皱碘。
總結(jié)
谷歌 BottomNavigationView 效果是挺好的，使用很方便隐孽，特效也很不錯(cuò)癌椿，唯一不足就是接口不太友善×庹螅總的來說踢俄，這個(gè)控件使用容易且效果很贊，建議使用晴及。
源文地址
http://ihongqiqu.com/2017/06/14/BottomNavigationView/
作者為
