教程取自于Google官方课程之Android 之 Compose 开发基础
教程取自于Google官方课程之Jetpack Compose 教程
Android 之 Compose 开发基础
在本课程中，您将学习使用 Jetpack Compose 构建 Android 应用的基础知识。Jetpack Compose 是用于构建 Android 应用的全新界面工具包。在这个过程中，您将开发一些应用，为成为一名 Android 开发者奠定基础。
第 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 中创建项目，请执行以下操作：
- 双击 Android Studio 图标来启动 Android Studio。
- 在 Welcome to Android Studio 对话框中，点击 New Project。
New Project 窗口随即会打开，其中列出了 Android Studio 提供的模板。
在 Android Studio 中，项目模板就是用于为特定类型的应用提供蓝图的 Android 项目。模板可用来创建项目结构以及在 Android Studio 中构建项目所需的文件。系统会根据您选择的模板提供对应的起始代码，以便您能更快上手。
- 务必选择 Phone and Tablet 标签页。
- 点击 Empty Compose Activity 模板，选择该模板作为您的项目模板。“Empty Compose Activity”模板是用于创建简单项目的模板，您可以用它来构建 Compose 应用。这个模板只有一个屏幕，并显示
"HelloAndroid!"文本。 - 点击 Next。New Project 对话框随即会打开，其中包含一些用于配置项目的字段。
- 按如下方式配置项目：
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 复选框目前已处于取消选中状态。
- 点击 Finish。此过程可能需要一些时间，这个时候很适合来杯茶哦！在 Android Studio 设置过程中，界面中会显示进度条和消息来指示 Android Studio 是否仍在设置您的项目，具体可能如下所示：
在创建项目设置时，系统会显示类似如下内容的通知消息。
- 您可能会看到 What's New 窗格，其中包含有关 Android Studio 新功能的最新动态。现阶段，请关闭此窗格。
- 点击 Android Studio 右上角的 Split，即可同时查看代码和设计。您也可以点击 Code，仅查看代码；或点击 Design，仅查看设计。
按下 Split 后，您应该会看到以下三个区域：
- Project 视图 (1) 用于显示项目的文件和文件夹
- Code 视图 (2) 是您修改代码的地方
- Design 视图 (3) 是您预览应用外观的地方
在 Design 视图中，您会看到一个显示以下内容的空白窗格：
- 点击 Build & Refresh。构建可能需要花一些时间，不过完成后，预览便会显示一个内容为 Hello Android! 的文本框。“Empty Compose Activity”模板会提供创建此应用所需的全部代码。
3. 查找项目文件
在此部分中，我们将通过进一步熟悉文件结构，继续对 Android Studio 展开探索。
- 在 Android Studio 中，进入 Project 标签页。Project 标签页会显示项目的文件和文件夹。您在设置项目时，已将软件包名称指定为 com.example.greetingcard。因此，您可以直接在 Project 标签页中看到该软件包。软件包基本上就是代码所在的文件夹。Android Studio 会将项目整理成一个由软件包组成的目录结构。
- 如有必要，请从 Project 标签页的下拉菜单中选择 Android。
这就是您使用的标准文件视图和组织方式，在编写项目代码时会非常有用，因为您可以轻松访问将在应用中使用的各个文件。不过，如果您是通过文件浏览器（如 Finder 或 Windows 资源管理器）浏览文件，则文件层次结构的组织方式会明显不同。
- 从下拉菜单中选择 Project Source Files。现在，您可以像在任何文件浏览器中一样浏览文件了。
- 再次选择 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。
- 更新
Greeting()函数来介绍自己，而不是显示“Hello”：
@Composable
fun Greeting(name: String) {
Text(text = "Hi, my name is $name!")
}
- 按下“Design”窗格左上角的按钮，重新构建 DefaultPreview：
太好了！您更改了文本，但它介绍您是 Android，这可能不是您的名字吧。接下来，让我们对这个文本进行个性化设置，以便您用自己的名字来做介绍！
DefaultPreview() 函数是一项很酷的功能，让您无需构建整个应用就能查看应用的外观。若要使其成为预览函数，您需要添加 @Preview 注解。
如您所见，@Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向应用预览添加背景。
由于 Android Studio 默认对编辑器使用浅色主题，因此我们很难看出“showBackground = true”和“showBackground = false”之间的区别。不过，如果使用深色主题，您就可以看到如下所示的区别了。请注意，下图中的白色背景已设置为 true。
- 使用您的名字更新
DefaultPreview()函数，然后重新构建并查看您的个性化贺卡！
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GreetingCardTheme {
Greeting("Meghan")
}
}
5. 更改文本背景颜色
现在，我们已经制作出自我介绍文本，但它有点无聊！在这一部分中，我们将了解如何更改背景颜色。
若要为自我介绍设置不同的背景颜色，您需要使用 Surface 将文本包围起来。Surface 是一个容器，代表界面的某一部分，您可以在其中更改外观（如背景颜色或边框）。
- 若要使用
Surface将文本包围起来，请突出显示该行文本，按下Alt+Enter(Windows) 或Option+Enter(Mac)，然后选择 Surround with widget。
- 选择 Surround with Container。
默认容器为 Box，但您可以将其更改为其他容器类型。
- 删除
Box，改为输入Surface()。
@Composable
fun Greeting(name: String) {
Surface() {
Text(text = "Hi, my name is $name!")
}
}
-
Surface容器具有color参数，因此请输入Color，然后添加一个句点。您将会看到一个显示不同颜色选项的弹出式窗口。这是 Android Studio 中一项很棒的功能，它非常智能，可以适时为您提供帮助。在此例中，该功能知道您想指定一种颜色，因此为您建议了各种颜色。
- 为表面选择一种颜色。本 Codelab 使用的是品红色，但您可以选择自己喜欢的颜色！
@Composable
fun Greeting(name: String) {
Surface(color = Color.Magenta) {
Text(text = "Hi, my name is $name!")
}
}
- 点击 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用于扩充或修饰可组合项。
