美文网首页酷炫的UI效果Android技术知识程序员之家
BottomNavigationView新控件的介绍以及使用

BottomNavigationView新控件的介绍以及使用

作者: Blazer | 来源:发表于2016-10-25 00:33 被阅读189次

    现在可能很多人实现类似微信界面结构更多是使用tablayout+viewpager(嵌套fragment),目前谷歌出现了BottomNavigationView这个控件,本篇文章将介绍其具体的使用,也欢迎大家互相讨论:
    话不多说先上效果图:

    Screenshot_2016-10-25-00-29-57-581_com.example.b9.png

    1、在 build.gradle 文件中增加依赖:

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

    2、布局:

    <android.support.design.widget.BottomNavigationView    
    android:id="@+id/bnv_mainactivity" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"  
    android:layout_alignParentBottom="true"    
    app:itemBackground="@color/colorAccent"  
    app:itemIconTint="@android:color/white"    
    app:itemTextColor="@android:color/white"   
    app:menu="@menu/bottom">
    </android.support.design.widget.BottomNavigationView>
    

    3、menu菜单项:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
     <item    android:icon="@drawable/ic_account_balance_black_24dp"  android:title="主页" />   
     <item    android:icon="@drawable/ic_account_balance_wallet_black_24dp"   android:title="钱包" /> 
     <item   android:icon="@drawable/ic_add_shopping_cart_black_24dp" android:title="购物" />  
     <item   android:icon="@drawable/ic_account_circle_black_24dp"  android:title="我的" />
    </menu>
    

    4、activity中使用:

    @BindView(R.id.bnv_mainactivity)
    BottomNavigationView bnvMainactivity;
    @BindView(R.id.activity_main)
    RelativeLayout activityMain;
    @Overrideprotected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);    
    setContentView(R.layout.activity_main);   
    ButterKnife.bind(this);  
    
    bnvMainactivity.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { 
    @Override     
       public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
          setTitle(item.getTitle());      
          return true;     
       }   
     });
    }
    

    5、注意:
    底部导航栏高度默认是 56dp。
    菜单元素只能是 3~5 个。如果个数少于3个或者多于5个,则会报错。
    icon 的选中颜色默认是 @color/colorPrimary。当然你也可以使用app:itemIconTint="@android:color/white"来自定义,这样定以后,所有的 icon 颜色都是这个了。
    菜单元素文字的默认颜色是 @color/colorPrimary。你可以使用app:itemTextColor="@android:color/white"自定义。
    底部导航栏背景颜色默认是当前样式的背景色(白色/黑色),你可以使用app:itemBackground="@android:color/black"来更改。

    相关文章

      网友评论

        本文标题:BottomNavigationView新控件的介绍以及使用

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