项目: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 项构建布局,并实现适配器,从而以三种方式呈现狗狗的列表:水平滚动、垂直滚动和垂直滚动网格布局。

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

9e1186e8d2cff595.png

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

dc2852940d6994e7.png

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

b959082c9491381d.png

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

438b19a77ecfaaba.png

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

3. 开始

下载项目代码

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

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

1e4c0d2c081a8fd2.png

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

1debcf330fd04c7b.png

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

在 Android Studio 中打开项目

  1. 启动 Android Studio。
  2. Welcome to Android Studio 窗口中,点击 Open

d8e9dbdeafe9038a.png

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

8d1fda7396afe8e5.png

  1. 在文件浏览器中,转到解压缩的项目文件夹所在的位置(很可能在 Downloads 文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击 Run 按钮 8de56cba7583251f.png 以构建并运行应用。请确保该应用按预期构建。

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

c181caccdddc5c2e.png

实现布局

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

  1. 包含狗狗照片的 ImageView
  2. 包含狗狗名字的 TextView
  3. 包含狗狗年龄的 TextView
  4. 包含狗狗爱好的 TextView

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

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

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

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

6464da5b34a739ed.png

  1. 构建网格布局。

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

dfa4b5f0acda0ec6.png

实现适配器

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

1bd9c8014cd1070e.png

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

  1. 为狗狗数据列表定义变量或常量。您可以在名为 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 列表。

  1. 实现 DogCardViewHolder。ViewHolder 应绑定需要为每个 Recycler 视图卡片设置的四个视图。grid_list_itemvertical_horizontal_list_item 布局将共用同一 ViewHolder,因为所有视图都在这两种布局之间共享。DogCardViewHolder 应包含以下视图 ID 的属性:dog_imagedog_namedog_agedog_hobbies
  2. onCreateViewHolder() 中,您需要膨胀 grid_list_itemvertical_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 对象中的标识符 VERTICALHORIZONTALGRID 对其进行检查。

对于 GRID 布局,请膨胀 grid_list_item 布局;对于 HORIZONTALVERTICAL 布局,请膨胀 vertical_horizontal_list_item 布局。此方法应返回一个表示膨胀后布局的 DogCardViewHolder 实例。

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

完成适配器的实现后,在模拟器上运行您的应用,验证是否正确实现了所有代码。

4. 测试应用

Dogglers 项目包含一个带有多个测试用例的“androidTest”目标。

5a6691e43e85409d.png

运行测试

如需运行测试,您可以执行以下任一操作:

对于单个测试用例,打开测试用例类,并点击类声明左侧的绿色箭头。然后,从菜单中选择“Run”选项。这样会运行测试用例中的所有测试。

a2be071431d93972.png

经常会有您只想运行单个测试的情况,例如,有一个测试失败,而其他测试都通过。您可以像运行整个测试用例一样运行单个测试。点击绿色箭头并选择 Run 选项。

4dbc8422f9d3551.png

如果您有多个测试用例,也可以运行整个测试套件。就像运行应用一样,您可以在 Run 菜单中找到此选项。

be4b7b8805335082.png

请注意,Android Studio 默认运行您运行的最后一个目标(应用目标、测试目标等),因此如果菜单仍然显示 Run > Run ‘app',您可以通过选择 Run > Run 运行测试目标。

6d0de7b74787e91.png

然后从弹出式菜单中选择测试目标。

c0d58fc64ea5c33d.png

运行测试的结果显示在 Run 标签页中。在左侧的窗格中,您会看到失败测试的列表(如果有)。如果测试失败,其函数名称旁边会显示红色感叹号。如果测试通过,其函数名称旁边会显示绿色对勾标记。

5c90c852965bbc3f.png

如果测试失败,文本输出会提供相关信息,帮助您修复导致测试失败的问题。

31167a1fa7383f46.png

例如,在上述错误消息中,测试会检查是否显示了包含“Nox”一词的字符串。但是,测试失败了。找不到该文本,这意味着它可能尚未显示。