练习：构建网格

1. 准备工作

恭喜你！你已经构建了第一个带可滚动列表的应用。现在你可以将所学知识付诸实践了。

本练习着重于构建可滚动列表所需的组件。本材料扩展了你在添加可滚动列表 Codelab 中学到的知识，让你能将这些知识应用于构建可滚动网格。

某些章节可能需要你使用之前未曾见过的可组合函数 (composables) 或修饰符 (modifiers)。遇到这种情况时，请查阅每个问题提供的参考资料，你可以在其中找到与不熟悉修饰符、属性或可组合函数相关的文档链接。你可以阅读文档，确定如何在应用中整合这些概念。阅读文档的能力是一项重要的技能，你需要培养这项技能来增长你的知识。

解决方案代码在末尾提供，但请尽量先自行完成练习，再对照答案。请将此解决方案视为实现应用的一种方法。

前提条件

你需要准备什么

  • 一台可连接互联网并安装了 Android Studio 的计算机。

资源

你将需要以下资源来完成这些练习题的代码

  • 主题图片。这些图片代表列表中的每个主题。
  • ic_grain.xml。这是出现在主题课程数量旁边的装饰性图标。

你将构建什么

在这些练习题中，你将从头构建 Courses 应用。Courses 应用显示课程主题列表。

练习题分为几个部分，你将构建

  • 一个课程主题数据类

主题数据将包含图片、名称以及与该主题关联的课程数量。

  • 一个表示课程主题网格项的可组合函数

每个主题项将显示图片、名称、关联的课程数量以及一个装饰性图标。

  • 一个用于显示这些课程主题项网格的可组合函数。

最终应用将如下所示

97c449bee4a2029d.png

2. 开始

使用 Empty Activity 模板创建一个最低 SDK 版本为 24 的新项目。

3. 主题数据类

在本节中，你将构建一个类来保存每个课程主题的数据。

查看最终应用中的各项。

bf68e7995b2f47bd.png

每个课程主题包含三项唯一信息。参考每项的独有内容，创建一个类来保存这些数据。

4. 数据源

在本节中，你将为课程网格创建数据集。

将以下项复制到 app/src/main/res/values/strings.xml 中

<string name="architecture">Architecture</string>
<string name="crafts">Crafts</string>
<string name="business">Business</string>
<string name="culinary">Culinary</string>
<string name="design">Design</string>
<string name="fashion">Fashion</string>
<string name="film">Film</string>
<string name="gaming">Gaming</string>
<string name="drawing">Drawing</string>
<string name="lifestyle">Lifestyle</string>
<string name="music">Music</string>
<string name="painting">Painting</string>
<string name="photography">Photography</string>
<string name="tech">Tech</string>

创建一个名为 DataSource.kt 的空文件。将以下代码复制到该文件中

object DataSource {
    val topics = listOf(
        Topic(R.string.architecture, 58, R.drawable.architecture),
        Topic(R.string.crafts, 121, R.drawable.crafts),
        Topic(R.string.business, 78, R.drawable.business),
        Topic(R.string.culinary, 118, R.drawable.culinary),
        Topic(R.string.design, 423, R.drawable.design),
        Topic(R.string.fashion, 92, R.drawable.fashion),
        Topic(R.string.film, 165, R.drawable.film),
        Topic(R.string.gaming, 164, R.drawable.gaming),
        Topic(R.string.drawing, 326, R.drawable.drawing),
        Topic(R.string.lifestyle, 305, R.drawable.lifestyle),
        Topic(R.string.music, 212, R.drawable.music),
        Topic(R.string.painting, 172, R.drawable.painting),
        Topic(R.string.photography, 321, R.drawable.photography),
        Topic(R.string.tech, 118, R.drawable.tech)
    )
}

5. 主题网格项

创建一个可组合函数来表示主题网格项。

最终截图

完成实现后，你的主题项布局应与以下截图一致

f7e47f86ab7ea8b3.png

UI 规范

使用以下 UI 规范

3bdfc5ea4f3d619d.png

b051bb634fa06501.png

文本样式

提示：哪个可组合函数垂直排列其子项，哪个水平排列其子项？

参考资料

6. 课程网格

创建主题网格项后，即可使用它来构建课程主题网格。

在此练习中，你将使用你的网格项可组合函数构建一个包含两列的网格。

最终截图

完成实现后，你的设计应与以下截图一致

97c449bee4a2029d.png

UI 规范

使用以下 UI 规范

aee57a3a525e91bb.png

参考资料

7. 获取解决方案代码

要下载已完成的 Codelab 代码，可以使用此 git 命令

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-courses.git

或者，你可以将仓库下载为 zip 文件，解压后在 Android Studio 中打开。

如果你想查看解决方案代码，在 GitHub 上查看。

你在此练习中构建的应用是 Owl 应用课程屏幕的修改版本。Owl 应用是一个演示 Compose 功能的综合示例应用。其他 Compose 示例应用可在compose-samples GitHub 仓库中找到。