Compose UI 之 Medium&Large TopAppBar

Medium&Large TopAppBar

前面文章介绍了 Small 类型的 TopAppBar ：TopAppBar CenterAlignedTopAppBar 。下来介绍 Medium 和 Large 类型的 TopAppBar ：MediumTopAppBar LargeTopAppBar 。

MediumTopAppBar

上面介绍了Small 类型的 TopAppBar (TopAppBar CenterAlignedTopAppBar)，这里再介绍一个 MediumTopAppBar。

MediumTopAppBar的特点

• 适中的高度 ：MediumTopAppBar 相较于传统的 TopAppBar 拥有适中的高度，这既保证了足够的空间来展示应用标题、图标和其他关键信息，又避免了因过高而占用过多屏幕空间的问题。

• 灵活的布局 ：MediumTopAppBar 支持自定义布局，开发者可以根据需求添加导航图标、标题、操作项等元素，并调整它们的位置和样式。

• 响应式设计 ：MediumTopAppBar 能够根据设备的屏幕尺寸和方向自动调整其布局和大小，确保在不同设备上都能呈现出良好的视觉效果。

使用场景分析

MediumTopAppBar 适用于那些需要展示更多信息或进行复杂操作的应用场景。例如，在新闻阅读应用中，可以使用 MediumTopAppBar 来展示新闻标题、搜索栏和分类按钮，以便用户能够更方便地浏览和筛选内容。

动画效果

MediumTopAppBar 支持多种动画效果，这些效果可以极大地提升用户体验。例如，当用户滚动页面时，MediumTopAppBar 可以逐渐隐藏或显示，这种滚动动画效果可以使得界面更加流畅和自然。此外，MediumTopAppBar 还可以与页面的其他元素进行联动，实现更复杂的动画效果。

MediumTopAppBar 声明及参数

MediumTopAppBar 的声明如下。

@Composable
fun MediumTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
): Unit

对于 MediumTopAppBar 的参数说明如下表。

参数名	类型	描述
title	@Composable () -> Unit	是应用栏的标题部分，通常显示页面相关的标题。它是一个标注 @Composable 的 lambda 表达式，你可以在其中放置任何你想要作为标题显示的 UI 元素，通常是一个 Text 组件。
modifier	Modifier	用于更改或增强 TopAppBar 的行为。例如，你可以使用 Modifier.height() 来设置应用栏的高度。
navigationIcon	@Composable () -> Unit	是一个可选的导航图标，通常用于显示一个返回按钮或菜单图标。和 title 一样，这也是一个标注 @Composable 的 lambda 表达式。
actions	@Composable RowScope.() -> Unit	用于在应用栏的右侧放置操作按钮或图标。开发者可以在这里添加多个按钮，它们将水平排列（因为 RowScope 表示一个水平行布局的范围）。
windowInsets	WindowInsets	定义了应用栏如何处理窗口插入，如状态栏、导航栏等。
colors	TopAppBarColors	用于定义应用栏的颜色方案。TopAppBarColors 是一个包含多个颜色属性的对象，如背景色、标题色等。TopAppBarDefaults.mediumTopAppBarColors() 提供了默认的颜色设置。
scrollBehavior	TopAppBarScrollBehavior?	当页面内容可以滚动时，scrollBehavior 定义了应用栏如何响应滚动事件。例如，应用栏可以在页面向下滚动时隐藏，并在页面向上滚动时重新显示。

MediumTopAppBar 的样式及使用示例

MediumTopAppBar 运行后显示的样式，标题在其他的图标下面。

示例及运行动态效果如下。

@Composable
fun ComponentDemoMain() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                title = {
                    Text(
                        "MediumTopAppBar 标题",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },

                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = ""
                        )
                    }
                },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(
                            imageVector = Icons.Filled.Edit,
                            contentDescription = ""
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
        content = { innerPadding ->
            LazyColumn(
                modifier = Modifier.background(color = Color.LightGray),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = "列表 item ${list[it]}",
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(color = Color.White)
                            .padding(horizontal = 16.dp, vertical = 10.dp),
                        fontSize = 18.sp
                    )
                }
            }
        }
    )
}

从运行的图上可以看出，MediumTopAppBar 与主界面内 LazyColumn 有个联动的效果。这与 TopAppBar CenterAlignedTopAppBar 有明显区别。

MediumTopAppBar 与 TopAppBar CenterAlignedTopAppBar 的区别

