实践：构建体育应用

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. 获取解决方案代码

要下载完成的 Codelab 代码，可以使用此 git 命令

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

或者，您也可以将仓库下载为 zip 文件，解压后在 Android Studio 中打开。

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