文章目录
- 1. 概念介绍
- 2. 使用方法
- 2.1 标题与导航
- 2.2 详情菜单
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了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中标题栏相关的内容介绍到这里，欢迎大家在评论区交流与讨论！
