项目:创建 30 天应用

1. 开始之前

先决条件

  • 能够在 Android Studio 中创建和运行项目。
  • 熟悉 Kotlin 语法、集合和类。
  • 能够应用基本的 Jetpack Compose 概念。
  • 熟悉 Compose 布局、ColumnRow

您将构建什么

  • 一个 Android 应用,可以在可滚动的列表或网格中显示多个类似的项目。

您需要什么

  • 安装了 Android Studio 的电脑。

2. 概述

恭喜您完成了单元 3!

为了帮助您巩固在本单元中学习的内容,现在轮到您使用新掌握的技能和能力来创建您自己的应用了!

一般的应用指南是

  • 确定一个主题并创建与该主题相关的 30 条提示。每月一天一条提示。
  • 每个提示至少应包含相关的文本和图像。
  • 提示需要在可滚动的列表(列或行)或可滚动的网格中显示。
  • 遵循 Material Design 指南为应用创建独特的品牌。

让它独一无二!通过展示您所学到的知识,让它变得特别。这是您将自己的想法从概念变成现实的机会。

在开始之前,您应该阅读本完整项目文档,因为每个部分都包含构建应用的重要信息。

我们共享了示例应用的用户界面 (UI) 的屏幕截图,以便您参考,但请利用此机会通过使用您自己的图像、文本和布局来创建属于您自己的应用。

我们的示例应用标题为“30 天健康”。

833cf0c0eda1eab7.png

我们为每一天显示一张卡片,并在可滚动的列中显示提示。

每张卡片包含日期指示器、当日目标摘要、图像以及详细描述当日目标的附加文本。

在样式方面,我们选择了绿色主题和 Poppins 字体作为卡片文本的字体。

所有照片均由 Romain Guy 提供。

3. 确定应用的主题、文本和图像

确定主题

现在轮到您为应用确定主题了。

什么主题让您感兴趣并激励您创建应用?如果您的主题过于宽泛,也许该主题的一个较小的子集适合作为应用的主题。

如果您遇到困难,一些潜在的主题包括

  • 健身主题 - “30 天健身” ,每天进行不同的锻炼。
  • 烹饪主题 - “30 天食谱” ,每天提供不同的食谱。
  • 缝纫主题 - “30 天缝纫” ,每天学习不同的缝纫技巧。

确定文本和图像

应用的主题内容由您决定。卡片可以包含任何您想要的图像和文本。这将有助于您的项目在所有其他项目中脱颖而出。

收集或创建您将在应用中使用的文本和图像。

4. 确定每个提示和应用的布局

为每个提示选择布局

在纸上草拟一些关于您希望如何显示每个提示的想法。

文本应该在图像的上方还是下方?您是否更喜欢将文本和图像并排放置?

规划应用的布局

现在您已经了解了每个提示的外观,是时候规划显示所有提示的应用的外观了。

如果您的应用显示一个垂直滚动的列表,请使用 LazyColumn

另一个需要考虑的设计选项是 Lazy 网格。根据您选择的设计方式,有垂直版本( LazyVerticalGrid)和水平版本( LazyHorizontalGrid)。

发挥创意,选择最适合您的应用的布局。

5. Material Design 注意事项

在您草拟了应用创意后,哪些颜色、排版和形状可以使其脱颖而出?

为您的应用选择颜色

颜色是您的应用脱颖而出的方式之一。参考 Material Design 颜色系统,选择适合应用美观的主题色、次要颜色和第三颜色(如果需要)。

深色主题考虑颜色方案也很重要。可以通过 在您的设备上打开深色主题来测试此功能。

随时使用 Material Theme Builder 来试验应用的颜色调色板。Material Theme Builder 将确定浅色主题和深色主题的合适颜色。

989d8ef25da21a0b.png

为您的应用选择字体

排版在赋予应用独特标识方面发挥着重要作用。字体选择,无论是衬线字体还是无衬线字体,草书还是印刷体,粗体还是细笔画,甚至组合,都可以为应用的内容添加层次结构。您可以为标题、文本、说明等使用多种不同的字体样式,但您可能只需要几种不同的文本变化。两到四种不同的文本样式就足够了。

如果您正在寻找具有特定外观和风格的字体,我们建议您使用 Google Fonts。那里有超过 1000 个字体系列可供选择,因此您可能会找到适合您的应用的字体。在将字体用于您的应用之前,请检查与其相关的许可证。

形状

另一个设计考虑因素是您在应用中显示的小部件的形状。

圆角是否准确地传达了应用的风格,或者切角是否更合适?

形状 上的 Material Design 文档包含了您在做出这些决策时可能会发现有用的其他信息。

6. 动画

您可以使用 动画 来传达应用中有意义的动作,例如导航或显示和隐藏内容。您可以选择一个可扩展的卡片来显示所选项目的描述,或者也许触摸并按住图像以使用淡入动画显示其他文本。这些只是两个示例,但是您如何在应用中整合动画完全取决于您。

7. 构建您的应用

做出设计决策后,就可以构建您的应用了。这涉及到您在本单元中学到的许多 Compose 主题。即使您觉得您已经学习了每个概念,在尝试将它们付诸实践时参考 codelab 也很常见。

在您处理项目时,以下内容可能对您有所帮助

请记住,此项目让您有机会巩固对 Material Design 的了解并在继续学习下一单元之前构建 UI。