Android BottomNavigationView的使用

2020-10-26 本文已影响0人 lq_ios

添加依赖

BottomNavigationView很早之前就在 Material Design 中提出了，
要想在项目中使用BottomNavigationView，首先我们应该在Moudule的build.gradle文件中引入material.material库。
我们可以在Google‘s Maven Repository找到最新的android.material仓库地址
我下面使用的是1.2.1的版本

implementation 'com.google.android.material:material:1.2.1'

BottomNavigationView的特有属性介绍

app:itemBackground:指定底部导航栏的背景颜色，默认是当前主题的背景色，白色or黑色；
app:itemIconTint:指定底部导航栏元素图标的着色方式，默认元素选中时icon颜色为@color/colorPrimary 为ColorStateList；
app:itemTextColor:指定底部导航栏元素文字的着色方式为ColorStateList；
app:menu:使用Menu的形式为底部导航栏指定元素；
<menu> 中<item>的常见属性如下：
- android:id：菜单项(MenuItem)的唯一标识
- android:icon：菜单项的图标（可选）
- android:title：菜单项的标题（必选）
- app:showAsAction：指定菜单项的显示方式。常用的有ifRoom、never、always、withText,collapseActionView,多个属性值之间可以使用|隔开。
  - ifRoom 会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定
  - never 永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
  - always 无论是否溢出，总会显示。
  - withText withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全。
  - collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。
app:labelVisibilityMode控制item显示图标和标题;

labeled : 保持所有文字便签显示
unlabeled ：只显示图标
selected ：在选中的时候显示文字标签，有动画效果
auto : 在 1-3 个按钮时使用 labeled ，大于 3 个按钮使用 selected

item的title显示颜色的设置

<com.google.android.material.bottomnavigation.BottomNavigationView
  android:id="@+id/bottomNavView"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintHorizontal_bias="0.0"
  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
  android:background="@color/white"
  app:itemIconTint="@drawable/tabbar_textcolor"
  app:itemTextColor="@drawable/tabbar_textcolor"
  app:menu="@menu/bottom_nav_menu"
  app:labelVisibilityMode="labeled"
  />

tabbar_textcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fe9833" android:state_checked="true"/>
    <item android:color="#a6a6a6" />
</selector>

当item的图标的选中(android:state_checked="true")和未选中android:state_checked="true")是不同的图片时

tabbar_item.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/notification_select" android:state_checked="true"/>
    <item android:drawable="@drawable/notification_normal" />
</selector>

bottom_nav_menu.xml

<?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/index"
        android:icon="@drawable/tabbar_item"
        android:title="主页" />

    <item
        android:id="@+id/serach"
        android:icon="@drawable/tabbar_item"
        android:title="搜索" />

    <item
        android:id="@+id/center"
        android:icon="@null"
        android:title="" />

    <item
        android:id="@+id/news"
        android:icon="@drawable/tabbar_item"
        android:title="新闻" />

    <item android:id="@+id/mine"
        android:icon="@drawable/tabbar_item"
        android:title="个人中心"
        />
</menu>

最后在所在的Activity中设置iconTint为null即可，代码如下：
Kotlin

    //android:id="@+id/bottomNavView"
   bottomNavView.itemIconTintList = null

Java

   BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavView);
   bottomNavigationView.setItemIconTintList(null);

调整底部导航栏图片和字之间的间距

在dimens.xml中添加如下代码（设置的值越大，图片距离底部越近，距离顶部越远，有点类似于marginTop）

<dimen name="design_bottom_navigation_margin">6dp</dimen>

调整底部导航的高度

<dimen name="design_bottom_navigation_height">100dp</dimen>

截屏2020-10-26 下午2.37.16.png

注意和直接设置BottomNavigationView 的android:layout_height="100dp"是不一样的

截屏2020-10-26 下午2.37.22.png

调整item中title字体的大小

    //未选中状态的字体大小
    <dimen name="design_bottom_navigation_text_size">10sp</dimen>
    //选中状态的字体的大小
    <dimen name="design_bottom_navigation_active_text_size">20sp</dimen>

截屏2020-10-26 下午2.42.25.png

想去掉默认的字体放大缩小效果只需将两个值设置成一样就可以了

Demo地址