Jetpack：013-Jetpack底部导航栏

news2024/11/17 11:56:15

文章目录

1. 概念介绍
2. 使用方法
- 2.1 NavigationBar
- 2.2 NavigationBarItem
3. 示例代码
- 3.1 代码和注释
- 3.2 代码难点
- 3.3 运行效果
4. 内容总结

我们在上一章回中介绍了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) }
            )
        }
    }
}

3.2 代码难点

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

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