创建“艺术空间”应用

1. 开始之前

您将应用本单元中学到的知识来创建自己的数字艺术空间——一个显示您可以展示的各种艺术品的应用。与之前为您提供分步说明的代码实验室不同，这里仅为您提供有关您可以使用迄今为止学到的概念构建的内容的指南和建议。我们鼓励您在有限的指导下独立发挥创意构建应用。

独立构建应用是一个挑战，但不用担心，因为您已经练习过很多了！您可以将学到的相同技能应用于此新环境。如果您不确定如何实现应用的某些部分，可以随时参考以前的代码实验室。

当您自己构建此应用并解决沿途遇到的问题时，您可以更快地学习并更长时间地保留这些概念。作为额外好处，该应用完全自定义，因此您可以使用它来展示您的作品作为您开发者作品集的一部分！

先决条件

  • 能够在 Android Studio 中创建和运行项目。
  • 具有 Kotlin 语法的经验，包括 Boolean 和 when 表达式。
  • 能够应用基本的 Jetpack Compose 概念，例如使用 MutableState 对象的状态。
  • 具有可组合函数的经验，包括 Text、Image 和 Button 可组合项。

您将学到什么

  • 如何构建低保真原型并将其转换为代码。
  • 如何使用 Row 和 Column 可组合项构建简单的布局，并使用 horizontalAlignment 和 verticalArrangement 参数进行排列。
  • 如何使用 Modifier 对象自定义 Compose 元素。
  • 如何识别状态并在触发器（例如按钮点击）时修改状态。

您将构建什么

  • 一个可以显示艺术品或家庭照片的 Android 应用

您需要什么

  • 安装了 Android Studio 的计算机。
  • 要在应用中显示的照片或数字艺术作品。

以下是您的应用在此项目结束时可能的样子

fd250028b87ec08f.png

一个“艺术空间”应用示例，它显示了 Android 基础培训团队策划的精选画作收藏。

2. 使用可组合项构建静态 UI

创建低保真原型

低保真 (low-fi) 原型是指一个简单的模型或绘图，它提供了一个关于应用外观的基本概念。

创建低保真原型

  1. 考虑您想在“艺术空间”应用中显示什么以及目标受众是谁。
  2. 在您首选的媒介上，添加构成应用的元素。一些需要考虑的元素包括
  • 艺术品图像
  • 有关艺术品的信息，例如标题、艺术家和出版年份
  • 任何其他元素，例如使应用具有交互性和动态性的按钮。
  1. 将这些元素放在不同的位置，然后在视觉上对其进行评估。不要担心第一次就做到完美。您可以随时现在确定一个设计，并在以后迭代改进。
  1. 您可能会想出一个类似于此图像的低保真设计

A low-fidelity prototype that displays placeholders for the image, text, and buttons.

图 1. UI 模型中的占位符元素有助于可视化最终产品。

将设计转换为代码

使用您的原型帮助将设计转换为代码

  1. 识别构建应用所需的 UI 元素。

例如，根据您制作的设计示例，您需要在代码中包含一个 Image 可组合项、两个 Text 可组合项和两个 Button 可组合项。

  1. 识别应用的不同逻辑部分并在其周围绘制边界。

此步骤有助于您将屏幕划分为小的可组合项，并考虑可组合项的层次结构。

在此示例中，您可以将屏幕划分为三个部分

  • 艺术品墙
  • 艺术品描述
  • 显示控制器

您可以使用布局可组合项（例如 Row 或 Column 可组合项）来排列每个部分。

The boundaries drawn on a low-fi prototype, which outline three distinct sections.

图 2. 部分周围的边界帮助开发人员概念化可组合项。

  1. 对于包含多个 UI 元素的应用的每个部分，在其周围绘制边界。

这些边界可以帮助您了解一个元素与此部分中的另一个元素之间的关系。

Smaller boundaries drawn in each section of the low-fi prototype to separate the text and buttons.

图 3. 文本和按钮周围的更多边界帮助开发人员排列可组合项。

现在更容易了解如何使用布局可组合项来排列可组合项（例如 Text 和 Button 可组合项）。

关于您可能使用的各种可组合项的一些说明

  • Row 或 Column 可组合项。尝试在 Row 和 Column 可组合项中使用各种 horizontalArrangement 和 verticalAlignment 参数来匹配您已有的设计。
  • Image 可组合项。不要忘记填写 contentDescription 参数。如前一个代码实验室中所述，TalkBack 使用 contentDescription 参数来帮助提高应用的可访问性。如果 Image 可组合项仅用于装饰目的，或者存在描述 Image 可组合项的 Text 元素，则可以将 contentDescription 参数设置为 null。
  • Text 可组合项。您可以尝试使用 fontSize、textAlign 和 fontWeight 的各种值来设置文本样式。您还可以使用 buildAnnotatedString 函数为单个 Text 可组合项应用多种样式。
  • Surface 可组合项。您可以尝试使用 Elevation、Color 和 BorderStroke 的各种值（用于 Modifier.border）在 Surface 可组合项中创建不同的 UI。
  • 间距和对齐。您可以使用 Modifier 参数（例如 padding 和 weight）来帮助排列可组合项。
  1. 在模拟器或您的 Android 设备上运行应用。

