项目：Dogglers 应用

1. 准备工作

此 Codelab 将介绍如何自行构建一个名为 Dogglers 的新应用，并且会逐步引导您在 Android Studio 完成 Dogglers 应用项目，包括项目设置和测试。

此 Codelab 与本课程中的其他 Codelab 不同。与之前的 Codelab 不同，此 Codelab 的目的不是提供关于如何构建应用的分步教程。此 Codelab 旨在设置一个将由您独立完成的项目，它会为您提供有关如何完成应用及自行检查您的工作成果的说明。

我们在您要下载的应用中提供了测试套件，而不是解决方案代码。您将在 Android Studio 中运行这些测试（我们将在此 Codelab 稍后的部分介绍如何运行测试），并查看您的代码是否通过测试。您可能需要进行多次尝试，即使是专业开发者，也很少在第一次尝试时通过所有测试！只有在您的代码通过所有测试后，您才可以将此项目视为已完成。

我们理解，您可能只是想对照解决方案代码来进行检查。我们故意不提供解决方案代码，因为我们希望您像一名专业开发者一样进行练习。这可能需要您运用其他一些练习得并不多的技能，例如：

使用 Google 搜索应用中出现的您不理解的术语、错误消息和代码段；
测试代码，查看错误，然后更改代码并再次测试；
复习前面学过的“Android 基础知识”相关内容；
将您知道可以正常运行的代码（即项目中给出的代码，或您之前在第 2 单元中学过的其他应用的解决方案代码）与您编写的代码进行比较。

这最初可能会令人怯步，不过如果您能够完成第 2 单元，那么您已为完成此项目做好准备了，对此，我们有十足的信心。慢慢来，不要放弃。您可以完成此项目。

前提条件

此项目的适用对象为已经完成《使用 Kotlin 进行 Android 开发的基础知识》课程第 2 单元的用户。

构建内容

您将使用在第 2 单元中所学的技能，构建一个名为 Dogglers 的应用，该应用会在 RecyclerView 中显示信息。

所需条件

一台安装了 Android Studio 的计算机。

2. 应用概览

欢迎参与“项目：Dogglers 应用”！

在 Google，我们亲切地称呼我们的同事为“Googler”（下称 Google 员工）。由于很多 Google 员工都养狗，因此我们想为我们的狗狗朋友创建一个名为 Dogglers 的应用会很有趣。您的任务是实现 Dogglers，该应用会显示 Google 员工宠物狗的滚动列表以及每只狗狗的一些信息（例如名字、年龄、爱好和照片）。在此项目中，您将为 Dogglers 应用中的 RecyclerView 项构建布局，并实现适配器，从而以三种方式呈现狗狗的列表：水平滚动、垂直滚动和垂直滚动网格布局。

启动该应用时，您将看到水平、垂直和网格布局选项。

第一个选项是垂直滚动 Recycler 视图，其中的项会占据屏幕的整个宽度。

第二个选项会在水平滚动 Recycler 视图中显示狗狗列表。

第三个选项会以垂直滚动网格式布局显示狗狗，在这种布局中，每一行会显示两只狗狗。

所有这些布局都由同一适配器类提供支持。您的任务是为 Recycler 视图卡片构建布局，然后实现适配器，以便在每个项中填充每只狗狗的相关信息。

3. 开始

下载项目代码

请注意，文件夹名称为 android-basics-kotlin-dogglers-app。在 Android Studio 中打开项目时，请选择此文件夹。

进入为此项目提供的 GitHub 代码库页面。
验证分支名称是否与此 Codelab 中指定的分支名称一致。例如，在以下屏幕截图中，分支名称为 main。

在项目的 GitHub 页面上，点击 Code 按钮，以打开一个弹出式窗口。

在弹出式窗口中，点击 Download ZIP 按钮，将项目保存到计算机上。等待下载完成。
在计算机上找到该文件（很可能在 Downloads 文件夹中）。
双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

启动 Android Studio。
在 Welcome to Android Studio 窗口中，点击 Open。

