Jetpack Compose 开发基础

教程取自于Google官方课程之Android 之 Compose 开发基础
教程取自于Google官方课程之Jetpack Compose 教程

Android 之 Compose 开发基础

在本课程中，您将学习使用 Jetpack Compose 构建 Android 应用的基础知识。Jetpack Compose 是用于构建 Android 应用的全新界面工具包。在这个过程中，您将开发一些应用，为成为一名 Android 开发者奠定基础。

Jetpack Compose

---

第 1 单元：您的首个 Android 应用

学习编程基础知识并构建您的首个 Android 应用。

1. 准备工作

在此 Codelab 中，我们将使用 Android Studio 提供的项目模板创建您的首个 Android 应用。您可以使用 Kotlin 和 Jetpack Compose 自定义您的应用。请注意，Android Studio 会进行更新，有时候界面还会发生变化，因此，如果您的 Android Studio 看起来与本 Codelab 中显示的屏幕截图略有不同，也没关系。

前提条件

• 具备 Kotlin 基础知识

所需条件

• 最新版本的 Android Studio

学习内容

• 如何使用 Android Studio 创建 Android 应用
• 如何在 Android Studio 中使用预览工具运行应用
• 如何使用 Kotlin 更新文本
• 如何使用 Jetpack Compose 更新 UI
• 如何在 Jetpack Compose 中使用预览功能预览应用

您将构建的内容

• 一个可让您自定义自我介绍的应用！

当您完成本 Codelab 后，所构建的应用将如下所示（只不过它是使用您的名字自定义的！）：

应用预览

所需条件

• 一台安装了 Android Studio 的计算机。

2. 使用模板创建项目

在本 Codelab 中，我们将使用 Android Studio 提供的 Empty Compose Activity 项目模板创建一个 Android 应用。

如需在 Android Studio 中创建项目，请执行以下操作：

1. 双击 Android Studio 图标来启动 Android Studio。

Android Studio 图标

2. 在 Welcome to Android Studio 对话框中，点击 New Project。

New Project

New Project 窗口随即会打开，其中列出了 Android Studio 提供的模板。

模板

在 Android Studio 中，项目模板就是用于为特定类型的应用提供蓝图的 Android 项目。模板可用来创建项目结构以及在 Android Studio 中构建项目所需的文件。系统会根据您选择的模板提供对应的起始代码，以便您能更快上手。

3. 务必选择 Phone and Tablet 标签页。
4. 点击 Empty Compose Activity 模板，选择该模板作为您的项目模板。“Empty Compose Activity”模板是用于创建简单项目的模板，您可以用它来构建 Compose 应用。这个模板只有一个屏幕，并显示 "Hello Android!" 文本。
5. 点击 Next。New Project 对话框随即会打开，其中包含一些用于配置项目的字段。
6. 按如下方式配置项目：

Name 字段用于输入项目名称。在本 Codelab 中，请输入“Greeting Card”。

保持 Package name 字段不变。该字段用于指定文件在文件结构中的组织方式。在本例中，软件包名称将会指定为 com.example.greetingcard。

保持 Save location 字段不变。该字段用于指定保存与项目相关的所有文件的位置。请记下这些文件在您计算机上的保存位置，以便查找文件。

在 Language 字段中，系统已选择 Kotlin。“Language”字段用于指定您在构建项目时所采用的编程语言。由于 Compose 仅与 Kotlin 兼容，因此您无法更改此字段。

从 Minimum SDK 字段提供的菜单中选择 API 21: Android 5.0 (Lollipop)。Minimum SDK 字段用于指定可运行您应用的最低 Android 版本。

Use legacy android.support libraries 复选框目前已处于取消选中状态。

最低 Android 版本

7. 点击 Finish。此过程可能需要一些时间，这个时候很适合来杯茶哦！在 Android Studio 设置过程中，界面中会显示进度条和消息来指示 Android Studio 是否仍在设置您的项目，具体可能如下所示：

进度条

在创建项目设置时，系统会显示类似如下内容的通知消息。

Gradle 同步消息

8. 您可能会看到 What's New 窗格，其中包含有关 Android Studio 新功能的最新动态。现阶段，请关闭此窗格。

最新动态

9. 点击 Android Studio 右上角的 Split，即可同时查看代码和设计。您也可以点击 Code，仅查看代码；或点击 Design，仅查看设计。

查看类型

按下 Split 后，您应该会看到以下三个区域：

查看区域

• Project 视图 (1) 用于显示项目的文件和文件夹
• Code 视图 (2) 是您修改代码的地方
• Design 视图 (3) 是您预览应用外观的地方

在 Design 视图中，您会看到一个显示以下内容的空白窗格：

Design 窗格

10. 点击 Build & Refresh。构建可能需要花一些时间，不过完成后，预览便会显示一个内容为 Hello Android! 的文本框。“Empty Compose Activity”模板会提供创建此应用所需的全部代码。

默认预览

3. 查找项目文件

在此部分中，我们将通过进一步熟悉文件结构，继续对 Android Studio 展开探索。

1. 在 Android Studio 中，进入 Project 标签页。Project 标签页会显示项目的文件和文件夹。您在设置项目时，已将软件包名称指定为 com.example.greetingcard。因此，您可以直接在 Project 标签页中看到该软件包。软件包基本上就是代码所在的文件夹。Android Studio 会将项目整理成一个由软件包组成的目录结构。
2. 如有必要，请从 Project 标签页的下拉菜单中选择 Android。

Android 菜单

这就是您使用的标准文件视图和组织方式，在编写项目代码时会非常有用，因为您可以轻松访问将在应用中使用的各个文件。不过，如果您是通过文件浏览器（如 Finder 或 Windows 资源管理器）浏览文件，则文件层次结构的组织方式会明显不同。

