创建艺术空间应用

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. 为每件艺术作品添加以 1 开头的顺序编号形式的标识符或 ID。

现在很清楚，下一件艺术作品是指序列中具有下一个 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。