练习:构建两栖动物应用

1. 开始之前

简介

在本单元中,您学习了如何通过从互联网检索数据来将您的应用提升到一个新的水平。您的应用现在可以显示服务器上可用的最新数据,并且不受您打开应用时静态可用数据的限制。这在大多数现实世界的应用中都是非常重要的功能。

在本练习集中,您将运用所学概念创建一个两栖动物应用。此应用将从互联网检索两栖动物数据,并将其显示在滚动列表中。

解决方案代码在最后提供。为了充分利用此学习体验,请尝试尽可能多地实现和解决问题,然后再查看提供的解决方案代码。在动手实践的过程中,您将学到最多。

先决条件

您需要什么

  • 一台连接互联网并安装了 Android Studio 的电脑。

您将构建什么

在本练习集中,您将构建一个应用来显示两栖动物列表,以及它们的详细信息和图像。数据通过发出网络请求从互联网检索,并包含每个两栖动物的名称、类型、描述和图像 URL。

两栖动物 JSON 数据托管在 https://android-kotlin-fun-mars-server.appspot.com/amphibians

提供的解决方案代码显示以下 UI 设计

b0e225571b16ffb.png

以下部分提供了创建应用的一般步骤。您不需要严格遵循它们,但它们可以帮助您顺利进行。

2. 计划应用

在开始编码之前,花一些时间勾勒出应用的不同元素以及它们如何相互连接。

进行这些准备工作有助于确定您需要做什么,可能表明您可能会遇到哪些问题,并帮助您思考解决问题的方法。

3. 创建新项目

在 Android Studio 中创建一个新项目

  1. 打开 Android Studio 并选择“新建项目”。
  2. 在“模板”下,选择“手机和平板电脑”。
  3. 选择“空活动”并点击“下一步”。
  4. 将名称更改为“Amphibians”。
  5. 点击“完成”。

现在您可以开始编码了!

4. 设置依赖项

此应用使用 Retrofit 进行网络请求,使用 Coil 加载图像,并使用 kotlinx.serialization 库解析两栖动物 API 返回的 JSON。

将它们的依赖项添加到 app/build.gradle.kts 中。

5. 创建 UI 层

建议您遵循 Android 应用架构 最佳实践,并为此应用创建一个 UI 层。

此层包含 ViewModel 和可组合函数,这些函数在屏幕上显示来自 ViewModelUiStateViewModel 负责公开屏幕 UI 状态,并处理 UI 层中的业务逻辑,以及调用层次结构中其他层中的业务逻辑。

UI 层 还包含用户看到和交互的视觉元素。在此层中,您决定各种元素如何组合在一起以创建您设想的 UI。您正在决定颜色、字体以及如何显示图像。

6. 创建数据层

数据层负责从 API 检索两栖动物数据。

您可能希望为两栖动物数据包含一个数据类,一个用于管理数据的存储库,以及一个用于从网络检索数据的 数据源类。

如果您需要一些帮助来进行网络调用,您可以参考 Web 服务和 Retrofit(来自 从互联网获取数据 代码实验室)。

有关解析网络响应的帮助,请参考 使用 kotlinx.serialization 解析 JSON 响应

有关使用 Coil 加载图像,您可以查看 官方文档 或参考 显示已下载的图像 部分(来自 从互联网加载和显示图像 代码实验室)。

7. 实现依赖项注入

您应该使用 依赖项注入 (DI) 来保持应用的灵活性和健壮性,并使其能够扩展。

DI 使应用组件保持松散耦合,并更容易进行测试。

在实现 DI 时,您需要创建一个 应用程序容器,用于获取应用所需的依赖项。

应用程序容器需要对整个应用程序可用。您可以通过在自定义 Application 类中保存依赖项容器来实现此目的。然后,此类继承自 Application

如果您需要帮助来实现此功能

8. 解决方案代码