不多說(shuō)先上效果圖

zhouchatian.com

添加依賴(lài)

compile 'com.android.support:design:25.0.0'

添加控件

在布局文件添加BottomNavigationView組件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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.zhouchatian.baseandroid.MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_centerInParent="true"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation"/>

</RelativeLayout>

添加按鈕

在res下創(chuàng)建navigation.xml 放在menu文件夾下堵漱，如果沒(méi)有就創(chuàng)建一個(gè)menu文件夾

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bottom_home"
        android:icon="@mipmap/ic_home_white_24dp"
        android:title="首頁(yè)" />
    <item
        android:id="@+id/bottom_book"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="書(shū)本" />

    <item
        android:id="@+id/bottom_collection"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="收藏"/>

    <item
        android:id="@+id/bottom_setting"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="設(shè)置" />
</menu>

要說(shuō)下的這個(gè)按鈕只能創(chuàng)建3個(gè)到5個(gè)级零，多了或少了都會(huì)報(bào)錯(cuò)。

添加監(jiān)聽(tīng)

public class MainActivity extends AppCompatActivity {
    private TextView mTextView;
    private BottomNavigationView mNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = (TextView) findViewById(R.id.text);
        mNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
        mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mTextView.setText(item.getTitle().toString().toUpperCase());
                return true;
            }
        });
    }
}

這樣一個(gè)建的底部導(dǎo)航就做好了笔横，控件使用簡(jiǎn)單，帶來(lái)局限性烁巫，只有修改一些奢人。

修改

app:itemIconTint="#FFFFFF"設(shè)置圖標(biāo)的顏色

app:itemTextColor="#FFFFFF"設(shè)置文字的顏色

app:itemBackground="@color/colorPrimary" 設(shè)置背景色

如果不設(shè)置就是上圖的顏色闸昨，官方提供了三個(gè)顏色

2017-04-25_211939.png

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="#FFFFFF"
        app:itemTextColor="#FFFFFF"
        app:itemBackground="@color/colorPrimary"
        app:menu="@menu/navigation"/>

當(dāng)然你也可以在代碼中設(shè)置

setItemBackgroundResource(int resId)
setItemIconTintList(ColorStateList tint)
setItemTextColor(ColorStateList textColor)

在實(shí)際開(kāi)發(fā)中使用item.getItemId()使用switch來(lái)判斷選中了哪一個(gè)

mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.bottom_home:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_book:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_collection:
                        mTextView.setText(item.getTitle());
                        break;
                    case R.id.bottom_setting:
                        mTextView.setText(item.getTitle());
                        break;
                }
                return true;
            }
        });

其實(shí)這個(gè)還有另外一個(gè)監(jiān)聽(tīng)

BottomNavigationView.OnNavigationItemReselectedListener

官方解釋用于重選的監(jiān)聽(tīng)风纠，特意提下是希望各位用的時(shí)候別選錯(cuò)了况鸣。

問(wèn)題

1. 默認(rèn)選中的是第一個(gè)，但是我們要默認(rèn)選中其他的怎么辦竹观？

在menu.xml中使用 android:checked="true"

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bottom_home"
        android:icon="@mipmap/ic_home_white_24dp"
        android:title="首頁(yè)" />
    <item
        android:id="@+id/bottom_book"
        android:icon="@mipmap/ic_book_white_24dp"
        android:title="書(shū)本" />

    <item
        android:id="@+id/bottom_collection"
        android:icon="@mipmap/ic_favorite_white_24dp"
        android:title="收藏"
        android:checked="true"/>

    <item
        android:id="@+id/bottom_setting"
        android:icon="@mipmap/ic_tv_white_24dp"
        android:title="設(shè)置" />
</menu>

或者代碼中這么寫(xiě)

mNavigationView.getMenu().getItem(0).setChecked(false);
        mNavigationView.getMenu().getItem(2).setChecked(true);