项目:创建 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 主题构建器 来试验应用的颜色调色板。Material 主题构建器将为浅色主题和深色主题确定合适的颜色。

989d8ef25da21a0b.png

为您的应用选择字体

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

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

形状

另一个设计注意事项是您在应用中显示的小部件的形状。

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

有关 形状 的 Material Design 文档中提供了您在做出这些决策时可能觉得有用的其他信息。

6. 动画

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

7. 构建您的应用

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

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

请记住,此项目使您有机会巩固对 Material Design 的了解并构建 UI,然后再进入下一单元。