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.MaterialTheme
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable

val LightThemeColors = lightColors(
    primary = Color(0xFF6200EE),
    onPrimary = Color.White,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
)

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = LightThemeColors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

6.3 Jetpack Compose 基本概念

Composable 函数:
- Jetpack Compose 使用 Composable 函数来定义 UI 组件。
- Composable 函数使用 @Composable 注解标记。
```
@Composable
fun Greeting(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:

将状态提升到父组件，以实现组件的复用和状态共享。

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text(text = "Count: $count")
    }
}

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    Counter(count = count, onIncrement = { count++ })
}

6.7 课后作业

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

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

作者简介

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

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