Android开发实战班 - 现代 UI 开发之 Jetpack Compose 基础

Jetpack Compose 是 Android 官方推出的现代声明式 UI 工具包，旨在简化 Android UI 的开发过程。与传统的基于 XML 的 UI 开发方式不同，Jetpack Compose 使用 Kotlin 编写 UI 组件，代码更简洁、可读性更高，并且更易于维护和测试。本章节将介绍 Jetpack Compose 的基础知识、基本组件、布局、状态管理以及常见 UI 组件的使用，帮助学员快速上手 Jetpack Compose 并应用于实际开发中。

6.1 Jetpack Compose 简介

• Jetpack Compose 的历史与发展：- Jetpack Compose 由 Google 于 2019 年发布，旨在为 Android 开发提供现代化的声明式 UI 框架。- Jetpack Compose 1.0 于 2021 年正式发布，目前已成为 Android UI 开发的推荐方式。
• Jetpack Compose 的优势：- 声明式编程: 使用声明式编程范式，代码更简洁、可读性更高。- Kotlin 原生支持: 完全使用 Kotlin 编写，与 Kotlin 语言特性无缝集成。- 简化 UI 开发: 减少了样板代码，开发者可以更专注于 UI 逻辑。- 实时预览: 支持实时预览功能，开发者可以即时查看 UI 效果。- 强大的社区支持: Jetpack Compose 拥有丰富的文档、教程和社区资源。

6.2 Jetpack Compose 环境搭建

• 添加 Jetpack Compose 依赖：- 在 build.gradle 文件中添加 Jetpack Compose 依赖。android {... buildFeatures { compose true} composeOptions { kotlinCompilerExtensionVersion '1.4.3'}}dependencies { implementation "androidx.compose.ui:ui:1.4.3" implementation "androidx.compose.material:material:1.4.3" implementation "androidx.compose.ui:ui-tooling-preview:1.4.3" implementation "androidx.compose.ui:ui-tooling:1.4.3" implementation "androidx.compose.ui:ui-test-junit4:1.4.3" debugImplementation "androidx.compose.ui:ui-tooling-preview:1.4.3"}
• 启用 Jetpack Compose：- 在 build.gradle 文件中启用 Jetpack Compose 插件。plugins { id 'com.android.application' id 'kotlin-android' id 'kotlin-android-extensions'}
• 配置主题：- Jetpack Compose 使用 Material Design 主题，可以在 Theme.kt 文件中配置主题。import androidx.compose.material.MaterialThemeimport androidx.compose.material.lightColorsimport androidx.compose.runtime.Composableval LightThemeColors =lightColors( primary =Color(0xFF6200EE), onPrimary = Color.White, secondary =Color(0xFF03DAC5), onSecondary = Color.Black,)@ComposablefunMyTheme(content:@Composable()-> Unit){MaterialTheme( colors = LightThemeColors, typography = Typography, shapes = Shapes, content = content )}

6.3 Jetpack Compose 基本概念

• Composable 函数:- Jetpack Compose 使用 Composable 函数来定义 UI 组件。- Composable 函数使用 @Composable 注解标记。@ComposablefunGreeting(name: String){Text(text ="Hello, $name!")}
• Composition:- Composition 是 Composable 函数的执行结果，表示 UI 组件的树状结构。
• State:- State 是 UI 的状态，例如文本输入框的内容、按钮的选中状态等。- Jetpack Compose 使用 State 和 MutableState 来管理状态。

6.4 Jetpack Compose 基本组件

• Text:- 用于显示文本。Text(text ="Hello, Jetpack Compose!")
• Button:- 用于显示按钮。Button(onClick ={/* 处理点击事件 */}){Text(text ="Click Me")}
• Image:- 用于显示图片。Image( painter =painterResource(id = R.drawable.sample_image), contentDescription ="Sample Image")
• TextField:- 用于输入文本。var text by remember {mutableStateOf("")}TextField( value = text, onValueChange ={ text = it }, label ={Text("Enter text")})
• LazyColumn:- 用于显示垂直滚动的列表。LazyColumn {items(100){Text(text ="Item #$it")}}
• LazyRow:- 用于显示水平滚动的列表。LazyRow {items(100){Text(text ="Item #$it")}}

6.5 Jetpack Compose 布局

• Column:- 用于垂直排列子组件。Column {Text(text ="First")Text(text ="Second")Text(text ="Third")}
• Row:- 用于水平排列子组件。Row {Text(text ="First")Text(text ="Second")Text(text ="Third")}
• Box:- 用于堆叠子组件。Box {Text(text ="First")Text(text ="Second", modifier = Modifier.align(Alignment.TopCenter))Text(text ="Third", modifier = Modifier.align(Alignment.BottomEnd))}
• ConstraintLayout:- 用于复杂布局。ConstraintLayout {val(text1, text2)=createRefs()Text( text ="First", modifier = Modifier.constrainAs(text1){ top.linkTo(parent.top) start.linkTo(parent.start)})Text( text ="Second", modifier = Modifier.constrainAs(text2){ top.linkTo(text1.bottom) start.linkTo(parent.start)})}

6.6 Jetpack Compose 状态管理

• State 变量:- 使用 remember 和 mutableStateOf 来创建和管理状态变量。var count by remember {mutableStateOf(0)}Button(onClick ={ count++}){Text(text ="Count: $count")}
• State Hoisting:- 将状态提升到父组件，以实现组件的复用和状态共享。@ComposablefunCounter(count: Int, onIncrement:()-> Unit){Button(onClick = onIncrement){Text(text ="Count: $count")}}@ComposablefunCounterApp(){var count by remember {mutableStateOf(0)}Counter(count = count, onIncrement ={ count++})}

6.7 课后作业

1. 任务一：创建一个简单的计数器应用- 使用 Button 和 Text 组件创建一个简单的计数器应用。- 使用 remember 和 mutableStateOf 来管理计数器的状态。
2. 任务二：创建一个图片浏览应用- 使用 LazyColumn 和 Image 组件创建一个图片浏览应用。- 使用 remember 和 mutableStateOf 来管理图片列表的状态。
3. 任务三：实现一个简单的登录界面- 使用 TextField, Button, Text 组件创建一个简单的登录界面。- 使用 remember 和 mutableStateOf 来管理用户输入和按钮状态。
4. 任务四：实现一个简单的聊天应用- 使用 LazyColumn, TextField, Button, Text 组件创建一个简单的聊天应用。- 使用 remember 和 mutableStateOf 来管理聊天消息列表和输入框的状态。

通过本章节的学习，学员将能够掌握 Jetpack Compose 的基础知识、基本组件、布局和状态管理，并能够使用 Jetpack Compose 开发简单的 Android 应用。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师