Android底部導航欄之官方BottomNavigationView

今天將AS升級2.3.1之后新建工程,忽然發(fā)現(xiàn)竟然多了這個!!!看來不得不去了解了,畢竟是官方控件

Bottom Navigation Activity

一. 簡介

  1. 官方簡介

Represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.
應用底部的導航欄,是material design bottom navigation的實現(xiàn).

  1. 特性,使用場景

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的情況(推薦是三到五個,太多和太少都不應該用)

二. 用法

  1. build.gradle加入支持庫
compile 'com.android.support:design:25.2.0'
  1. 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"/>
  1. 添加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的背景顏色,效果如下圖:
itemBackground效果圖
itemIconTint效果

itemTextColor效果

PS:以上三個屬性不設置的話默認背景顏色為background,圖標和字體顏色為灰色

四. Tab點擊后的顏色設置

  1. 新建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文件
  1. 通過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ù)量的效果圖

  1. 三個Tab:


    三個Tab的點擊效果
  2. 四個及以上Tab


    四個Tab
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容