Jetpack Compose：为 Android 开发者带来的 UI 春天

我们都知道Jetpack Compose是 Google推出的现代 Android UI开发框架，它基于 声明式 UI 编程范式，主要是简化咱们Android实图UI界面开发流程，让我们Android的开发者能够更直观、高效地构建 UI。

声明式 UI 和 传统 View

  • 传统 Android UI 采用的是命令式方式，开发者需要在XML 中定义界面结构，并在* Activity 或 Fragment *里手动操作 View的属性来更新 UI。而 声明式 UI（Declarative UI）模式下，我们只需描述 最终的界面状态，Compose会自动处理界面更新。

  • Jetpack Compose的特点

  1. 纯 Kotlin编写 UI：不再需要 XML，UI与逻辑统一管理，提升开发效率。
  2. 基于组件组合：通过可组合函数 (@Composable) 复用 UI 代码，提高可维护性
  3. 自动 UI 更新：状态变化时，Compose只会重新绘制受影响的组件，避免不必要的计算，提高性能。
  4. 与传统 View兼容：支持与现有 View 系统混合使用，渐进式迁移更简单。
  • 声明式 UI 代表技术： Jetpack Compose（Android）、SwiftUI（iOS）、Flutter（跨平台）。
为什么要选择 Compose？
  • Jetpack Compose具备多方面的优势，使其成为未来 Android UI 开发的首选。
  1. 更少的代码量
    Compose允许我们使用更少的代码完成相同的 UI 任务。例如，传统 XML + ViewBinding 需要大量模板代码，而 Compose 直接用 Kotlin代码描述 UI 结构，代码更简洁。
  • Button按钮由XML + ViewBinding组合实现效果：
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click button" />


val button = findViewById<Button>(R.id.button)
button.setOnClickListener { 
    Toast.makeText(context, "Clicked", Toast.LENGTH_SHORT).show()
}
  • 用Compose 实现：
Button(onClick = { 
    Toast.makeText(context, "Clicked", Toast.LENGTH_SHORT).show()
}) {
    Text("Click button")
}

Compose代码更直观，省去了 findViewById以及 ViewBinding的繁琐逻辑。

高性能渲染

  • Compose状态发生变化时，只有受影响的可组合函数会重新执行，避免了不必要的计算和渲染，从而提高了性能。

  • Compose提供了一系列现代化工具：

    1. 实时预览（@Preview）：无需运行 App，直接在 Android Studio 预览 UI。
    2. 动画编辑器：可视化调整 Compose 动画，提升开发体验。
    3. Layout Inspector：检查 UI 组件层级，调试界面更方便。

下面介绍下Compose基础 UI 组件：

1. Text 组件
  • Text组件用于显示文本内容，可以通过fontSize、color、fontWeight等属性进行样式定制。除了基本的样式，你还可以添加 maxLines来控制最大行数，overflow来定义文本溢出的行为。
Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 20.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

Text组件常用于显示标题、段落或任何需要呈现的文本内容。你还可以结合 Modifier来调整文本的对齐方式和位置。

2. Button 组件

Button组件用于触发用户交互事件，可以包裹任何子组件。通常，按钮内会包含一个 Text 或图标，按钮的样式（如背景色、形状等）可以通过 Modifier来定制。

Button(
    onClick = { /* 执行操作 */ },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
    Text("Click Me", color = Color.White)
}
  • 如果需要更复杂的交互，比如禁用按钮或根据条件变更按钮的样式，可以在 onClick事件中添加逻辑。
3. Image 组件

Image组件用于显示图片，可以通过 painterResource加载资源图片，或者使用 rememberImagePainter 来加载网络图片。contentDescription是辅助功能的重要属性，便于屏幕阅读器识别图片内容。

Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "App Icon",
    modifier = Modifier.size(80.dp).clip(CircleShape)
)
  • 我们对 Image进行了裁剪，变成了圆形的图标， modifier可以进一步用于调整图片的大小、形状和布局。
4. Column & Row 组件（布局容器）
  • Column和 Row用于垂直和水平排列组件。你可以通过 horizontalAlignment和 verticalArrangement来控制布局内的对齐方式。
