BottomNavigationView的通用修改記錄(新解決方案)

BottomNavigationView是design包下的一款底部導(dǎo)航控件,初次使用發(fā)現(xiàn)效果特別不錯,可是到了實際開發(fā)中,我們要的效果就不能按照谷歌的標(biāo)準(zhǔn)來開發(fā)了。寫文章時使用design版本為28.0.0

我在使用過程中發(fā)現(xiàn)好多類似的需求:
1.修改文字顏色
2.圖片的切換
3.關(guān)閉item的切換動畫
4.修改文字大小
5.修改文字與icon的間距
6.修改圖片(icon)大小

修改文字切換顏色

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

創(chuàng)建一個selector來指定選中的顏色和默認(rèn)的顏色

<!--selector_navigation.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="#F14040" android:state_checked="true" />
   <item android:color="#959393"/>
</selector>
<!--BottomNavigationView的屬性 -->
app:itemTextColor="@drawable/selector_navigation"
修改文字切換顏色.png

圖片的切換,不使用默認(rèn)的修改圖片顏色

一般item 圖片的 選中不選中 都會有美工給我們切好圖,而我們把圖片放入后,卻被bottomNavigationView修改成了他默認(rèn)的顏色切換,而有時候我們的圖片就不是純色的圖。

默認(rèn)的圖片切換顏色.png

我們需要修改setItemIconTintList()

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

注意的是:在xml中設(shè)置app:itemIconTint="@null"是無效的

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

修改為null后

關(guān)閉item切換動畫(反射)

item數(shù)量在大于三個的時候,BottomNavigationView會默認(rèn)開啟shifting mode。效果就是選中文字出現(xiàn),圖片上上下下,大大小小的。在我查閱如何關(guān)閉動畫效果這一問題中,我發(fā)現(xiàn)好多都是通過反射的方式來關(guān)閉shifting mode

反射關(guān)閉shifting mode

//kotlin
fun 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)
    }
}

其實谷歌看到很多人都在想辦法關(guān)閉這個shifting mode后,在這里,我再記錄另外一種方法。

關(guān)閉item切換動畫(labelVisibilityMode)

我在design-28版本中發(fā)現(xiàn)他多了一個屬性
BottomNavigationView_labelVisibilityMode
這個屬性就可以幫助我們關(guān)閉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數(shù)來確定是否顯示或隱藏標(biāo)簽,即自動開啟shifting mode,默認(rèn)的模式。

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.
標(biāo)簽在選中的item 中顯示,


selected 模式

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

修改文字大小

在dimens文件中添加屬性值修改文字大小

<!--修改默認(rèn)(未選中)的文字大小 -->
<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的使用,不是越大,文字圖片的間距就越大,還是拿修改參數(shù)看圖說話

margin=0dp


margin:0dp.png

margin=10dp


margin:10dp.png

從圖中我們很明顯就能看出,margin類似于margin_top。這里的值是對應(yīng)于上邊距的。這點需要注意。

修改圖片大小

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>//未選中時的字體大小

參考:
Google BottomNavigationView 文檔
Material Design系列之BottomNavigationView詳解 - 簡書
BottomNavigationView實現(xiàn)底部導(dǎo)航欄的實現(xiàn)(一) - kunkun5love的博客 - CSDN博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容