BottomNavigationView的通用修改記錄（新解決方案）

BottomNavigationView是design包下的一款底部導航控制元件，初次使用發現效果特別不錯，可是到了實際開發中，我們要的效果就不能按照谷歌的標準來開發了。寫文章時使用design版本為28.0.0

我在使用過程中發現好多類似的需求：
1.修改文字顏色
2.圖片的切換
3.關閉item的切換動畫
4.修改文字大小
5.修改文字與icon的間距
6.修改圖片（icon）大小

修改文字切換顏色

我們需要使用itemTextColor屬性來指定選中和未選中的顏色

建立一個selector來指定選中的顏色和預設的顏色

<!--selector_navigation.xml --><selector xmlns:android="">
   <item android:color="#F14040" android:state_checked="true" />
   <item android:color="#959393"/></selector>

<!--BottomNavigationView的屬性 -->app:itemTextColor="@drawable/selector_navigation"

修改文字切換顏色.png

圖片的切換，不使用預設的修改圖片顏色

一般item 圖片的 選中 和 不選中 都會有美工給我們切好圖，而我們把圖片放入後，卻被bottomNavigationView修改成了他預設的顏色切換，而有時候我們的圖片就不是純色的圖。

預設的圖片切換顏色.png

我們需要修改setItemIconTintList()

bottomBar.itemIconTintList = null//kotlinbottomBar.setItemIconTintList(null)//java

注意的是：在xml中設定app:itemIconTint="@null"是無效的

修改後圖片就按照原圖的顏色顯示了

修改為null後

關閉item切換動畫（反射）

item數量在大於三個的時候，BottomNavigationView會預設開啟shifting mode。效果就是選中文字出現，圖片上上下下，大大小小的。在我查閱如何關閉動畫效果這一問題中，我發現好多都是透過反射的方式來關閉shifting mode

反射關閉shifting mode

//kotlinfun disableShiftingMode(bottomBar: BottomNavigationView) {  var menuView = bottomBar.getChildAt(0) as BottomNavigationMenuView  var shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")

  shiftingMode.isAccessible = true
  shiftingMode.setBoolean(menuView, false)
  shiftingMode.isAccessible = false

  for (index in 0 until menuView.childCount) {      var item = menuView.getChildAt(index) as BottomNavigationItemView

      item.setShifting(false)

      item.setChecked(item.itemData.isChecked)
    }
}

其實谷歌看到很多人都在想辦法關閉這個shifting mode後，在這裡，我再記錄另外一種方法。

關閉item切換動畫（labelVisibilityMode）

我在design-28版本中發現他多了一個屬性
BottomNavigationView_labelVisibilityMode
這個屬性就可以幫助我們關閉shifting mode

labelVisibilityMode有多種選擇(我用GIF來展示更加直觀)

auto（LABEL_VISIBILITY_AUTO）：

Label behaves as "labeled" when there are 3 items or less, or "selected" when there are 4 items or more.
自動模式，該模式使用item數來確定是否顯示或隱藏標籤，即自動開啟shifting mode，預設的模式。

labeled（LABEL_VISIBILITY_LABELED）：

Label is shown on all navigation items.
所有item都顯示，包括文字

labeled

unlabeled（LABEL_VISIBILITY_UNLABELED）：

Label is not shown on any navigation items.
在所有item 中都不顯示，包括底下都文字

unlabeled.gif

selected（LABEL_VISIBILITY_SELECTED）：

官方解釋：Label is shown on the selected navigation item.
標籤在選中的item 中顯示，

selected 模式

我們就按照自己的效果選擇顯示效果吧～

修改文字大小

在dimens檔案中新增屬性值修改文字大小

<!--修改預設（未選中）的文字大小 --><dimen name="design_bottom_navigation_text_size" tools:override="true">16sp</dimen><!--修改選中的文字大小 --><dimen name="design_bottom_navigation_active_text_size" tools:override="true">16sp</dimen>

修改文字大小.png

修改圖片文字間距大小

<dimen name="design_bottom_navigation_margin" tools:override="true">10dp</dimen>

這裡注意margin的使用，不是越大，文字圖片的間距就越大，還是拿修改引數看圖說話

margin=0dp

margin：0dp.png

margin=10dp

margin：10dp.png

從圖中我們很明顯就能看出，margin類似於margin_top。這裡的值是對應於上邊距的。這點需要注意。

修改圖片大小

xml中自帶屬性arrt：BottomNavigationView_itemIconSize

app:itemIconSize = 24dp

其他dimens修改

<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>//選中時的最大寬度<dimen name="design_bottom_navigation_active_text_size">14sp</dimen>//選中時的字型大小<dimen name="design_bottom_navigation_elevation">8dp</dimen>//陰影的大小<dimen name="design_bottom_navigation_height">56dp</dimen>//高度<dimen name="design_bottom_navigation_item_max_width">96dp</dimen>//未選中的最大寬度<dimen name="design_bottom_navigation_item_min_width">56dp</dimen>//未選中的最小的寬度<dimen name="design_bottom_navigation_margin">8dp</dimen>//icon與文字之間的間距<dimen name="design_bottom_navigation_shadow_height">1dp</dimen>//陰影高度<dimen name="design_bottom_navigation_text_size">12sp</dimen>//未選中時的字型大小

作者：space0o0
連結：