Column(
    verticalArrangement = Arrangement.spacedBy(10.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Row(
    horizontalArrangement = Arrangement.spacedBy(15.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Right")
}
  • 这两个布局容器非常适合用于排版列表项、按钮组等常见布局。
5. Box 组件（类似Framelayout）

Box 组件非常适合用于重叠视图的情况。你可以在 Box中放置多个组件，它们会按层叠的方式排列。

Box(
   modifier = Modifier.size(100.dp).background(Color.Gray)
) {
   Text(
       text = "Overlay Text",
       modifier = Modifier.align(Alignment.Center),
       color = Color.White
   )
}

通过 Modifier.align() 可以精确控制子组件的对齐方式。在图像和文本重叠显示时，Box非常实用。

Modifier使用指南

Modifier 是 Compose 中的一个重要工具，它允许你控制组件的样式、行为和布局。可以用于修改组件的大小、间距、背景、对齐方式等。

1. 基本用法
  • Modifier可用于调整 UI 组件的外观和行为。例如，你可以通过 padding、fillMaxSize 等方法来改变布局。
Text(
    "Hello, Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
)

上面的代码会给 Text 组件添加一个 16dp 的内边距，背景色为浅灰色，宽度充满父容器。

2. 高级用法

Modifier还可以用于处理更复杂的布局需求，比如响应点击事件、拖动*等：

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clickable { /* 响应点击事件 */ }
)
  • 在这里我们为 Box添加了点击事件，点击时会触发某个操作。

Compose基础 UI 组件详解

1. Text组件（文本）
  • Text 组件用于显示文本内容，可以通过 fontSize、color、fontWeight 等属性进行样式定制。你还可以使用 maxLines 来控制最大行数，overflow 来定义文本溢出的行为。
Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 20.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)
  • fontSize：设置字体大小。
    color：设置文本颜色。
    fontWeight：设置文本粗细。
    maxLines：限制文本最大显示行数。
    overflow：控制文本超出部分的显示方式，如 TextOverflow.Ellipsis表示溢出部分显示省略号。
2. Button 组件（按钮）
  • Button组件用于触发用户交互事件。你可以通过 onClick设置按钮的点击事件，并通过 Modifier调整按钮的样式（如背景色、形状等）。
Button(
    onClick = { /* 执行操作 */ },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
    Text("Click Me", color = Color.White)
}
  • onClick：按钮点击时触发的事件。
    shape：设置按钮的形状，这里使用了圆角形状。
    colors：设置按钮的背景色和其他颜色属性。
    Text：按钮内的文本。
3. Image 组件（图片）
  • Image组件用于显示图片，可以通过 painterResource加载资源图片，或者使用 rememberImagePainter来加载网络图片。contentDescription便于辅助功能的使用。
Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "App Icon",
    modifier = Modifier.size(80.dp).clip(CircleShape)
)
  • painter：加载图片的来源。
    contentDescription：辅助功能描述，帮助屏幕阅读器识别图片。
    modifier：用于控制图片的大小、形状等样式。
4. Column & Row 组件（布局容器）

Column和 Row是常用的布局容器。Column用于垂直排列，Row用于水平排列。你可以通过 horizontalAlignment 和 verticalArrangement 来控制组件对齐方式。

