前言
翻看
com.android.support:design:25.0.0
看到提供了幾個元件封裝庫，覺得
BottomNavigationView
能夠引入到項目中，代碼也不複雜，就拿出來進行一個快速介紹，友善後面用到該元件的夥伴，有個大緻了解
效果1
效果2
效果三
引入方式
1.依賴包
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:design:25.0.0'
} 2.引入布局中
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:design="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ppisland.servenshare.MainActivity">
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
design:itemIconTint="@color/item_text_color"
design:itemTextColor="@color/item_text_color"
design:menu="@menu/menu_navigation" />
</android.support.constraint.ConstraintLayout> 注意下該元件自定義屬性
design:itemIconTint="@color/item_text_color"
design:itemTextColor="@color/item_text_color"
design:menu="@menu/menu_navigation"
app:itemBackground : 子菜單背景
app:itemIconTint : 圖示顔色
app:itemTextColor : 文本顔色
app:menu : 菜單 3.系統擴充檔案 values.xml
<declare-styleable name="BottomNavigationView">
<attr name="menu"/>
<attr name="itemIconTint"/>
<attr name="itemTextColor"/>
<attr name="itemBackground"/>
</declare-styleable> 4.配置選中态顔色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#fff" android:state_checked="true"/>
<item android:color="#fff" android:state_pressed="true"/>
<item android:color="#ccc"/>
</selector> 5.圖示使用的矢量圖形式，當然可以設定drable樣式icon
<
vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27
0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55
-0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1
0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector> 6.定義item條目，這裡使用menu方式進行定義，并非私用布局容器定義（常用的布局容器）
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item1"
android:checked="true"
android:icon="@drawable/ic_mail_outline_black_24dp"
android:title="Message"/>
<item
android:id="@+id/item2"
android:icon="@drawable/ic_call_black_24dp"
android:title="Call"/>
<item
android:id="@+id/item3"
android:icon="@drawable/ic_person_black_24dp"
android:title="Contact"/>
</menu> ok ，定義三個item，看效果如上面效果圖
事件監聽一并提供。類似onclick，不做介紹。
setOnNavigationItemSelectedListener
放入三個item沒問題那多放入幾個，（官方建議3~5個子item）
五個效果如下
效果2
你妹的，這樣可不好，效果太玄，不符合我們app風格。怎麼辦呢改。
網上現成代碼，利用反射修改，動畫模式。（下面是kotlin代碼，用法一樣）
open class BottomNavigationViewHelper {
@SuppressLint("RestrictedApi")
fun disableShiftMode(view: BottomNavigationView) {
val menuView = view.getChildAt(0) as BottomNavigationMenuView
try {
val shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")
shiftingMode.isAccessible = true
shiftingMode.setBoolean(menuView, false)
shiftingMode.isAccessible = false
for (i in 0 until menuView.childCount) {
val item = menuView.getChildAt(i) as BottomNavigationItemView
item.setShiftingMode(false)
// set once again checked value, so view will be updated
item.setChecked(item.itemData.isChecked)
}
} catch (e: NoSuchFieldException) {
Log.e("BNVHelper", "Unable to get shift mode field", e)
} catch (e: IllegalAccessException) {
Log.e("BNVHelper", "Unable to change value of shift mode", e)
}
}
} 調用方式，将BottomNavigationView引用放入就關閉動畫效果了
bottomHelp!!.disableShiftMode(navigation)
仔細的同學，會發現，切換時候字型也是随着selected，unselected 進行縮放的，這個好辦！！！
看下源碼
public BottomNavigationItemView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
final Resources res = getResources();
int inactiveLabelSize =
res.getDimensionPixelSize(R.dimen.design_bottom_navigation_text_size);
int activeLabelSize = res.getDimensionPixelSize(
R.dimen.design_bottom_navigation_active_text_size);
mDefaultMargin = res.getDimensionPixelSize(R.dimen.design_bottom_navigation_margin);
mShiftAmount = inactiveLabelSize - activeLabelSize;
mScaleUpFactor = 1f * activeLabelSize / inactiveLabelSize;
mScaleDownFactor = 1f * inactiveLabelSize / activeLabelSize;
LayoutInflater.from(context).inflate(R.layout.design_bottom_navigation_item, this, true);
setBackgroundResource(R.drawable.design_bottom_navigation_item_background);
mIcon = (ImageView) findViewById(R.id.icon);
mSmallLabel = (TextView) findViewById(R.id.smallLabel);
mLargeLabel = (TextView) findViewById(R.id.largeLabel);
} 看到什麼了？
這裡我們對系統定義的dimens進行同名覆寫，在項目dimens.xml 中建立同名屬性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="design_bottom_navigation_text_size">12sp</dimen>
<dimen name="design_bottom_navigation_active_text_size">12sp</dimen>
</resources> 擴充
看到有個同學在原基礎上進行了BadgeView ，紅點擴充，采用了位置測量方案。這個實作方式多樣。不做介紹
效果三樣式
引用
官方位址 https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html