Jetpack：011-Jetpack中标题栏

我们在上一章回中介绍了Jetpack中进度条相关的内容，本章回中主要介绍 标题栏。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的标题栏就是位于屏幕最上方的内容，它通常在屏幕状态的下方，主要用来显示页面的标题，在Android的View体系中也它ActionBar.在Jetpack中叫AppBar，它通过可组合函数TopAppBar实现，本章回中将详细介绍它的使用方法。

2. 使用方法

标准的标题栏包含最左侧的导航图标，中间的标题内容和最右侧的详情菜单。这三个内容可以同时显示，也可以部分显示。Jecpack库提供了可组合函数TopAppBar来实现标题栏，该函数提供了相关的参数来控制标题栏中的这三个内容，下面是相关的参数：

• title参数：主要用来控制标题栏中显示的文本内容；
• navigationIcon参数：主要用来控制最左侧的导航图标；
• actions参数：主要用来控制最右侧的详情菜单；
• colors参数：主要用来控制标题栏中各项内容的颜色；

上面介绍的参数中，前三个参数都是函数类型，通常使用lambda表达式给它们赋值，我们将在后面的小节中通过代码来演示。

2.1 标题与导航

标题与导航实现比较简单，标题通过Text可组合函数就可以实现，导航是一个图标，使用IconButton可组合函数实现，如果图标旁边还有文字，那么可以使用Button可组合函数实现，它可以同时组合Icon和Text两个函数，一个用来控制图标，一个用来控制图标旁边的文本内容。

2.2 详情菜单

这部分内容可以使用IconButton可组合函数实现，点击Button时弹出一个菜单窗口。这些内容实现相对复杂一些，我们在后面章回中将详细介绍。

3. 示例代码

TopAppBar(
    colors = TopAppBarDefaults.smallTopAppBarColors(
        containerColor = Color.Blue,
        navigationIconContentColor =  Color.White,
        titleContentColor = Color.White,
        actionIconContentColor = Color.White,
    ),
    title = {
        //不论是Box还是Row都无法让title居中源代码中使用layout组合函数实现
        Row(
            //加上背景后可以看到它的大小，这也是无法居中对齐的原因
            modifier = Modifier.background(color= CusColor),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
        ){
            Text(text = "Title")
        }
    },
    navigationIcon = {
        Icon(
            imageVector = Icons.Default.ArrowBack,
            contentDescription = null
        )
    },
    actions = {
        IconButton(
            onClick = { }){
            Icon(
                imageVector = Icons.Default.MoreVert,
                contentDescription = null
            )
        }
    }
)

上面的示例代码中演示了标题栏的实现内容，我们在关键地方都添加了注释。下是程序的运行效果图：

此外，这个实现有一个缺点：标题位于导航图标旁边，不能居中显示，如果想让标题居中显示，那么使用CenterAlignedTopAppBar函数代码上面代码中的TopAppBar函数，这两个函数的用法相同，我们不再单独介绍。

4. 内容总结

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

• 标题栏位于屏幕顶部，主要用来显示页面标题；
• 标题栏分三部分内容：导航、标题和详情，可以全部或者部分显示其中的内容；
• 实现标题栏的函数有两个，一个可以让标题居中，另外一个不可以，它们的用法相同；

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