Column(
    verticalArrangement = Arrangement.spacedBy(10.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Row(
    horizontalArrangement = Arrangement.spacedBy(15.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Right")
}
  • verticalArrangement：设置竖直方向的排列方式。
    horizontalArrangement：设置水平方向的排列方式。
    verticalAlignment 和 horizontalAlignment：控制子组件的对齐方式。
5. Box 组件（层叠布局）

Box组件用于重叠视图，通常用于显示叠加元素。通过 Modifier.align() 可以精确控制子组件的位置。

Box(
    modifier = Modifier.size(100.dp).background(Color.Gray)
) {
    Text(
        text = "Overlay Text",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

modifier：设置 Box 组件的样式，例如大小、背景色。
align：设置子组件的对齐方式，在此示例中为居中对齐。

Modifier使用指南

Modifier是 Compose中非常核心的概念，它允许你对 UI 组件进行样式、布局、行为等方面的修改。通过 Modifier，你可以调整组件的大小、间距、背景、对齐、状态等特性。

1.基本用法
  • Modifier最常见的用法是设置组件的外观和布局属性。常用的属性包括 padding、background、fillMaxSize、size 等。
Text(
    "Hello, Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
)
  • padding：为组件设置内边距。你可以指定四个方向的内边距，或者统一设置。
    background：设置组件的背景色，可以使用 Color 或者 Brush 来定义渐变色背景。
    fillMaxWidth：让组件的宽度充满父容器。类似的属性还有 fillMaxHeight、fillMaxSize 等。
2. 布局相关

  • Modifier可以与布局容器（如 Column、Row、Box 等）结合使用，以控制组件的对齐和排列方式。

  • fillMaxWidth和 fillMaxHeight：使组件填充父容器的宽度或高度。
    wrapContentSize：使组件的大小包裹其内容。
    align：通过 Modifier.align() 可以控制组件在父容器中的对齐方式。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Gray)
) {
    Text(
        text = "Center",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}
  • align：用于设置子组件在 Box 内的对齐方式，这里是居中对齐。
3. 状态与交互
  • Modifier还可以用来处理交互事件，例如响应点击、拖动、滑动等。
    clickable：使组件变得可点击，并触发点击事件。
    indication：用于显示点击、焦点等状态的视觉效果。
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clickable { /* 添加点击事件 */ }
)
  • clickable：将组件变为可点击，点击时触发相应事件。你可以传递 onClick Lambda 作为点击事件的响应。
    indication：与点击效果结合，提供可视化反馈，例如点击时的阴影效果。
4. 变换与动画
  • Modifier还支持常见的变换操作，如旋转、缩放、平移等，常用于动画和动态效果。
  1. graphicsLayer：控制旋转、缩放、透明度等变换。
  2. rotate：旋转组件。
  3. scale：缩放组件。
  4. offset：偏移组件的位置。
 Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .graphicsLayer(rotationZ = 45f) // 旋转组件
)
  • graphicsLayer：用于对组件应用变换，如旋转、缩放、透明度等。
    rotationZ：旋转角度。
    scaleX、scaleY：设置水平和垂直缩放比例。
5. 圆形、圆角和裁剪
  • Modifier允许你轻松将组件裁剪成圆形或圆角矩形，这对于实现现代 UI 效果非常有用。
  1. clip：裁剪组件的形状，例如圆形、圆角矩形等。
  2. RoundedCornerShape：用于定义圆角的大小。
  3. CircleShape：将组件裁剪为圆形。
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Green)
        .clip(CircleShape) // 裁剪为圆形
        .border(2.dp, Color.Black) // 添加边框
)

clip(CircleShape)：将组件裁剪为圆形。
clip(RoundedCornerShape(16.dp)) ：将组件裁剪为圆角矩形，圆角半径为 16.dp。
border：为组件添加边框，可以与 clip 配合使用，确保圆角或圆形边框效果。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clip(RoundedCornerShape(16.dp)) // 圆角裁剪
        .border(2.dp, Color.Black) // 添加边框
)
6. 阴影效果
  • Modifier也可以为组件添加阴影效果，这通常与 clip 和 background 配合使用，以增加层次感和视觉效果。

shadow：为组件添加阴影，可以设置阴影的半径、颜色等。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Yellow)
        .clip(RoundedCornerShape(16.dp)) // 圆角裁剪
        .shadow(8.dp, RoundedCornerShape(16.dp)) // 添加阴影
)

shadow：设置阴影的半径，通常与 clip 配合使用来确保阴影与组件的形状一致。

7. 使用 LazyColumn 构建高效列表
  • LazyColumn用于高效渲染大列表，按需加载数据，避免一次性创建所有子项，提高性能。
val items = listOf("Item1", "Item2", "Item3", "Item4")
LazyColumn {
    items(items.size) { index ->
        Text(items[index], modifier = Modifier.padding(16.dp))
    }
}
  • 相比 RecyclerView，LazyColumn省去了 Adapter 和 ViewHolder逻辑，代码更简洁。 它通过懒加载的方式仅渲染当前屏幕内可见的列表项，从而提升性能

Jetpack Compose 作为 Android UI未来的发展方向，简化了 UI 开发流程，也提供了更强的性能优化和更现代化的工具支持，后面我们将深入学习 Compose的状态管理，理解 remember、mutableStateOf以及 ViewModel结合方式，敬请期待

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。