创建你的第一个 Android 应用

1. 开始之前

如果你还没有安装 Android Studio，请在你的电脑上安装它。检查你的电脑是否满足运行 Android Studio 所需的系统要求（位于下载页面底部）。如果你需要有关设置过程的更详细说明，请参考 下载并安装 Android Studio 代码实验室。

在本代码实验室中，你将使用 Android Studio 提供的项目模板创建你的第一个 Android 应用。你将使用 Kotlin 和 Jetpack Compose 来自定义你的应用。请注意，Android Studio 会更新，有时 UI 会发生变化，因此如果你的 Android Studio 看起来与本代码实验室中的屏幕截图略有不同，这是正常的。

先决条件

  • Kotlin 基础知识

你需要什么

  • 最新版本的 Android Studio

你将学到什么

  • 如何使用 Android Studio 创建 Android 应用
  • 如何在 Android Studio 中使用预览工具运行应用
  • 如何使用 Kotlin 更新文本
  • 如何使用 Jetpack Compose 更新用户界面 (UI)
  • 如何在 Jetpack Compose 中使用预览功能查看应用的预览

你将构建什么

  • 一个允许你自定义你的问候语的应用！

当你完成本代码实验室时，应用看起来是这样的（除了它将使用你的姓名进行自定义！)

13957184d295b16f.png

你需要什么

2. 使用模板创建项目

在本代码实验室中，你将使用 Android Studio 提供的 **空活动** 项目模板创建 Android 应用。

在 Android Studio 中创建项目

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

4853d32c0c91ae24.png

  1. 在 **欢迎使用 Android Studio** 对话框中，点击 **新建项目**。

3ae9fa94ff44605d.png

**新建项目** 窗口将打开，其中包含 Android Studio 提供的模板列表。

e8d10ef688c296.png

在 Android Studio 中，项目模板是一个 Android 项目，它提供了一种特定类型的应用的蓝图。模板创建项目的结构以及 Android Studio 构建项目所需的文件。你选择的模板提供启动代码，以便你更快地开始。

  1. 确保已选择 **手机和平板电脑** 选项卡。
  2. 点击 **空活动** 模板将其选择为项目的模板。**空活动** 模板是用于创建简单项目的模板，你可以使用它来构建 Compose 应用。它只有一个屏幕并显示文本 "Hello Android!"。
  3. 点击 **下一步**。**新建项目** 对话框将打开。它有一些字段可用于配置你的项目。
  4. 如下配置你的项目

**名称** 字段用于输入项目的名称，在本代码实验室中，输入 “Greeting Card”。

保持 **包名** 字段不变。这表示文件在文件结构中的组织方式。在本例中，包名为 com.example.greetingcard。

保持 **保存位置** 字段不变。它包含保存与项目相关的所有文件的位置。记下它在电脑上的位置，以便你可以找到你的文件。

从 **最低 SDK** 字段中的菜单中选择 **API 24: Android 7.0 (牛轧糖)**。 最低 SDK 指示应用可以运行的最低 Android 版本。

7a0f8e0cb77e120c.png

  1. 点击 **完成**。这可能需要一段时间 - 这是一个泡茶的好时机！Android Studio 在设置过程中，进度条和消息会指示 Android Studio 是否仍在设置你的项目。它可能看起来像这样

This image shows a progress bar spinning and the text reads,

类似于此的消息会告知你项目设置何时创建完成。

This image shows a Gradle sync message that reads,

  1. 你可能会看到一个 **新增功能** 面板，其中包含有关 Android Studio 中新功能的更新。现在先关闭它。

c4b2b7748563ebb7.png

  1. 点击 Android Studio 右上角的 **拆分**，这允许你同时查看代码和设计。你也可以点击 **代码** 以仅查看代码，或点击 **设计** 以仅查看设计。

b17a701425679ff1.png

按下 **拆分** 后，你应该会看到三个区域

d90019bf5a60c11b.png

  • **项目** 视图 (1) 显示项目的目录和文件
  • **代码** 视图 (2) 是你编辑代码的地方
  • **设计** 视图 (3) 是你预览应用外观的地方

在 **设计** 视图中，你可能会看到一个空白的面板，其中显示以下文本

