Material designAndroid知识Android技术知识

最新的官方底部导航轮子——BottomNavigationVie

2016-11-02  本文已影响519人  Wang_Yi

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
上一篇 下一篇

猜你喜欢

热点阅读