888a90e67f8e2cc2.png

图 4. 此应用显示静态内容，但用户尚无法与其交互。

3. 使应用具有交互性

确定用户交互

以数字方式构建艺术空间的优势在于，您可以使其对用户具有交互性和动态性。在初始设计中，您为用户构建了两个按钮进行交互。但是，这是您自己的艺术空间！您可以根据需要更改设计以及用户与应用交互的方式。现在花一点时间考虑一下您希望用户如何与应用交互以及应用应如何根据这些交互做出响应。您可以添加到应用中的一些可能的交互包括

  • 点击按钮后显示下一件或上一件艺术品。
  • 滑动后快进显示的艺术品到下一张专辑。
  • 长按按钮后显示工具提示以获取其他信息。

为动态元素创建状态

处理点击按钮时显示下一件或上一件艺术品的部分 UI。

  1. 首先，识别用户交互后需要更改的 UI 元素。

在这种情况下，UI 元素是艺术品图像、艺术品标题、艺术家和年份。

  1. 如有必要，使用 MutableState 对象为每个动态 UI 元素创建一个状态。
  2. 请记住，用定义的 states 替换硬编码值。

编写交互条件逻辑

  1. 考虑用户点击按钮时所需的交互行为，从“下一步”按钮开始。

当用户点击“下一步”按钮时，他们应该期望看到序列中的下一件艺术品。目前，确定要显示的下一件艺术品可能很困难。

  1. 为每件艺术品添加标识符或 ID，形式为从 1 开始的连续数字。

现在很清楚，下一件艺术品是指序列中具有下一个 ID 的艺术品。

因为您没有无限数量的艺术品，所以您可能还想确定当您显示系列中的最后一件艺术品时“下一步”按钮的行为。一种常见的行为是在显示完最后一件艺术品后返回显示第一件艺术品。

  1. 首先用伪代码捕获代码的逻辑，而不用 Kotlin 语法。

如果要显示三件艺术品，则“下一步”按钮逻辑的伪代码可能如下面的代码片段所示

if (current artwork is the first artwork) {
    // Update states to show the second artwork.
}
else if (current artwork is the second artwork) {
    // Update states to show the third artwork.
}
else if (current artwork is the last artwork) {
   // Update state to show the first artwork.
}
  1. 将伪代码转换为 Kotlin 代码。

您可以使用 when 语句来构建条件逻辑，而不是 if else 语句，当它管理大量艺术品案例时，这可以使代码更具可读性。

  1. 为了在点击按钮时执行此逻辑，请将其放在 Button 可组合项的 onClick() 参数中。
  2. 重复相同的步骤来构建“上一步”按钮的逻辑。
  3. 运行您的应用，然后点击按钮以确认它们是否将显示更改为上一件或下一件艺术品。

4. 挑战：为不同的屏幕尺寸构建

Android 的优势之一在于它支持众多设备和屏幕尺寸，这意味着您构建的应用能够覆盖广泛的用户群体，并以多种方式使用。为了确保所有用户都能获得最佳体验，您应该在应用打算支持的设备上对其进行测试。例如，在当前的示例应用中，您可能最初是在纵向模式下为移动设备设计、构建和测试该应用的。但是，一些用户可能会发现，在横向模式下的大屏幕上使用您的应用会更令人愉快。

虽然平板电脑不是此应用的主要支持设备，但您仍然需要确保如果用户在更大屏幕上使用该应用，应用不会崩溃。

在平板电脑上测试应用在大屏幕上的显示效果

  1. 如果您没有 Android 平板电脑设备，请创建 Android 虚拟设备 (AVD)。
  2. 在平板电脑 AVD 上以横向模式构建并运行应用。
  3. 目视检查是否有任何不可接受的内容，例如某些被截断的 UI 元素、错位的对齐方式或无法按预期工作的按钮交互。

34818d2206882027.png

图 5. 应用需要重新设计才能在大尺寸设备上正确显示。

  1. 修改代码以修复发现的任何错误。请参考大屏幕应用质量基本兼容性指南作为指导。
  2. 再次测试平板电脑和手机上的应用，以确保错误修复在两种类型的设备上都能正常工作。

5901ce896814ac17.png

图 6. 应用现在在大屏幕上看起来不错了。

5. 祝您好运！

希望本指南能激发您创建自己的艺术空间！请记住，您无需一开始就创建完美的应用。您可以根据您目前掌握的 Android 知识构建应用，并在以后随着技能的提升对其进行改进。

完成后，在您的作品集中展示您的作品，并与您的朋友和家人分享。如果您想在社交媒体上分享您的作品，请使用标签 #AndroidBasics。