1. 高度与外观
   • TopAppBar 通常具有标准的高度，适合简洁快速的UI交互。
   • CenterAlignedTopAppBar 的特点是标题居中，适合需要突出标题的场景。
   • MediumTopAppBar 则在高度上介于两者之间，提供了更多的空间来展示内容，同时保持了优雅的外观。
2. 使用场景
   • TopAppBar 适用于大部分常规应用，特别是那些不需要额外空间来展示额外信息的场景。
   • CenterAlignedTopAppBar 更适合在标题内容重要且需要强调的场景中使用。
   • MediumTopAppBar 则适用于需要更多空间来放置图标、文本或其他操作项的场景，特别是那些强调内容展示和交互的应用。
3. 动画效果
   • 所有这三种 TopAppBar 变体都支持动画效果，但具体实现和效果可能会因组件的特性和使用场景的不同而有所差异。

LargeTopAppBar

LargeTopAppBar 是 Android Compose 库中的一个重要组件，它主要用于在应用的顶部展示一个较大的应用栏（App Bar）。它通常包含应用的标题、导航图标以及其他可能的操作项，如搜索、设置等。

LargeTopAppBar 的 UI 设计特点：

1. 尺寸较大：与普通的 TopAppBar 相比，LargeTopAppBar 在高度上更加突出，能够容纳更多的内容和更复杂的布局。这使得它在展示信息丰富的标题、副标题或图标时更加得心应手。
2. 灵活性高：LargeTopAppBar 支持多种自定义选项，如设置标题的字体、颜色、对齐方式等，还可以添加自定义的操作项。这种灵活性使得开发者能够根据应用的整体风格和页面需求来定制独特的顶部应用栏。
3. 适配性强：LargeTopAppBar 能够很好地适应不同的屏幕尺寸和布局需求。无论是在手机、平板还是折叠屏幕上，它都能提供一致的用户体验。
4. 交互友好：LargeTopAppBar 的设计考虑了用户的交互习惯，提供了直观的导航和操作方式。例如，用户可以通过点击导航图标返回上一页面，或者通过点击操作项来执行特定的功能。

LargeTopAppBar 在功能上：

1. 显示标题和副标题：LargeTopAppBar 可以显示应用的标题和副标题，帮助用户快速了解当前页面的主要内容。
2. 导航图标：组件内置了导航图标的功能，通常用于实现返回上一页面或回到主页面的操作。
3. 操作项支持：LargeTopAppBar 允许添加多个操作项，如搜索按钮、设置按钮等。这些操作项可以根据实际需求进行定制和布局。
4. 滚动行为定制：当页面内容滚动时，LargeTopAppBar 可以表现出不同的行为。例如，它可以随着内容的滚动而逐渐隐藏或显示，从而提供更多的阅读空间。
5. 主题和样式定制：开发者可以通过 Compose 的主题和样式系统来定制 LargeTopAppBar 的外观，以确保它与应用的其他部分保持视觉上的一致性。

LargeTopAppBar 可以放置标题、导航图标和动作如下图。

下面从 LargeTopAppBar 声明，示例及运行效果查看它的表现。

@Composable
fun LargeTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.largeTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
): Unit

参数表

参数名	类型	描述
title	@Composable () -> Unit	用于指定应用栏的标题内容。它接收一个 Composable 函数，这意味着你可以在其中定义任意的 Compose UI 元素作为标题。这个函数不返回任何值（返回类型是 Unit），它的作用仅仅是描述 UI。
modifier	Modifier	参数用于应用各种修改器到 LargeTopAppBar 上。这些修改器可以改变组件的布局、外观、行为等。默认情况下，这个参数是 Modifier，即没有应用任何修改器。
navigationIcon	@Composable () -> Unit	用于设置应用栏的导航图标。它也接收一个返回类型为 Unit 的 Composable 函数，允许你自定义导航图标的外观。默认情况下，这个参数是空的，即没有导航图标。
actions	@Composable RowScope.() -> Unit	参数允许你在应用栏中添加一组动作，通常是一些按钮或图标。这个参数接收一个在 RowScope 中定义的 Composable 函数，这意味着你可以在这个函数中使用 Row 相关的 API。默认情况下，这个参数是空的，即没有添加任何动作。
windowInsets	WindowInsets	参数用于指定窗口内边距信息，比如状态栏的高度等。这些信息可以帮助 LargeTopAppBar 正确地适应屏幕的边缘。默认情况下，这个参数使用 TopAppBarDefaults.windowInsets，这是系统定义的默认值。
colors	TopAppBarColors	参数用于设置应用栏的颜色。它接收一个 TopAppBarColors 对象，其中包含各种颜色的定义。默认情况下，这个参数使用 TopAppBarDefaults.largeTopAppBarColors()，即 Material Design 规范中的默认颜色设置。
scrollBehavior	TopAppBarScrollBehavior?	参数用于指定当内容滚动时应用栏的行为。例如，它可以控制应用栏是否随着内容滚动而隐藏或显示。这个参数的类型是 TopAppBarScrollBehavior?，它是一个可选参数，默认情况下是 null，表示没有指定滚动行为。

