美文网首页Material designAndroid知识Android技术知识
最新的官方底部导航轮子——BottomNavigationVie

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

作者: Wang_Yi | 来源:发表于2016-11-02 17:34 被阅读519次

    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

    相关文章

      网友评论

      • uncochen:谷歌的东西,不敢乱用
      • 笑说余生:底部导航从最开始的对TextView做状态选择,之后的RadioGroup,然后FragmentTabHost,到Material Design的BottomNavigatioinBar,到最新的BottomNavigatioinView,还有Github上好多基于BottomNavigatioinBar扩展的绚丽的类库。其实用的话都可以,但是个人觉得还是NavigationBar更多强大些。
      • 我本山贼:这动画效果不好看啊
      • d5ba366035a2:个数超过5个该怎么办呢,重写控件么
        Jannonx:@cold初养成 多加item

      本文标题:最新的官方底部导航轮子——BottomNavigationVie

      本文链接:https://www.haomeiwen.com/subject/qlovuttx.html