The text on this reads

  1. 点击 **构建并刷新**。构建可能需要一段时间，但完成后，预览将显示一个文本框，其中显示 “**Hello Android!**”。空的 Compose 活动包含创建此应用所需的所有代码。

a86077be9d06a909.png

3. 查找项目文件

在本节中，你将继续探索 Android Studio，并熟悉文件结构。

  1. 在 Android Studio 中，查看 **项目** 选项卡。**项目** 选项卡显示项目的目录和文件。当你设置项目时，包名为 **com.example.greetingcard**。你可以在 **项目** 选项卡中看到此包。包基本上是存放代码的文件夹。Android Studio 以由一组包组成的目录结构来组织项目。
  2. 如有必要，从 **项目** 选项卡的下拉菜单中选择 **Android**。

52051aa2a3038b89.png

这是你使用的标准文件视图和组织方式。当你为项目编写代码时，它非常有用，因为你可以轻松访问将在应用中使用的文件。但是，如果你在文件浏览器（例如 Finder 或 Windows 资源管理器）中查看文件，则文件层次结构的组织方式会有很大不同。

  1. 从下拉菜单中选择 **项目源文件**。你现在可以像在任何文件浏览器中一样浏览文件。

84dc993206449d28.png

  1. 再次选择 **Android** 以切换回以前的视图。在本课程中，你将使用 **Android** 视图。如果你的文件结构看起来很奇怪，请检查确保你仍然处于 **Android** 视图中。

4. 更新文本

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

查看 MainActivity.kt 文件的 **代码** 视图。请注意，此代码中有一些自动生成的函数，特别是 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.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

onCreate() 函数是此 Android 应用的入口点，并调用其他函数来构建用户界面。在 Kotlin 程序中， main() 函数是执行的入口点/起点。在 Android 应用中， onCreate() 函数扮演着这个角色。

onCreate() 函数内的 setContent() 函数用于通过可组合函数定义布局。所有标记有 @Composable 注解的函数都可以从 setContent() 函数或其他可组合函数中调用。该注解告诉 Kotlin 编译器此函数由 Jetpack Compose 用于生成 UI。

接下来，查看 Greeting() 函数。 Greeting() 函数是一个可组合函数，请注意它上面的 @Composable 注解。此可组合函数接收一些输入并生成屏幕上显示的内容。

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

你之前已经学习过函数（如果你需要复习，请访问 在 Kotlin 中创建和使用函数 代码实验室），但可组合函数有一些区别。

178c1b8d480aefe2.png

    1. 你将在函数之前添加 @Composable 注解。
    1. @Composable 函数名以大写字母开头。
    1. @Composable 函数不能返回值。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

目前， Greeting() 函数接收一个名称并向该人显示 Hello。

  1. 更新 Greeting() 函数以自我介绍，而不是说 “Hello”
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hi, my name is $name!",
        modifier = modifier
    )
}
  1. Android 应该会自动更新预览。

34c74a1b980c177.png

太棒了！你更改了文本，但它将你介绍为 Android，这可能不是你的名字。接下来，你将对其进行个性化设置，以使用你的名字来介绍你！

GreetingPreview() 函数是一项很酷的功能，它允许你查看可组合项的外观，而无需构建整个应用。要启用可组合项的预览，请使用 @Composable 和 @Preview 进行注解。 @Preview 注解告诉 Android Studio 此可组合项应在此文件的“设计”视图中显示。

如你所见， @Preview 注解接收一个名为 showBackground 的参数。如果将 showBackground 设置为 **true**，它将为可组合项预览添加背景。

由于 Android Studio 默认情况下使用浅色主题作为编辑器，因此很难看出 showBackground = true 和 showBackground = false 之间的区别。但是，这是一个显示区别的示例。请注意设置为 true 的图像上的白色背景。

showBackground = true

showBackground = false

  1. 使用你的姓名更新 GreetingPreview() 函数。然后重建并查看你个性化的贺卡！
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Meghan")
    }
}

9703ef244f8ee16c.png

5. 更改背景颜色

现在你有了介绍文本，但它有点无聊！在本节中，你将学习如何更改背景颜色。

