Android-BottomNavigationView 记录

BottomNavigationView实现的效果就是常见的app底部导航栏的效果,适用于3到5个tab的情况下,

基本使用

添加View

1
2
3
4
5
6
7
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:menu="@menu/tabs_menu">

</com.google.android.material.bottomnavigation.BottomNavigationView>

在res 下兴建一个menu 目录 创建 一个tabs_menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/home"
android:icon="@drawable/ic_tab_home_normal"
android:title="@string/home" />

<item
android:id="@+id/blog"
android:icon="@drawable/ic_tab_home_normal"
android:title="@string/system" />

<item
android:id="@+id/search"
android:icon="@drawable/ic_tab_home_normal"
android:title="@string/square" />

<item
android:id="@+id/profile"
android:icon="@drawable/ic_tab_home_normal"
android:title="@string/me" />

</menu>

运行效果如下

设置白色背景

添加 background

1
android:background="?android:attr/windowBackground"

运行效果如下

设置背景图 和 文字颜色

在drawable 下 兴建一个 selector_tab_color

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/tab_normal" android:state_checked="true" />
<item android:color="@color/tab_checked" android:state_checked="false" />
</selector>

设置图片和文字颜色

1
2
app:itemIconTint="@drawable/selector_tab_color"
app:itemTextColor="@drawable/selector_tab_color"

运行效果如下

自定义底部选择的图片

在drawable 下创建 select_activity_main_home 设置选中的图片 和为选中的图片

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/ic_tab_home_checked" android:state_checked="false" />
<item android:drawable="@drawable/ic_tab_home_normal" android:state_checked="true" />
</selector>

修改 tabs_menu 下面的 item icon 属性

1
2
3
4
<item
android:id="@+id/home"
android:icon="@drawable/select_tab_home"
android:title="@string/home" />

需要将 原来设置的 app:itemIconTint="@drawable/selector_tab_color" 去去掉。,并且 设置 bottom_navigation.itemIconTintList = null

去除位移方式

方式1 xml

添加

1
app:labelVisibilityMode="labeled"

其他的模式

1
app:labelVisibilityMode="selected"

1
app:labelVisibilityMode="unlabeled"

1
app:labelVisibilityMode="auto"

方式1 代码设置

1
bottom_navigation.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED

其他类型 效果同上

1
2
3
4
LabelVisibilityMode.LABEL_VISIBILITY_AUTO,
LabelVisibilityMode.LABEL_VISIBILITY_SELECTED,
LabelVisibilityMode.LABEL_VISIBILITY_LABELED,
LabelVisibilityMode.LABEL_VISIBILITY_UNLABELED

API 28 如何去除BottomNavigationView 选中切换时的上移动画

在 style 中 添加一个 样式

1
2
3
4
<!--bottom tab size-->
<style name="bottom_tab_size">
<item name="android:textSize">14sp</item>
</style>

将选中和未选中的字体大小设置成相同的

1
2
app:itemTextAppearanceActive="@style/bottom_tab_size"
app:itemTextAppearanceInactive="@style/bottom_tab_size"

点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bottom_navigation.setOnNavigationItemSelectedListener {
when (it.itemId) {
R.id.tab_home -> {
Toast.makeText(this,"home",Toast.LENGTH_SHORT).show()
}
R.id.tab_system -> {
Toast.makeText(this,"system",Toast.LENGTH_SHORT).show()
}
R.id.tab_square -> {
Toast.makeText(this,"square",Toast.LENGTH_SHORT).show()
}
R.id.tab_me -> {
Toast.makeText(this,"me",Toast.LENGTH_SHORT).show()
}
}
true
}