Jetpack：013-Jetpack底部导航栏

我们在上一章回中介绍了Jetpack中弹出菜单相关的内容，本章回中将介绍 底部导航栏。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的底部导航栏就是位于屏幕最下方的内容，它通常包含多个图标，点击图标后可以跳转到不同页面，因此叫作底部导航栏。

Jetpack提供了两个可组合函数来实现底部导航栏，它们是NavigationBar和NavigationBarItem。本章回中将详细它们的使用的方法。

2. 使用方法

2.1 NavigationBar

该可组合函数主要用来当作容器，它可包含导航栏中的内容，主要是NavigationBarItem。它提供了相关的参数来设置导航栏，详细如下：

• containerColor参数:主要用来设置导航栏的背景颜色；
• contentColor参数:主要用来设置导航栏中内容的颜色；
• tonalElevation参数:主要用来设置阴影的效果；

我在实践中发现第二个参数没有效果，第三个参数的效果不是很明显，因此该函数可操控的内容比较少。

2.2 NavigationBarItem

• icon参数:主要用来控制导航栏中的图标；
• label参数:主要用来控制导航栏中的文本；
• selected参数:主要用来控制当前内容是否被选中；
• onClick参数:主要用来响点击事件，和Button中同名参数的用法相同；
• colors参数:主要用来控制Icon和label的颜色，包含选择和未选择时的颜色；

3. 示例代码

3.1 代码和注释

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomBottomNavigationBar() {
    //定义一个状态值在选择bar时使用
    var selectedItem by remember { mutableStateOf(0) }

    val items = listOf<NavigationItem>(
        NavigationItem("Person",Icons.Default.Person),
        NavigationItem("Home",Icons.Default.Home),
        NavigationItem("Setting",Icons.Default.Settings),
    )

    NavigationBar(
        containerColor = Color.Blue,
        contentColor = Color.Green, //这个颜色不起作用
    ) {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                //通过状态值和索引值来判断当前bar是否被选中
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                //设置bar上的图标
                icon = {              
                    Icon(imageVector = item.icon, contentDescription = null )
                },
                //设置bar的各种颜色
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = Color.Cyan,
                    selectedTextColor = Color.Cyan,
                    //这个颜色最好和NavigationBar的containerColor颜色保持一致，不然会在Icon外层显示一个背景颜色
                    indicatorColor = Color.Blue,
                    unselectedIconColor = Color.Yellow,
                    unselectedTextColor = Color.Yellow,
                ),
                //设置bar上的文字
                label = { Text(text = item.text) }
            )
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

3.2 代码难点

上面的示例代码中有一个难点：点击不同的图标时自动切换图标。具体点说就是点击导航栏中的某个图标时被点击图标处于选中状态，其它没有点击的图标处于未选中状态。

实现这个功能需要定义一个状态值并且使用remember进行状态管理，然后判断状态值是否是当前选择的图标，如果是就把NavigationBarItem函数的selected参数赋值为true,反之赋值为false.这样就实现了该功能。我们这么说可能比较抽象，大家可以参考示例代码，代码中有详细的注释。

3.3 运行效果

我们把底部导航栏所有的代码封装成了一个可组合函数，这样方便管理代码。下面是程序的运行效果图。我建议大家自己动手去实践，特别是切换图标的功能。

4. 内容总结

最后，我们对本章回的内容做一个总结：

• 底部导航栏位于屏幕最下方，主要用来通过图标切换不同的页面；
• 底部导航栏通过NavigationBar和NavigationBarItem可组合函数实现；
• 底部导航栏的图标、文字以及它们的颜色都是通过可组合函数的参数来修改；
• 底部导航栏点击图标时切换图标的功能需要通过状态管理和可组合函数的参数一起实现；

看官们，关于Jetpack中底部导航栏相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！