3. 从下拉菜单中选择 Project Source Files。现在，您可以像在任何文件浏览器中一样浏览文件了。

Project Source Files

4. 再次选择 Android，切换回上一个视图。在本课程中，我们将使用 Android 视图。如果您的文件结构看起来很奇怪，请检查您是否还在 Android 视图中。

4. 更新文本

现在，您已了解 Android Studio，是时候开始制作贺卡了！

打开 MainActivity.kt 文件的 Code 视图。请注意，此代码中有一些自动生成的函数，具体而言就是 onCreate() 和 setContent() 函数。

请记住，函数是程序中用于执行特定任务的部分。

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

onCreate() 函数是此应用的入口点，并会调用其他函数来构建 UI。在 Kotlin 程序中，main() 函数是 Kotlin 编译器在代码中开始编译的特定位置；在 Android 应用中，则是由 onCreate() 函数来担任这个角色。

onCreate() 函数中的 setContent() 函数用于通过可组合函数定义布局。任何标有 @Composable 注解的函数都可通过 setContent() 函数或其他可组合函数进行调用。该注解可告知 Kotlin 编译器 Jetpack Compose 使用的这个函数会生成 UI。

请注意：编译器会接受您编写的 Kotlin 代码，并逐行查看，然后将其转换成计算机可以理解的代码。此过程称为代码编译。

onCreate() 函数下的 Greeting() 函数是可组合函数。请留意它上方的 @Composable 注解。可组合函数会接受一些输入，然后生成在屏幕上显示的内容。

虽然我们在前面已经学习了函数（如果您需要复习，请参阅“在 Kotlin 中创建和使用函数”这个 Codelab），但可组合函数还有一些不同之处。

函数

• @Composable 函数名称采用首字母大写形式。
• 需在该函数前面添加 @Composable 注解。
• @Composable 函数无法返回任何内容。

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

目前，Greeting() 函数可接收名称，并会向其用户显示 Hello。

1. 更新 Greeting() 函数来介绍自己，而不是显示“Hello”：

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. 按下“Design”窗格左上角的按钮，重新构建 DefaultPreview：

DefaultPreview

太好了！您更改了文本，但它介绍您是 Android，这可能不是您的名字吧。接下来，让我们对这个文本进行个性化设置，以便您用自己的名字来做介绍！

DefaultPreview() 函数是一项很酷的功能，让您无需构建整个应用就能查看应用的外观。若要使其成为预览函数，您需要添加 @Preview 注解。

如您所见，@Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向应用预览添加背景。

由于 Android Studio 默认对编辑器使用浅色主题，因此我们很难看出“showBackground = true”和“showBackground = false”之间的区别。不过，如果使用深色主题，您就可以看到如下所示的区别了。请注意，下图中的白色背景已设置为 true。

showBackground

3. 使用您的名字更新 DefaultPreview() 函数，然后重新构建并查看您的个性化贺卡！

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

默认预览

5. 更改文本背景颜色

现在，我们已经制作出自我介绍文本，但它有点无聊！在这一部分中，我们将了解如何更改背景颜色。

若要为自我介绍设置不同的背景颜色，您需要使用 Surface 将文本包围起来。Surface 是一个容器，代表界面的某一部分，您可以在其中更改外观（如背景颜色或边框）。

1. 若要使用 Surface 将文本包围起来，请突出显示该行文本，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然后选择 Surround with widget。

Surround with widget

2. 选择 Surround with Container。

Surround with Container

默认容器为 Box，但您可以将其更改为其他容器类型。

Box

3. 删除 Box，改为输入 Surface()。

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. Surface 容器具有 color 参数，因此请输入 Color，然后添加一个句点。您将会看到一个显示不同颜色选项的弹出式窗口。这是 Android Studio 中一项很棒的功能，它非常智能，可以适时为您提供帮助。在此例中，该功能知道您想指定一种颜色，因此为您建议了各种颜色。

指定一种颜色

5. 为表面选择一种颜色。本 Codelab 使用的是品红色，但您可以选择自己喜欢的颜色！

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

6. 点击 Build & Refresh。文本即会被您选择的颜色包围起来！

默认预览

6. 添加内边距

现在文本已有了背景颜色，接下来让我们在文本周围添加一些空格（内边距）。

Modifier 用于扩充或修饰可组合项。您可以使用的其中一个 Modifier 是 padding 修饰符，它会在元素周围应用空格（在本例中，是在文本周围添加空格）。为此，请使用 Modifier.padding() 函数。

为文本添加尺寸为 24.dp 的内边距修饰符，然后点击 Build & Refresh。

注意：我们将在下一个开发者在线课程中详细了解密度无关像素 (DP)，但如果您现在就想了解更多内容，请参阅这篇文章。

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

默认预览

恭喜，您已经在 Compose 中构建了自己的首个 Android 应用！这不是一件容易的事，但是您做得很好。不妨花些时间试试其他颜色和文本，打造您的个人专属应用吧！

7. 查看解决方案代码

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

8. 总结

您已了解 Android Studio，并使用 Compose 构建了自己的首个 Android 应用，太棒了！

总结要点

• 创建新项目的具体方法为：打开 Android Studio，依次点击 New Project > Empty Compose Activity > Next，输入项目名称，然后配置该项目的设置。
• 如要查看应用的外观，请使用 Preview 窗格。
• 可组合函数与常规函数类似，但存在以下区别：函数名称采用首字母大写形式，需在该函数前面添加 @Composable 注解，@Composable 函数无法返回任何内容。
• Modifier 用于扩充或修饰可组合项。