Jetpack:011-Jetpack中标题栏

文章目录

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

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,Jetpack,compose,topAppBar,标题栏)