Compose UI 之 Small TopAppBar

Small 类型 TopAppBar

AppBar 主要由2类，顶部 AppBar 和底部 AppBar。

• 顶部 AppBar：主要包含了标题，action菜单，导航菜单。
• 底部 AppBar：典型地包含主要导航项。

顶部 AppBar

顶部 AppBar 包含了 4 中类型： TopAppBar CenterAlignedTopAppBar MediumTopAppBar LargeTopAppBar

下面会逐个介绍 AppBar 的类型及给出示例。

TopAppBar

TopAppBar 是一个重要的组件，它提供了 Material Design 3 标准的顶部应用栏实现，提供现代化的外观和交互方式。TopAppBar 不仅具有直观且易用的 API，还支持高度定制，使得开发者能够轻松构建符合 Material Design 准则的应用界面。它通常包含应用的标题、导航图标、操作按钮等元素，为用户提供直观且一致的操作体验。

TopAppBar 特点

• 高度可定制：开发者可以通过各种参数来定制 TopAppBar 的外观和行为，包括颜色、标题、导航图标、操作按钮等。
• 响应式布局：TopAppBar 支持不同的屏幕尺寸和方向，能够自动调整布局以适应不同的设备。
• 易集成：TopAppBar 与其他 Compose 组件和布局可以无缝集成，使得 UI 构建更加灵活和高效。

TopAppBar 声明及参数

下面是 TopAppBar 的声明。

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

参数列表

下图是基本的 TopAppBar 效果图及说明。

TopAppBar 示例

下面是一个具体的示例代码及运行结果图。

@Composable
fun MyTopAppBar() {
    TopAppBar(
        // 标题内容
        title = { Text("我的应用") },
        // 导航图标
        navigationIcon = {
            IconButton(onClick = { /* 处理导航图标点击事件 */ }) {
                Icon(Icons.Default.Menu, contentDescription = "导航菜单")
            }
        },
        // 动作图标
        actions = {
            // 添加动作按钮
            IconButton(onClick = { /* 处理动作1点击事件 */ }) {
                Icon(Icons.Default.Favorite, contentDescription = "收藏")
            }
            IconButton(onClick = { /* 处理动作2点击事件 */ }) {
                Icon(Icons.Default.Search, contentDescription = "搜索")
            }
        },
        // 各项颜色配置
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = ButterflyBlue,			// appbar 容器颜色
            actionIconContentColor = Purple40,		// 动作图标内颜色
            titleContentColor = Color.Magenta,		// 标题（参数 title 表示的 composable）颜色
            navigationIconContentColor = OrangeA700		// 导航图标内容颜色
        )
    )
}

CenterAlignedTopAppBar

居中对齐顶部应用栏与 TopAppBar 基本一样，不同之处就在于它的标题默认居中放置。

CenterAlignedTopAppBar 的特点

• 居中对齐的标题：CenterAlignedTopAppBar的最大特点就是将标题文本居中放置在AppBar的中央，与传统的左对齐方式不同。这种设计可以让 AppBar 更加突出标题，特别是在标题较长或需要强调时。
• 适应性强：CenterAlignedTopAppBar能够根据不同的屏幕尺寸和方向自动调整其布局，确保UI在不同设备上的表现都是一致的。
• 可定制性：开发者可以通过修改属性来定制CenterAlignedTopAppBar的外观和行为，例如修改标题文本、背景颜色、导航图标等。

CenterAlignedTopAppBar 声明及参数

CenterAlignedTopAppBar 的声明如下。

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

可以发现，除了名称不同，参数的默认给出不同外，声明中的参数个数及参数名与 TopAppBar 一致。两者都属于 Small 类型的 AppBar。

因此此组件的参数说明表不再给出，直接参考 TopAppBar 的参数说明表格即可。

CenterAlignedTopAppBar 示例

因为 CenterAlignedTopAppBar 的定义包括界面 UI 与 TopAppBar 高度一致，因此下面从影响 AppBar 滚动的角度来给出示例。通过修改 scrollBehavior 的值与运行效果图查看 scrollBehavior 值产生的不同结果。

@Composable
fun CenterAlignedTopAppBarAndScrollBehaviorSample() {
    // 记住滚动状态，另外的 2 个方法：exitUntilCollapsedScrollBehavior()，pinnedScrollBehavior() 。
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                modifier=Modifier.border(width = 1.dp, color= Color.Gray),
                title = { Text("AppBar 滚动行为 enterAlwaysScroll") },
                scrollBehavior = scrollBehavior,
            )
        },
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    ) { innerPadding ->
        // 实际的滚动内容
        LazyColumn(
            contentPadding = innerPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(100) { index ->
                ListItem(
                    headlineContent = { Text("Item $index") },
                    leadingContent = {
                        Icon(
                            imageVector = Icons.Default.Settings,
                            contentDescription = "Localized description"
                        )
                    }
                )
                HorizontalDivider(thickness = 3.dp, color = Color.Red)
            }
        }
    }
}

从上述 3 个运行结果图，总结出 scrollBehavior 的值导致运行后 AppBar 在内容滚动时的不同表现。

• enterAlwaysScrollBehavior()：当页面内容向下滚动时，TopAppBar 会随着滚动而逐渐出现或保持在屏幕顶部。当页面内容向上滚动时，TopAppBar 会逐渐滑出屏幕，但一旦开始向下滚动，它就会立即开始重新出现。
• exitUntilCollapsedScrollBehavior()：当页面内容向下滚动时，TopAppBar 会保持在屏幕顶部，直到一个特定的偏移量（通常是与 TopAppBar 高度相等的折叠距离）被达到，之后它会随着内容继续向下滚动而逐渐滑出屏幕。当内容向上滚动时，TopAppBar 会保持隐藏，直到内容滚动回到那个特定的偏移量，然后它会随着内容的滚动而逐渐滑入屏幕。
• pinnedScrollBehavior()：无论页面内容如何滚动，TopAppBar 都会固定在屏幕顶部，不会随着滚动而移动。

CenterAlignedTopAppBar与TopAppBar的对比

CenterAlignedTopAppBar和TopAppBar都是Jetpack Compose中用于创建顶部应用栏的组件，但它们有一些异同点：

1. 标题对齐方式：TopAppBar的标题默认是左对齐的，而CenterAlignedTopAppBar则是将标题居中对齐。这是两者之间最显著的区别。
2. 功能与使用：除了标题对齐方式不同外，两者在其他功能和使用上基本相似。它们都可以设置导航图标、操作项、背景颜色等，并且可以与其他Compose组件协同工作。
3. 适用场景：TopAppBar适用于大多数情况，特别是当标题较短或不需要特别强调时。而CenterAlignedTopAppBar则更适合在标题较长或需要突出标题时使用。

TopAppBar 是 Jetpack Compose Material3 库中一个重要的组件，它提供了实现 Material Design 3 顶部应用栏的便捷方式。通过合理使用 TopAppBar，开发者可以构建出符合 Material Design 准则、用户体验良好的 Android 应用界面。随着 Jetpack Compose 的不断发展和完善，TopAppBar 将在未来的 Android 应用开发中发挥更加重要的作用。