備注：BottomNavigationView中5個菜單已經(jīng)是極限了友题，再多它就崩潰了。
個性化
更換標題（title）
更換menu item中title即可绿贞。
更換圖標（Icon）
更換圖標在介紹menu的時候也說過了陋守，AS可以幫你生成Verctor的圖標，理論上各個場景的圖標淹魄，都有提供郁惜。但是，注意這里的但是甲锡！AS自動幫我們生成的是VectorDrawable扳炬，本身沒有什么問題，相對png來說體積小搔体，可是5.0以下的設(shè)備不支持恨樟，不支持...
目前來說，5.0以下的市場還不能丟疚俱，所以我們就老老實實的換成png吧劝术。
可是，實現(xiàn)起來呆奕，卻是這樣的...
Bottom Navigation 圖標錯誤
一臉懵逼.png
雖然不知道為什么养晋，但是可以肯定的是一定是自己的姿勢不對，于是趕緊翻源碼梁钾，不翻不知道绳泉，一翻更懵逼，就這個BottomNavigationView原來實現(xiàn)這么復雜姆泻，但是還是硬著頭皮看下去零酪。下面來理一下給icon著色的步驟。
首先我們沒有給icon設(shè)置tintList的時候拇勃，BottomNavigationView會生成一個默認的ColorStateList:
privateColorStateListcreateDefaultColorStateList(intbaseColorThemeAttr){finalTypedValue value =newTypedValue();if(!getContext().getTheme().resolveAttribute(baseColorThemeAttr, value,true)) {returnnull;? ? ? ? }? ? ? ? ColorStateList baseColor = AppCompatResources.getColorStateList(? ? ? ? ? ? ? ? getContext(), value.resourceId);if(!getContext().getTheme().resolveAttribute(? ? ? ? ? ? ? ? android.support.v7.appcompat.R.attr.colorPrimary, value,true)) {returnnull;? ? ? ? }intcolorPrimary = value.data;intdefaultColor = baseColor.getDefaultColor();returnnewColorStateList(newint[][]{? ? ? ? ? ? ? ? DISABLED_STATE_SET,? ? ? ? ? ? ? ? CHECKED_STATE_SET,? ? ? ? ? ? ? ? EMPTY_STATE_SET? ? ? ? },newint[]{? ? ? ? ? ? ? ? baseColor.getColorForState(DISABLED_STATE_SET, defaultColor),? ? ? ? ? ? ? ? colorPrimary,? ? ? ? ? ? ? ? defaultColor? ? ? ? });? ? }
可以看到四苇，選中狀態(tài)是使用的colorPrimary而未選中狀態(tài)則使用的默認顏色，這個默認顏色可以通過屬性android.R.attr.textColorSecondary去源碼中查看方咆。發(fā)現(xiàn)跟實際的效果表現(xiàn)一致.
那么問題來了月腋，圖片呢，怎么會變成一個小色塊呢，接著往下看榆骚，圖標顏色設(shè)置的代碼片拍，進入BottomNavigationMenuView.setIconTintList，又調(diào)用了BottomNavigationItemView.setIconTintList,再繼續(xù)又調(diào)用了DrawableCompat.setTintList,最終是調(diào)用了Drawable.setTintList,而具體的實現(xiàn)則在BitmapDrawble.setColorFilter妓肢。
這里有一篇關(guān)于setColorFilter的介紹穆碎，可以參考下。這樣就不難解釋為什么是一個小色塊职恳，吐槽下我們UED的切圖所禀，居然圖標周邊不是透明的，而是白色放钦，白色...
所以色徘，劃重點了！２儋鳌褂策！圖標周邊要是透明的！圖標周邊要是透明的Ｍ切肌斤寂！圖標周邊要是透明的！＞镜搿遍搞！
周邊透明.png
非透明的區(qū)域，都會被著色器腋，著色分選中[android.R.attr.state_checked]和未選中[-android.R.attr.state_checked]對溪猿，沒看錯，就是-纫塌，減號诊县，負號
現(xiàn)在換成周邊透明的圖標（這次更徹底，除了線條都是透明的）措左，效果圖如下：
有效圖標
作者：seph_von
鏈接：http://www.reibang.com/p/7b2d842267ab
還有一種方式就是直接由用戶設(shè)置圖標依痊，不利用系統(tǒng)的著色方案
<?xml version="1.0" encoding="utf-8"?>
<Selector xmlns:android="http://schemas.android.com/apk/res/android">
<item?android:state_checked="false" android:drawable="@mipmap/icon_nav_02_de"/>
<item?android:state_checked="true" android:drawable="@mipmap/icon_nav_02_hi"/>
<.selector>
然后在BottomNavigationView中設(shè)置
app:itemIconTint="@null"
更換文字顏色
在drawable文件加載創(chuàng)建文件 drawable_colcor.xml
<?xml version="1.0" encoding="utf-8"?>
<Selector?xmlns:android="http://schemas.android.com/apk/res/android">
<item?android:state_checked="false" android:color="@color/icon_nav_02_de"/>
<item?android:state_checked="true" android:color="@color/icon_nav_02_hi"/>
</Selector?>
然后在BottomNavigationView中設(shè)置
app:itemTextColor="@drawable/drawable_color"
修改圖標顏色
現(xiàn)在基本知道了換圖標的注意點，以及著色的流程怎披，所以如果要給圖標換個顏色的話胸嘁，就簡單了。BottomNavigationView提供了自定義屬性R.styleable.BottomNavigationView_itemIconTint,因此在布局文件里添加itemIconTint的屬性就可以了
color_state_menu_navi.xml
效果圖如下（顏色有些浮夸钳枕，請忽略）:
設(shè)置Bottom Navigation顏色
如果是在代碼中實現(xiàn)的話缴渊，是這樣的
privatefuninitNavigationColor(){? ? ? ? val states = Array(2) { IntArray(1) }? ? ? ? states[0][0] = -android.R.attr.state_checked? ? ? ? states[1][0] = android.R.attr.state_checked? ? ? ? val colors = IntArray(2)? ? ? ? colors[0] = ContextCompat.getColor(this@BottomNaviActivity, android.R.color.red)? ? ? ? colors[1] = ContextCompat.getColor(this@BottomNaviActivity, R.color.green)? ? ? ? val csl = ColorStateList(states, colors)? ? ? ? navigation.itemTextColor = csl? ? ? ? navigation.itemIconTintList = csl? ? }
是的，你沒有看錯鱼炒，未選中的狀態(tài)是選中狀態(tài)前面加一個負號
作者：seph_von
鏈接：http://www.reibang.com/p/7b2d842267ab
來源：簡書
點擊效果
仔細看，會發(fā)現(xiàn)點擊時蝌借，字體和圖標會有一點位移：字體會變大昔瞧，而圖標也會相應的向上挪指蚁。大部分情況下，我們是不需要這樣的效果的自晰，那么怎么修改呢凝化？
翻了下源碼，居然沒有提供接口酬荞，那是不是就沒有辦法了呢搓劫？也不是！我們來看下item的布局文件：
居然有兩個TextView,再看BottomNavigationItemView里點擊響應部分的實現(xiàn)
if(checked) {? ? ? ? ? ? ? ? LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();? ? ? ? ? ? ? ? iconParams.gravity = Gravity.CENTER_HORIZONTAL| Gravity.TOP;? ? ? ? ? ? ? ? iconParams.topMargin = mDefaultMargin + mShiftAmount;? ? ? ? ? ? ? ? mIcon.setLayoutParams(iconParams);? ? ? ? ? ? ? ? mLargeLabel.setVisibility(VISIBLE);? ? ? ? ? ? ? ? mSmallLabel.setVisibility(INVISIBLE);? ? ? ? ? ? ? ? mLargeLabel.setScaleX(1f);? ? ? ? ? ? ? ? mLargeLabel.setScaleY(1f);? ? ? ? ? ? ? ? mSmallLabel.setScaleX(mScaleUpFactor);? ? ? ? ? ? ? ? mSmallLabel.setScaleY(mScaleUpFactor);? ? ? ? ? ? }else{? ? ? ? ? ? ? ? LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();? ? ? ? ? ? ? ? iconParams.gravity = Gravity.CENTER_HORIZONTAL |Gravity.TOP;? ? ? ? ? ? ? ? iconParams.topMargin = mDefaultMargin;? ? ? ? ? ? ? ? mIcon.setLayoutParams(iconParams);? ? ? ? ? ? ? ? mLargeLabel.setVisibility(INVISIBLE);? ? ? ? ? ? ? ? mSmallLabel.setVisibility(VISIBLE);? ? ? ? ? ? ? ? mLargeLabel.setScaleX(mScaleDownFactor);? ? ? ? ? ? ? ? mLargeLabel.setScaleY(mScaleDownFactor);? ? ? ? ? ? ? ? mSmallLabel.setScaleX(1f);? ? ? ? ? ? ? ? mSmallLabel.setScaleY(1f);? ? ? ? ? ? }
也就是說混巧，在選中和非選中的狀態(tài)枪向，是顯示不一樣的TextView，而且圖標距離上邊距的距離也不一樣咧党，那么我們先來看icon的上邊距變化的區(qū)別就在mShiftAmount,這個是在構(gòu)造函數(shù)中賦值的：
intinactiveLabelSize =? ? ? ? ? ? ? ? res.getDimensionPixelSize(R.dimen.design_bottom_navigation_text_size);intactiveLabelSize = res.getDimensionPixelSize(? ? ? ? ? ? ? ? R.dimen.design_bottom_navigation_active_text_size);? ? ? ? mDefaultMargin = res.getDimensionPixelSize(R.dimen.design_bottom_navigation_margin);? ? ? ? mShiftAmount = inactiveLabelSize - activeLabelSize;
看到這里就柳暗花明了秘蛔，原來mShiftAmount的值就是兩個TextView的字體大小的差，接下來就簡單了傍衡，如果設(shè)置兩個TextView的字體大小一樣的話深员，就解決了所有的問題。
盡管并沒有提供設(shè)置字體大小的接口蛙埂，但是我們可以通過重新定義R.dimen.design_bottom_navigation_text_size和R.dimen.design_bottom_navigation_margin的值來設(shè)置這兩個TextView的大小倦畅。
因此，只要在values.xml中新增兩個屬性即可:
14dp14dp
如果要設(shè)置icon距離上邊距的距離绣的，也可以通過重新定義R.dimen.design_bottom_navigation_margin來實現(xiàn)滔迈。
作者：seph_von
鏈接：http://www.reibang.com/p/7b2d842267ab
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處被辑。
