实践：构建体育应用程序

1. 开始之前

恭喜！在本学习路径中，您学习了如何使用 WindowWidthSize 类和规范布局使您的应用程序适应不同屏幕尺寸。现在是时候将您学到的知识付诸实践了。

在本实践集中，您将通过创建一个体育应用程序，基于在本学习路径中学习的概念进行构建。初始应用程序在移动布局上完全可用。您的任务是使其适应大屏幕。

解决方案代码在最后提供，但请尝试在查看解决方案代码之前解决练习。按照您舒适的速度解决问题。练习中提供了预计时间，但您不必严格遵守这些时间，因为它们只是估计。建议您花足够的时间仔细思考并解决每个问题。

先决条件

您需要什么

  • 具有互联网接入和已安装 Android Studio 的计算机
  • 访问 GitHub

您将构建什么

一个适应大屏幕的体育应用程序。完成的应用程序看起来像下面的图片

1ce365f97570965e.png

2. 开始

下载初始代码

在 Android Studio 中，打开 basic-android-kotlin-compose-training-sports 文件夹。

3. 规划体育应用程序适应大屏幕

要使体育应用程序适应大屏幕，您首先需要确定最适合在大屏幕上显示应用程序的布局类型。

  1. 开始查看在紧凑屏幕尺寸下可用的当前布局。有两个屏幕 - 列表屏幕，对应于 SportsList 可组合函数，和详细信息屏幕，对应于 SportsDetail 可组合函数。

  1. 查看 规范布局，以确定最适合体育应用程序用例的布局。
  2. 草拟可能的扩展屏幕布局。使用简单的视觉设计软件或一张纸来可视化屏幕在扩展布局中的组合方式。

bb59e5ec7da56f7a.png

4. 在代码中创建扩展屏幕

现在您已经清楚地了解了扩展布局的外观，让我们将其转换为代码。

  1. 为扩展屏幕创建一个可组合函数，该函数显示列表和详细信息屏幕。您可以将其命名为 SportsListAndDetails 并将其放置在 SportsScreens.kt 文件中。
  2. 创建一个可组合函数预览，以简化对 SportsListAndDetails 可组合函数的 UI 验证。

678504d0ec535896.png

  1. 确保后退按钮的行为适合扩展屏幕。当用户按下后退按钮时，您希望他们在主屏幕出现时退出应用程序。您可以通过将适当的 lambda 传递给 SportsDetails 可组合函数来更改此行为。提示：您可以从 (LocalContext.current as Activity) 访问应用程序的 Activity。

5. 使应用程序根据窗口大小更改布局

要将扩展屏幕可组合函数添加到应用程序，请完成以下任务

  1. 将 androidx.compose.material3:material3-window-size-class 添加到应用程序的 build.gradle.kts。
  2. 在 MainActivity 中计算 windowSizeClass，并将 widthSizeClass 传递给 SportsApp 可组合函数。
  3. 创建一个名为 utils 的新目录，并在其中创建一个名为 WindowStateUtils.kt 的新文件。
  4. 在 WindowStateUtils 中添加一个 enum 类，以表示两种不同的 contentType。您可以将它们命名为 ListOnly 和 ListAndDetail 类型。
  5. 在 SportsApp 可组合函数中，根据 widthSizeClass 确定 contentType。
  6. 当 contentType 为 ListAndDetail 时显示 SportsListAndDetails 可组合函数，并在 contentType 为 ListOnly 时保持之前的行为。
  7. 对于 SportsAppBar 可组合函数，更改行为，以便在列表页面上的屏幕扩展时，后退按钮不出现，应用程序栏显示 Sports。
  8. 使用可调整大小的模拟器验证紧凑屏幕和扩展屏幕的 UI 和导航功能。

6. 获取解决方案代码

要下载完成的代码实验室的代码，可以使用以下 git 命令

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

或者，您可以将存储库下载为 zip 文件，将其解压缩并在 Android Studio 中打开。

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