注意：如果 Android Studio 已经打开，则改为依次选择 File > Open 菜单选项。

在文件浏览器中，前往解压缩的项目文件夹所在的位置（很可能在 Downloads 文件夹中）。
双击该项目文件夹。
等待 Android Studio 打开项目。
点击 Run 按钮以构建并运行应用。请确保该应用按预期构建。

项目整理成单独的软件包。虽然大多数功能都已实现，但您需要实现 DogCardAdapter。此外，您还需要修改两个布局文件。我们将在以下说明中根据需要讨论其他文件。

实现布局

垂直布局和水平布局都是相同的，因此您只需为两者实现一个布局文件即可。网格布局显示了所有相同的信息，但狗狗的名字、年龄和爱好是垂直堆叠的，因此对于这种情况您需要单独的布局。两种布局都需要四个不同的视图来显示每只狗狗的相关信息。

包含狗狗照片的 ImageView
包含狗狗名字的 TextView
包含狗狗年龄的 TextView
包含狗狗爱好的 TextView

您还会看到每个卡片上有一些样式，用以显示边框和阴影。这项操作由 MaterialCardView 处理，而后者已添加到入门级项目的布局文件中。每个 MaterialCardView 中都有一个 ConstraintLayout，您需要在其中添加其余的视图。

您需要使用两个 XML 文件来实现布局：使用 vertical_horizontal_list_item.xml 实现水平布局和垂直布局，使用 grid_list_item.xml 实现网格布局。

为垂直和水平列表构建布局。

打开 vertical_horizontal_list_item.xml，并在内部 ConstraintLayout 中构建与图片匹配的布局。

构建网格布局。

打开 grid_list_item.xml，并在内部 ConstraintLayout 中构建与图片匹配的布局。

实现适配器

定义布局后，下一项任务是实现 RecyclerView 适配器。在 adapter 软件包中打开 DogCardAdapter.kt。您会看到许多 TODO 注释，帮助解释您需要实现什么。

实现适配器需要五个步骤。

为狗狗数据列表定义变量或常量。您可以在名为 DataSource 的对象中的 data 软件包中找到该列表，如下所示：

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

dogs 属性的类型为 List<Dog>。Dog 类位于 model 软件包中，它定义了四个属性：一个图片（由资源 ID 表示）和三个 String 属性。

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

将您在 DogCardAdapter 中定义的变量设置为 DataSource 对象中的 dogs 列表。

实现 DogCardViewHolder。ViewHolder 应绑定需要为每个 Recycler 视图卡片设置的四个视图。grid_list_item 和 vertical_horizontal_list_item 布局将共用同一 ViewHolder，因为所有视图都在这两种布局之间共享。DogCardViewHolder 应包含以下视图 ID 的属性：dog_image、dog_name、dog_age 和 dog_hobbies。
在 onCreateViewHolder() 中，您需要膨胀 grid_list_item 或 vertical_horizontal_list_item 布局。如何知道要使用哪种布局？在适配器的定义中，您可以看到创建适配器实例时传入了一个名为 layout 类型为 Int 的值。

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

此值对应于 Layout 对象中定义的一个值，该对象位于 const 软件包中。

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

layout 的值可以是 1、2 或 3，但您可以根据 Layout 对象中的标识符 VERTICAL、HORIZONTAL 和 GRID 对其进行检查。

对于 GRID 布局，请膨胀 grid_list_item 布局；对于 HORIZONTAL 和 VERTICAL 布局，请膨胀 vertical_horizontal_list_item 布局。此方法应返回一个表示膨胀后布局的 DogCardViewHolder 实例。

实现 getItemCount() 以返回狗狗列表的长度。
最后，您需要实现 onBindViewHolder() 以在每个 Recycler 视图卡片中设置数据。使用 position 访问列表中的正确狗狗数据，并设置图片和狗狗名字。使用字符串资源 dog_age 和 dog_hobbies 正确设置狗狗年龄和爱好的格式。