1. 开始之前
先决条件
- 能够在 Android Studio 中创建和运行项目。
- 熟悉 Kotlin 语法、集合和类。
- 能够应用基本的 Jetpack Compose 概念。
- 熟悉 Compose 布局、
Column
和Row
。
您将构建什么
- 一个 Android 应用,可以在可滚动的列表或网格中显示多个类似的项目。
您需要什么
- 安装了 Android Studio 的电脑。
2. 概述
恭喜您完成了单元 3!
为了帮助您巩固在本单元中学习的内容,现在轮到您使用新掌握的技能和能力来创建您自己的应用了!
一般的应用指南是
- 确定一个主题并创建与该主题相关的 30 条提示。每月一天一条提示。
- 每个提示至少应包含相关的文本和图像。
- 提示需要在可滚动的列表(列或行)或可滚动的网格中显示。
- 遵循 Material Design 指南为应用创建独特的品牌。
让它独一无二!通过展示您所学到的知识,让它变得特别。这是您将自己的想法从概念变成现实的机会。
在开始之前,您应该阅读本完整项目文档,因为每个部分都包含构建应用的重要信息。
我们共享了示例应用的用户界面 (UI) 的屏幕截图,以便您参考,但请利用此机会通过使用您自己的图像、文本和布局来创建属于您自己的应用。
我们的示例应用标题为“30 天健康”。
我们为每一天显示一张卡片,并在可滚动的列中显示提示。
每张卡片包含日期指示器、当日目标摘要、图像以及详细描述当日目标的附加文本。
在样式方面,我们选择了绿色主题和 Poppins 字体作为卡片文本的字体。
所有照片均由 Romain Guy 提供。
3. 确定应用的主题、文本和图像
确定主题
现在轮到您为应用确定主题了。
什么主题让您感兴趣并激励您创建应用?如果您的主题过于宽泛,也许该主题的一个较小的子集适合作为应用的主题。
如果您遇到困难,一些潜在的主题包括
- 健身主题 - “30 天健身” ,每天进行不同的锻炼。
- 烹饪主题 - “30 天食谱” ,每天提供不同的食谱。
- 缝纫主题 - “30 天缝纫” ,每天学习不同的缝纫技巧。
确定文本和图像
应用的主题内容由您决定。卡片可以包含任何您想要的图像和文本。这将有助于您的项目在所有其他项目中脱颖而出。
收集或创建您将在应用中使用的文本和图像。
4. 确定每个提示和应用的布局
为每个提示选择布局
在纸上草拟一些关于您希望如何显示每个提示的想法。
文本应该在图像的上方还是下方?您是否更喜欢将文本和图像并排放置?
规划应用的布局
现在您已经了解了每个提示的外观,是时候规划显示所有提示的应用的外观了。
如果您的应用显示一个垂直滚动的列表,请使用 LazyColumn
。
另一个需要考虑的设计选项是 Lazy 网格。根据您选择的设计方式,有垂直版本( LazyVerticalGrid
)和水平版本( LazyHorizontalGrid
)。
发挥创意,选择最适合您的应用的布局。
5. Material Design 注意事项
在您草拟了应用创意后,哪些颜色、排版和形状可以使其脱颖而出?
为您的应用选择颜色
颜色是您的应用脱颖而出的方式之一。参考 Material Design 颜色系统,选择适合应用美观的主题色、次要颜色和第三颜色(如果需要)。
为 深色主题考虑颜色方案也很重要。可以通过 在您的设备上打开深色主题来测试此功能。
随时使用 Material Theme Builder 来试验应用的颜色调色板。Material Theme Builder 将确定浅色主题和深色主题的合适颜色。
为您的应用选择字体
排版在赋予应用独特标识方面发挥着重要作用。字体选择,无论是衬线字体还是无衬线字体,草书还是印刷体,粗体还是细笔画,甚至组合,都可以为应用的内容添加层次结构。您可以为标题、文本、说明等使用多种不同的字体样式,但您可能只需要几种不同的文本变化。两到四种不同的文本样式就足够了。
如果您正在寻找具有特定外观和风格的字体,我们建议您使用 Google Fonts。那里有超过 1000 个字体系列可供选择,因此您可能会找到适合您的应用的字体。在将字体用于您的应用之前,请检查与其相关的许可证。
形状
另一个设计考虑因素是您在应用中显示的小部件的形状。
圆角是否准确地传达了应用的风格,或者切角是否更合适?
形状 上的 Material Design 文档包含了您在做出这些决策时可能会发现有用的其他信息。
6. 动画
您可以使用 动画 来传达应用中有意义的动作,例如导航或显示和隐藏内容。您可以选择一个可扩展的卡片来显示所选项目的描述,或者也许触摸并按住图像以使用淡入动画显示其他文本。这些只是两个示例,但是您如何在应用中整合动画完全取决于您。
7. 构建您的应用
做出设计决策后,就可以构建您的应用了。这涉及到您在本单元中学到的许多 Compose 主题。即使您觉得您已经学习了每个概念,在尝试将它们付诸实践时参考 codelab 也很常见。
在您处理项目时,以下内容可能对您有所帮助
请记住,此项目让您有机会巩固对 Material Design 的了解并在继续学习下一单元之前构建 UI。