今天將AS升級2.3.1之后新建工程，忽然發(fā)現(xiàn)竟然多了這個！！！看來不得不去了解了，畢竟是官方控件
一. 簡介
Represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.
應用底部的導航欄，是material design bottom navigation的實現(xiàn).
- 特性，使用場景
Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations.
底部導航使用戶更方便的查看和切換最高層級的導航界面，適用于有三到五個Tab的情況（推薦是三到五個，太多和太少都不應該用）
二. 用法
- build.gradle加入支持庫
compile 'com.android.support:design:25.2.0'
- XML使用布局（只是NavigationView，具體Tab要在menu里添加）
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation"/>
- 添加Tab
3.1 官方介紹
The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting which destination is currently active. It can be done using MenuItem#setChecked(true)
可以通過menu的方式向BottomNavigationView添加Tab，每個menu可以有title，icon，enable狀態(tài)，可以通過menu的checked屬性設置默認選中的Tab（我自己設置無效）
3.2 添加Menu
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home"/>
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard"/>
<!-- 該item設置enabled為false，界面會顯示當前item但是是灰色，不能點擊-->
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications"
android:enabled="false"/>
</menu>
3.3 設置點擊事件
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.getMenu().getItem(2).setChecked(true);//設置默認選中的Tab
navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
/*通過判斷進行選擇Tab之后想要的操作，一般是進行fragment的動態(tài)切換*/
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText(R.string.title_home);
return true;
case R.id.navigation_dashboard:
mTextMessage.setText(R.string.title_dashboard);
return true;
case R.id.navigation_notifications:
mTextMessage.setText(R.string.title_notifications);
return true;
}
return false;
}
});
三. XML屬性介紹
Caution：以下三種屬性都可以用ColorStateList來實現(xiàn)點擊前后顏色變化效果
- itemBackground 設置NavigationView的背景顏色，效果如下圖：
- itemIconTint 設置ItemIcon的顏色，效果如下圖：
- itemTextColor設置itemText的顏色，效果如下：
PS:以上三個屬性不設置的話默認背景顏色為background，圖標和字體顏色為灰色
四. Tab點擊后的顏色設置
- 新建ColorStateList（colot_item_state.xml）
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="@color/colorAccent"/>
<item
android:color="@color/colorPrimary"/>
</selector>
該文件要在res文件夾下新建color目錄，然后新建該xml文件
- 通過NavigationView的三個XML屬性設置該ColorStateList
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation"
app:itemIconTint="@color/colot_item_state"
app:itemTextColor="@color/colot_item_state"/>
效果：
五. 不同Tab數(shù)量的效果圖
-
三個Tab：
三個Tab的點擊效果 -
四個及以上Tab
四個Tab
