Jetpack Compose 学习笔记（一）—— 快速上手

本篇主要是对 Jetpack Compose 有一个宏观上的了解。

1、Jetpack Compose 是什么与优势

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

Compose 的优势（为何采用 Compose）：

• 更少的代码：使用更少的代码实现更多的功能，并且可以避免各种 bug，从而使代码简洁且易于维护
• 直观：只需描述界面，Compose 会负责处理剩余的工作。应用状态变化时，界面会自动更新
• 加快应用开发：兼容性现有的所有代码，方便随时采用。借助实时预览和全面的 Android Studio 支持，实现快速迭代
• 功能强大：凭借对 Android 平台 API 的直接访问和对于 Material Design、深色主题、动画等的内置支持，创建精美的应用

2、Jetpack Compose 入门教程

主要内容来自于 Google 官方的 《Jetpack Compose 教程》。

2.1 Composable 函数与预览

Jetpack Compose 围绕可组合函数构建。这些函数可让您以程序化方式定义应用的界面，只需描述应用界面的外观并提供数据依赖项，而不必关注界面的构建过程（初始化元素、将其附加到父项等）。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。

比如定义一个展示文本的可组合函数：

// 注意，可组合函数首字母要大写
@Composable
fun MessageCard(name: String) {
    Text(text = "Hello, $name")
}

假如想要预览 UI 效果，可以在可组合函数上添加 @Preview 注解，但是不能直接在原来的可组合函数上加，而是在一个新的函数中调用这个可组合函数：

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(name = "Android")
}

这样在代码编辑区的右上角切换到 Split 或 Design Tab 上，可以看到实时的 UI 预览。

2.2 布局

在 Compose 中，您可以通过从可组合函数中调用其他可组合函数来构建界面层次结构。

如果想为 MessageCard 内添加多个 Text，需要借助 Column 将两个 Text 垂直纵向排列：

fun MessageCard(message: Message) {
    Column {
        Text(text = message.author)
        Text(text = message.body)
    }
}

data class Message(val author: String, val body: String)

如不使用 Column，两个 Text 将会重叠在一起。

水平方向布局使用 Row，再次更新 MessageCard 为其在两个文字的左侧添加一张图片：

@Composable
fun MessageCard(message: Message) {
    Row {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = "Contact profile picture"
        )
        Column {
            Text(text = message.author)
            Text(text = message.body)
        }
    }
}

为了装饰或配置可组合项，Compose 使用了修饰符。通过修饰符，您可以更改可组合项的大小、布局、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰符链接起来，以创建更丰富的可组合项。

fun MessageCard(message: Message) {
    // 设置四个方向的内边距为 8dp
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = "Contact profile picture",
            // 设置图片大小为 40dp 并进行圆形剪裁
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
        )

        // 图片与右侧 Column 的水平间距 8dp
        Spacer(modifier = Modifier.width(8.dp))
        Column {
            Text(text = message.author)
            // 两个 Text 之间的纵向距离 4dp
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = message.body)
        }
    }
}

效果图：

2.3 Material Design

Compose 旨在支持 Material Design 原则。它的许多界面元素都原生支持 Material Design。Material Design 是围绕 Color（颜色）、Typography（排版）、Shape（形状） 这三大要素构建的。下面逐一添加这些要素。

MaterialTheme 提供已经封装好的主题样式：

• MaterialTheme.colorScheme 封装了颜色值，比如设置图片边框颜色时，使用 MaterialTheme.colorScheme.primary
• MaterialTheme.typography 提供了排版样式，为组件的 style 属性提供排版值，如 MaterialTheme.typography.titleSmall
• MaterialTheme.shapes 提供形状，用于 Surface 可组合项

下面来看如何使用上述属性，还是在 MessageCard 上继续添加：