示例代码：

@Composable
fun LargeTopAppBarSample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                title = {
                    Text(
                        text = "LargeTopAppBar 标题",
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis,
                    )
                },

                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(
                            imageVector = Icons.Filled.Home,
                            contentDescription = ""
                        )
                    }
                },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(
                            imageVector = Icons.Filled.Settings,
                            contentDescription = ""
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
        content = { innerPadding ->
            LazyColumn(
                modifier = Modifier.background(color = Color.LightGray),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = "列表 item ${list[it]}",
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(color = Color.White)
                            .padding(horizontal = 16.dp, vertical = 10.dp),
                        fontSize = 18.sp
                    )
                }
            }

        }
    )
}

运行上述示例代码后的效果如下图，开始的 title 显示在 TopAppBar 的其他图标下方，当随着内容滚动后，标题逐步显示到与图标同一行。

如果标题内容很长，超过一行所能显示的内容宽度时，可以通过设置 title 参数内的组件参数，显示不同的两行效果。

将标题内容设置为 "LargeTopAppBar 是一个在 Jetpack Compose 中定义的 Composable 函数，用于创建一个尺寸较大的顶部应用栏，适用于 Material Design 风格的 Android 应用。"，这个内容超出一行可显示的范围。不同的 title 组件设置参数会产生不同的效果。

1. 设置标题行数及超出部分的显示样式。

   Text(
       text = "LargeTopAppBar 是一个在 Jetpack Compose 中定义的 Composable 函数，用于创建一个尺寸较大的顶部应用栏，适用于 Material Design 风格的 Android 应用。",
       maxLines = 2,
       overflow = TextOverflow.Ellipsis,
   )

   在 title 组件改为上述组件后运行，显示效果如下图。 可见 LargeTopAppBar 显示标题内容的行数正常显示的是 2 行。

   

2. 不设置参数，将普通的 title 组件设置显示。

   Text(
       text = "LargeTopAppBar 是一个在 Jetpack Compose 中定义的 Composable 函数，用于创建一个尺寸较大的顶部应用栏，适用于 Material Design 风格的 Android 应用。",
   )

   上述 title 设置后的运行结果，及滚动页面内容后的结果如下图。
   

---

上述两个图中可以看出，当 title 内容超出 2 行可显示的最多内容时，组件的内容会超出到屏幕之外，当内容向上滑动后，从右图中可以看出，显示的内容刚好是左图内容的前面 2 行。因此 LargeTopAppBar 的 title 最多显示 2 行内容，且当内容显示超出 2 行可以显示的最多内容时，title 表示组件内容会扩展到屏幕外。

MediumTopAppBar 和 LargeTopAppBar 的区别

功能特点：

1. MediumTopAppBar

   • 提供了一个中等高度的应用栏设计

   • 适中的高度，使其既不会过于显眼也不会过于拥挤。

   • 适用于大多数标准应用场景，提供基本的导航和动作功能。

2. LargeTopAppBar

   • 提供一个较大的应用栏设计，允许更多的内容和元素放置其中。

   • 提供更大的空间，可以容纳更多的内容和交互元素。

   • 适用于需要强调品牌、搜索或其他核心功能的应用场景。

   • 可能包含更复杂的交互和动画效果。

性能表现：

从性能的角度看，MediumTopAppBar 和 LargeTopAppBar 两者之间的主要差异在于渲染复杂性和布局计算。由于 LargeTopAppBar 可能包含更多的元素和更复杂的布局，因此它可能需要更多的处理时间来测量、布局和绘制。然而现代的硬件发展很快，两者之间的这种差别几乎可以忽略不计。