要为你的介绍设置不同的背景颜色，你需要将你的文本包含在一个 Surface 中。Surface 是一个容器，表示 UI 的一部分，你可以在其中更改外观，例如背景颜色或边框。

  1. 要将文本包含在 Surface 中，请突出显示文本行，按（Windows 上为 Alt+Enter 或 Mac 上为 Option+Enter），然后选择**Surround with widget**。

220f9c42667a9595.png

  1. 选择**Surround with Container**。

f5258fe61ffc94fb.png

它将为你提供的默认容器是 Box，但你可以将其更改为其他容器类型。你将在课程的后面学习有关 Box 布局的知识。

85e695291c03dcfc.png

  1. 删除 Box 并改为键入 Surface()。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface() {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier
        )
    }
}
  1. 在 Surface 容器中添加 color 参数，将其设置为 Color。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color) {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier
        )
    }
}
  1. 当你键入 Color 时，你可能会注意到它是红色的，这意味着 Android Studio 无法解析它。要解决此问题，请滚动到文件顶部，在显示导入的位置，然后按下三个按钮。

80b6219d24f04365.png

  1. 将此语句添加到导入列表的底部。
import androidx.compose.ui.graphics.Color

完整的导入列表将类似于此。

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
import androidx.compose.ui.graphics.Color
  1. 在你的代码中，最佳实践是按字母顺序排列导入列表并删除未使用的导入。为此，请按顶部工具栏上的**帮助**，输入**优化导入**，然后点击**优化导入**。

92241239038c774a.png

你可以直接从菜单中打开**优化导入**：**代码** > **优化导入**。如果你不记得菜单项在哪里，使用帮助的搜索选项将有助于你找到它。

完整的导入列表现在将如下所示

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
  1. 注意，你在 Surface 括号中键入的 Color 已从红色变为红色下划线。要修复此问题，请在它后面添加一个句点。你将看到一个弹出窗口，显示不同的颜色选项。

这是 Android Studio 的一个很酷的功能，它很智能，并在它可以的时候帮助你。在这种情况下，它知道你想要指定一种颜色，因此它会建议不同的颜色。

3a709cb72da0f83d.png

  1. 为你的表面选择一种颜色。此代码实验室使用**青色**，但你可以选择你喜欢的颜色！
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
   Surface(color = Color.Cyan) {
       Text(
           text = "Hi, my name is $name!",
           modifier = modifier
       )
   }
}
  1. 注意更新的预览。

217a09ca55b503f8.png

6. 添加填充

现在你的文本有了背景颜色，接下来你将添加一些文本周围的空间（填充）。

Modifier 用于增强或装饰可组合项。你可以使用的其中一个修饰符是 padding 修饰符，它会在元素周围添加空间（在本例中，在文本周围添加空间）。这是通过使用 Modifier.padding() 函数来实现的。

每个可组合项都应该有一个可选的 Modifier 类型的参数。这应该是第一个可选参数。

  1. 向 modifier 添加填充，大小为 24.dp。
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier.padding(24.dp)
        )
    }
}
  1. 将这些导入添加到导入语句部分。

确保使用**优化导入**对新的导入进行排序。

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2c09be85535277e9.png

恭喜你 - 你使用 Compose 构建了你的第一个 Android 应用！这是一个非常了不起的成就。花一些时间尝试不同的颜色和文本，使其成为你自己的！

7. 查看解决方案代码

供审查的代码片段

package com.example.greetingcard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.greetingcard.ui.theme.GreetingCardTheme

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.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

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

8. 结论

你学习了 Android Studio 并使用 Compose 构建了你的第一个 Android 应用，干得好！

此代码实验室是 使用 Compose 的 Android 基础课程 的一部分。要了解如何在模拟器或物理设备上运行你的应用，请查看 此路径 中的下一个代码实验室。

摘要

  • 要创建一个新项目：打开 Android Studio，点击**新建项目 > 空白活动 > 下一步**，输入项目的名称，然后配置其设置。
  • 要查看你的应用外观，请使用**预览**窗格。
  • 可组合函数类似于常规函数，但有一些区别：函数名称以大写字母开头，在函数之前添加 @Composable 注释，@Composable 函数不能返回任何内容。
  • Modifier 用于增强或装饰你的可组合项。

了解更多