@Composable
fun MessageCard(message: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                // 为图片添加边框，颜色使用 MaterialTheme.colorScheme.primary
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(
                text = message.author,
                // 颜色
                color = MaterialTheme.colorScheme.secondary,
                // 排版
                style = MaterialTheme.typography.titleSmall
            )

            Spacer(modifier = Modifier.height(4.dp))

            // Surface 指定形状，包含 Text
            Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {
                Text(
                    text = message.body,
                    modifier = Modifier.padding(all = 4.dp),
                    // 排版
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

经过上述属性的添加，再次预览 UI 效果：

2.4 深色主题

您可以启用深色主题（或夜间模式），以避免显示屏过亮（尤其是在夜间），或者只是节省设备电量。由于支持 Material Design，Jetpack Compose 默认能够处理深色主题。使用 Material Design 颜色、文本和背景时，系统会自动适应深色背景。

首先，使用在项目中创建的 Material 主题 JetpackComposeTheme（默认创建的主题名字就是项目名 + Theme） 和 Surface 来封装 MessageCard 函数。 在 @Preview 和 setContent 函数中都需要执行此操作。这样一来，可组合项即可沿用应用主题中定义的样式，从而在整个应用中确保一致性：

	override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
                Surface {
                    MessageCard(message = Message("Android", "Jetpack Compose"))
                }
            }
        }
    }

当系统切换为深色模式时，整个 MessageCard 的布局都会切换为深色：

但假如你不用 Surface 封装 MessageCard 函数，就只有原本就被 Surface 封装的 "Jetpack Compose" 这个 Text 会切换，其余不会：

所以前面才说要被 Surface 封装。

除了在真机上运行查看效果，还可以通过为可组合函数添加多个 @Preview 注解进行预览：

@Preview(name = "Light Mode")
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun PreviewMessageCard() {
    JetpackComposeTheme {
        Surface {
            MessageCard(message = Message("Android", "Jetpack Compose"))
        }
    }
}

预览界面会为每一个 @Preview 注解生成一个预览图：

浅色和深色主题的颜色选项是在由 IDE 生成的 Theme.kt 文件中定义的：

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

2.5 列表与动画

Compose 可以轻松创建列表并添加有趣的动画效果：

• 创建消息列表
• 在展开消息时显示动画效果

消息列表的内容在 Google 教程页面提供了下载链接，内容如下：

/**
 * SampleData for Jetpack Compose Tutorial 
 */
object SampleData {
    // Sample conversation data
    val conversationSample = listOf(
        Message(
            "Lexi",
            "Test...Test...Test..."
        ),
        Message(
            "Lexi",
            """List of Android versions:
            |Android KitKat (API 19)
            |Android Lollipop (API 21)
            |Android Marshmallow (API 23)
            |Android Nougat (API 24)
            |Android Oreo (API 26)
            |Android Pie (API 28)
            |Android 10 (API 29)
            |Android 11 (API 30)
            |Android 12 (API 31)""".trim()
        ),
        Message(
            "Lexi",
            """I think Kotlin is my favorite programming language.
            |It's so much fun!""".trim()
        ),
        Message(
            "Lexi",
            "Searching for alternatives to XML layouts..."
        ),
        Message(
            "Lexi",
            """Hey, take a look at Jetpack Compose, it's great!
            |It's the Android's modern toolkit for building native UI.
            |It simplifies and accelerates UI development on Android.
            |Less code, powerful tools, and intuitive Kotlin APIs :)""".trim()
        ),
        Message(
            "Lexi",
            "It's available from API 21+ :)"
        ),
        Message(
            "Lexi",
            "Writing Kotlin for UI seems so natural, Compose where have you been all my life?"
        ),
        Message(
            "Lexi",
            "Android Studio next version's name is Arctic Fox"
        ),
        Message(
            "Lexi",
            "Android Studio Arctic Fox tooling for Compose is top notch ^_^"
        ),
        Message(
            "Lexi",
            "I didn't know you can now run the emulator directly from Android Studio"
        ),
        Message(
            "Lexi",
            "Compose Previews are great to check quickly how a composable layout looks like"
        ),
        Message(
            "Lexi",
            "Previews are also interactive after enabling the experimental setting"
        ),
        Message(
            "Lexi",
            "Have you tried writing build.gradle with KTS?"
        ),
    )
}

接下来新建一个可组合函数 Conversation，使用 LazyColumn 展示 Message 列表：

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

