创建你的第一个 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），然后选择**用小部件环绕**。

220f9c42667a9595.png

  1. 选择**用容器环绕**。

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. 使用大小为 24.dp 的值向 modifier 添加填充。
@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 用于增强或修饰您的可组合项。

了解更多