Compose UI 之 Medium&Large TopAppBar

本文详细介绍了Android Compose中的MediumTopAppBar和LargeTopAppBar,包括它们的特点、使用场景、动画效果和参数设置。MediumTopAppBar提供适中的高度和灵活布局,适合需要显示更多内容的应用;LargeTopAppBar则具有更大的空间,适用于强调标题和丰富内容的场景。两者都支持自定义布局和动画效果,能根据设备自动调整布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Medium&Large TopAppBar

前面文章介绍了 Small 类型的 TopAppBarTopAppBar CenterAlignedTopAppBar 。下来介绍 Medium 和 Large 类型的 TopAppBarMediumTopAppBar 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 运行后显示的样式,标题在其他的图标下面。

MediumTopAppBar

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

@Composable
fun ComponentDemoMain() {
   
   
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
   
   
            MediumTopAppBar
### Jetpack Compose 中的主题形状 (Theme Shapes) Jetpack Compose 提供了一种灵活的方式来定义和应用主题中的形状。通过 `Shapes` API,开发者可以轻松创建各种预设形状并将其应用于组件的设计中。这些形状可以通过 Material Design 的推荐样式来增强用户体验的一致性和美观度。 在 Jetpack Compose 主题中,形状通常被定义在一个名为 `Shapes` 的对象里。这个对象允许指定多个默认形状,比如小型、中型和大型形状[^1]。下面是一个典型的例子: #### 定义 Shapes ```kotlin import androidx.compose.material.Shapes import androidx.compose.ui.unit.dp import androidx.compose.foundation.shape.RoundedCornerShape val AppShapes = Shapes( small = RoundedCornerShape(4.dp), medium = RoundedCornerShape(8.dp), large = RoundedCornerShape(12.dp) ) ``` 上述代码展示了如何定义三种不同大小的圆角矩形形状,并将它们分配给 `small`, `medium`, 和 `large` 属性。这使得在整个应用程序中保持一致的视觉风格变得简单而高效。 #### 应用 Shapes 到 UI 组件 一旦定义好了 `Shapes` 对象,就可以很容易地将其集成到自定义主题或者直接用于各个界面元素上。例如,在构建按钮或其他容器时可以直接引用这些预先设定好的形状属性。 ```kotlin import androidx.compose.material.Surface import androidx.compose.runtime.Composable @Composable fun CustomButton() { Surface(shape = AppShapes.medium, color = Color.Blue) { Text("Press Me", modifier = Modifier.padding(16.dp)) } } ``` 在这个片段中,我们利用了之前定义的 `AppShapes.medium` 来设置表面(Surface)组件的边界形式为具有特定半径的圆形边框。 #### 动态调整 Shapes 除了静态配置外,还可以基于用户的偏好或者其他条件动态更改形状参数。这种灵活性让设计更加适应不同的场景需求。 ```kotlin var isRounded by remember { mutableStateOf(true) } val dynamicShape = if(isRounded){ RoundedCornerShape(16.dp) } else { RectangleShape } Surface(shape = dynamicShape, ... ) {...} ``` 这里展示了一个简单的逻辑切换机制,它可以根据布尔变量的状态决定使用哪种类型的 shape。 综上所述,Jetpack Compose 提供的强大工具集不仅简化了开发流程还增强了可维护性与扩展能力。通过对 shapes 的合理运用可以让我们的 app 更加吸引人且易于管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚妄皆空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值