LazyColumn 与 LazyRow 这些可组合项只会呈现屏幕上显示的元素，因此，对于较长的列表，使用它们会非常高效。

这样 MessageCard 列表就显示在屏幕上了，接下来，我们想实现点击 MessageCard 将消息展开/收起的效果：

@Composable
fun MessageCard(message: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))

        // 持续追踪是否展开
        var isExpanded by remember { mutableStateOf(false) }

        // 每次点击就修改 isExpanded
        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = message.author,
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )

            Spacer(modifier = Modifier.height(4.dp))

            Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {
                Text(
                    text = message.body,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.bodyMedium,
                    // 如果展开，展示全部内容
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            }
        }
    }
}

效果图如下：

上面涉及到的主要知识点就是 Compose 的状态 API remember 和 mutableStateOf。简单说，remember 就是开辟空间来保存变量的，只有 isExpanded 通过 remember 将变量值保存起来，这样在遇到重绘或者页面重建的情况下，重新调用 MessageCard 时，isExpanded 的值才不会丢失。配合 mutableStateOf 来改变 UI 状态，可以实现 UI 跟随状态变化而自动更新。

有关状态 API 的详细内容会在后续详解。

使用 remember 时需要注意，需要添加以下导入内容才能正确使用 Kotlin 的 委托属性语法（by 关键字）。按 Alt+Enter 键或 Option+Enter 键即可添加这些内容 ：

• import androidx.compose.runtime.getValue
• import androidx.compose.runtime.setValue

最后为展开添加动画效果：

@Composable
fun MessageCard(message: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))

        var isExpanded by remember { mutableStateOf(false) }

        // 指定 Surface 的颜色
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface
        )

        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = message.author,
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )

            Spacer(modifier = Modifier.height(4.dp))

            Surface(
                shape = MaterialTheme.shapes.medium,
                shadowElevation = 1.dp,
                // Surface 的颜色会渐变
                color = surfaceColor,
                // animateContentSize 会逐渐变化 Surface 大小（圆角）
                modifier = Modifier.animateContentSize().padding(1.dp)
            ) {
                Text(
                    text = message.body,
                    modifier = Modifier.padding(all = 4.dp),
                    style = MaterialTheme.typography.bodyMedium,
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            }
        }
    }
}

效果图：

3、深入详解 Compose 优化 UI 构建

3.1 Compose 所解决的问题

首先，在编写可维护的软件时，我们的目标是最大程度的减少耦合并增加内聚。因为高耦合意味着一处改，处处改，而高内聚意味着改一处足矣。

其次，尽可能的将相关的代码组织到一起，以便可以轻松的维护，并且方便随着应用规模的增长而扩展代码，这个称为关注点分离。

以 ViewModel 与布局文件为例，二者之间是存在许多耦合的：

即便让业务代码与布局使用不同语言强制它们分离，但是它们之间的联系仍然紧密：

既然使用两种语言也会耦合，那么使用同一种语言会有怎样的好处：

比如，想要在页面展示一个列表，那么需要在布局文件中增加一个 RecyclerView，然后在 Java/Kotlin 代码中增加一个适配器，适配器内又要写考虑条目的布局，又要去搞 XML......这样使得逻辑在业务代码和布局代码中来回穿插。但如果使用相同语言的 Kotlin 进行布局，就像下面这样简单：

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

那么外界使用时无需关心布局具体的细节，只需传入参数 messages 即可实现想要的功能。当然，框架会降低耦合，而不会变成零耦合，因为 UI 上肯定多多少少都会带一点逻辑的。

Composable 函数剖析：

3.2 声明式 UI

使用命令式：

使用声明式：

声明式的含义：

3.3 组合 vs 继承

继承存在限制：

组合的做法：

再来看装饰类型的抽象：

使用 Compose 解决：

在 Java 的设计中，组合由于继承。因此 Compose 使用组合更有利于自定义控件。

3.4 重组

在后续讲状态等多个地方都会介绍到重组，它可以理解为界面的重绘。由于 Composable 函数是可以重启的，因此可以利用这一点实现界面的局部刷新：

使用 Compose，就无需回调函数以及数据订阅等等即可更新在数据发生变化时更新 UI：

总结：