项目：创建名片应用

1. 开始之前

您将运用在本单元中学习到的知识来创建您自己的名片应用。与之前的代码实验室不同，之前的代码实验室会提供逐步的说明，而这里只提供有关您可以使用迄今为止学习的概念构建的内容的指南和建议。我们鼓励您发挥创意，在指导有限的情况下独立构建应用。

独自构建应用是一项挑战，但不用担心，因为您已经有了足够的练习！您可以在新的环境中使用相同的技能。如果您不确定如何实现应用的某些部分，可以随时参考之前的代码实验室。

当您独自构建此应用并解决遇到的问题时，您的学习速度会更快，并且能够更长时间地记住这些概念。作为额外的好处，该应用是完全自定义的，因此您可以个性化它并向您的朋友和家人展示它！

先决条件

  • 能够在 Android Studio 中创建和运行项目。
  • 具有可组合函数的经验，包括 Text 和 Image 可组合项。

您将学习的内容

  • 如何使用 Row 和 Column 可组合项构建简单的布局，并使用 horizontalAlignment 和 verticalArrangement 参数对其进行排列。
  • 如何使用 Modifier 对象自定义 Compose 元素。

您将构建的内容

  • 一个显示名片的 Android 应用。

您需要的内容

  • 安装了 Android Studio 的计算机。
  • 要在应用中显示的 Android 徽标，此徽标在此 repo 中提供给您使用。

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

c941a07bca72427f.png

2. 使用可组合项构建 UI

创建低保真原型

开始项目时，可视化 UI 元素如何在屏幕上组合在一起非常有用。在专业开发工作中，通常会有设计师或设计团队为开发人员提供包含精确规范的 UI 模型或设计。但是，如果您不与设计师合作，则可以自己创建低保真原型。低保真原型是指一个简单的模型或图纸，它提供了应用外观的基本概念。

令人惊讶的是，在没有设计师的情况下工作是很常见的，这使得能够绘制简单的 UI 模型成为开发人员的一项实用技能。不用担心，您不需要成为专业设计师，甚至不需要知道如何使用设计工具。您可以简单地使用笔和纸、幻灯片 或 绘图 来帮助您构建它。

创建低保真原型的步骤

  1. 在您首选的介质上，添加构成您的应用的元素。一些需要考虑的元素包括 Android 徽标、您的姓名、职务和联系信息、指示联系信息的图标。例如，电话图标表示电话号码。
  2. 将这些元素添加到不同的位置，然后对其进行视觉评估。不要担心第一次就做到完美。您可以随时确定一个设计，然后以后再迭代改进它。

您可能会想出一个类似此图像的低保真设计

33433fd75a21776.png

将设计转换为代码

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

  1. 确定应用的不同逻辑部分，并在其周围绘制边界。此步骤可帮助您将屏幕划分为小型可组合项，并考虑可组合项的层次结构。

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

  • 徽标、姓名和职务
  • 联系信息

每个部分可以转换为一个可组合项。通过这种方式，您可以使用小型可组合构建块构建 UI。您可以使用布局可组合项（例如 Row 或 Column 可组合项）来排列这些部分。

86ba449b7f9a5866.png

  1. 对于包含多个 UI 元素的应用的每个部分，请在其周围绘制边界。这些边界可以帮助您了解一个元素与该部分中的另一个元素之间的关系。

699b66506190e912.png

现在，您可以更轻松地了解如何使用布局可组合项来排列 Text、Image、Icon 和其他可组合项。

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

Row 或 Column 可组合项

  • 尝试 Row 和 Column 可组合项中的各种 horizontalArrangement 和 verticalAlignment 参数，以匹配您拥有的设计。

Image 可组合项

  • 不要忘记填写 contentDescription 参数。如之前的代码实验室中所述，TalkBack 使用 contentDescription 参数来帮助提高应用的可访问性。如果 Image 可组合项仅用于装饰目的，或者存在描述 Image 可组合项的 Text 元素，则可以将 contentDescription 参数设置为 null。您也可以通过在 modifier 参数中指定 height 和 width 修饰符来自定义图像的大小。

Icon 可组合项

  • 您可以使用 Icon 可组合项 添加来自 Material Design 的 图标。您可以更改 Tint 参数 以调整图标颜色以适应您的名片样式。与 Image 可组合项类似，不要忘记填写 contentDescription 参数。

Text 可组合项

  • 您可以尝试 fontSize、textAlign、color 和 fontWeight 参数的各种值来设置文本样式。

间距和对齐方式

  • 您可以使用 Modifier 参数（例如 padding 和 weight 修饰符）来帮助排列可组合项。
  • 您还可以使用 Spacer 可组合项 使间距更明确。

颜色自定义

  • 您可以使用 Color 类和颜色 十六进制代码（以 RGB 格式表示颜色的十六进制方式）来自定义颜色。例如，Android 的绿色十六进制代码为 #3DDC84。您可以使用此代码将文本设置为相同的绿色。
Text("Example", color = Color(0xFF3ddc84))
  1. 在模拟器或您的 Android 设备上运行应用，以确保其可以编译。

3. 祝你好运！

希望本指南能激励您使用 Compose 创建您自己的名片！您可以使用您自己的徽标甚至您自己的照片进一步自定义您的应用！完成后，向您的朋友和家人展示您的作品。如果您想在社交媒体上分享您的作品，请使用标签 #AndroidBasics。