文章目录
- 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中标题栏相关的内容介绍到这里,欢迎大家在评论区交流与讨论!