最新的官方底部導航輪子——BottomNavigationView

月光邊境發表於2018-01-18
NavigationView

BottomNavigationView是最新的design包新增的一個底部導航欄控制元件，可能谷歌也覺得相對於DrawerLayout這種抽屜導航來說，底部導航更加的方便使用者操作。 對比自己用RadioGroup或者其他的方式來實現底部導航來說，BottomNavigationView自身具有一個選中時的動畫。 下面是一個使用demo： ####1.新增依賴（版本號必須是最新的25.0.0）：

compile 'com.android.support:design:25.0.0'
複製程式碼

####2.建立menu列表: menu個數限定在3到5個 否則會丟擲exception

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menuHome"
        android:enabled="true"
        android:icon="@drawable/ic_home_black_36dp"
        android:title="主頁"
        app:showAsAction="always" />
    <item
        android:id="@+id/menuCart"
        android:enabled="true"
        android:icon="@drawable/ic_shopping_cart_black_36dp"
        android:title="購物車"
        app:showAsAction="always" />
    <item
        android:id="@+id/menuBook"
        android:enabled="true"
        android:icon="@drawable/ic_book_black_36dp"
        android:title="書籤"
        app:showAsAction="always" />
    <item
        android:id="@+id/menuExplore_"
        android:enabled="true"
        android:icon="@drawable/ic_explore_black_36dp"
        android:title="發現"
        app:showAsAction="always" />
    <item
        android:id="@+id/menuMe"
        android:enabled="true"
        android:icon="@drawable/ic_account_box_black_36dp"
        android:title="我"
        app:showAsAction="always" />
</menu>
複製程式碼

####3.xml中寫好佈局：

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@color/colorAccent"
        app:itemTextColor="@android:color/black"
        app:menu="@menu/menu_bottom_nav" />/>
複製程式碼

######幾個屬性說明: app:menu：導航欄的選單列表 app:itemBackground ：導航欄背景顏色 app:itemIconTint ：icon的顏色 app:itemTextColor ：menu選中時文字的顏色 ####4.Activity中新增menu的點選監聽：

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.navBottom)
    BottomNavigationView navBottom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        navBottom.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    // do something...
                }
                return true;
            }
        });
    }
}

複製程式碼

####5.效果圖：

demo.gif

相關文章