添加依赖
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无论是否溢出，总会显示。 -
withTextwithText值示意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
想去掉默认的字体放大缩小效果只需将两个值设置成一样就可以了
网友评论