项目:Dogglers 应用

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

前提条件

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

构建内容

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

所需条件

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

欢迎参与“项目:Dogglers 应用”!

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

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

adf6ec8cce8cc655.png

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

51045288de047217.png

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

ce534bc07ecba432.png

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

6dac0c59577f6fbb.png

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

下载项目代码

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

如需获取此 Codelab 的代码并在 Android Studio 中打开它,请执行以下操作。

获取代码

  1. 点击提供的网址。此时,项目的 GitHub 页面会在浏览器中打开。
  2. 在项目的 GitHub 页面上,点击 Code 按钮,以打开一个对话框。

5b0a76c50478a73f.png

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

在 Android Studio 中打开项目

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

36cc44fcf0f89a1d.png

注意:如果 Android Studio 已经打开,请依次选择 File > New > Import Project 菜单选项。

21f3eec988dcfbe9.png

  1. Import Project 对话框中,转到解压缩的项目文件夹所在的位置(可能在 Downloads 文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击 Run 按钮 11c34fc5e516fb1c.png 以构建并运行应用。请确保该应用可以正常使用。
  5. Project 工具窗口中浏览项目文件,了解应用的设置方式。

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

93c2c1fee50a493b.png

实现布局

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

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

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

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

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

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

73a663ae61811a4b.png

  1. 构建网格布局。

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

50dd020683b63b1a.png

实现适配器

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

3192d25f55b403bc.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 布局,请膨胀 horizontal_vertical_list_item 布局。此方法应返回一个表示膨胀后布局的 DogCardViewHolder 实例。

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

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

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

583b42ccd1e5b22.png

运行测试

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

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

a32317d35c77142b.png

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

ac6244434cfafb60.png

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

7a925c5e196725bb.png

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

ee1e227446c536fe.png

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

d570c947769db65c.png

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

6d68f2bf589501ae.png

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

63f37b6428781c02.png

例如,在上述错误消息中,测试检查 TextView 是否有使用特定字符串资源。但是,测试失败了。“Expected”和“Got”后面的文本不一致,也就是说,测试预期的值与从正在运行的应用中获取的值不一致。

我们非常期待收到您对此项目的反馈意见。请填写这份简短的调查问卷,向我们提供反馈 - 您的反馈将有助于指导我们将来为本课程创建项目。