使用android构建具有自适应布局的应用.pdf

使用 android 构建具有自适应布局的应用

1. 简介

也是第一步。如果您尚未学习构建具有动态导航栏的自适应应用 Codelab

（https://developer.android.google.cn/codelabs/basic-android-kotlin-compose-adaptiv

e-navigation-for-large-screens?hl=zh-cn#0），强烈建议您先回去学习该 Codelab。

在此 Codelab 中，您将基于之前所学的概念，在应用中进一步实现自适应布局。您

将实现的自适应布局是规范布局的一部分，规范布局是针对大屏幕设备的一系列常

用模式。您还将学习如何运用更多工具和测试技术来帮助快速构建强大的应用。

前提条件

 拥有在设备或模拟器上运行应用的经验

 拥有使用 WindowSizeClass API 的经验

学习内容



如何使用 Jetpack Compose 创建列表视图模式自适应布局



如何针对不同屏幕尺寸创建预览

 如何针对多种屏幕尺寸测试代码

构建内容



首先，请下载起始代码：

https://developer.android.google.cn/codelabs/basic-android-kotlin-compose-adaptive-c

ontent-for-large-screens?hl=zh_cn#0

或者，您也可以克隆该代码的 GitHub 代码库：

$ git clone

https://github.com/google-developer-training/basic-android-kotlin-compose-training-re

ply-app.git

$ cd basic-android-kotlin-compose-training-reply-app

$ git checkout nav-update

2. 不同屏幕尺寸的预览

之前，您只有一个支持紧凑屏幕的预览。您接下来将添加更多预览。

如需为中等屏幕和较大屏幕添加预览，请完成以下步骤：

1. 如需为中等屏幕添加预览，请在 Preview 注解形参中设置中等 widthDp 值，并

将 WindowWidthSizeClass.Medium 值指定为 ReplyApp 可组合项的形参。

MainActivity.kt

...

@Preview(showBackground = true, widthDp = 700)

@Composable

fun ReplyAppMediumPreview() {

ReplyTheme {

2. 如 需 再 为 较 大 屏 幕 添 加 一 个 预 览 ， 请 在 Preview 注 解 形 参 中 设 置 较 大

的 widthDp 值，并将 WindowWidthSizeClass.Expanded 值指定为 ReplyApp 可组合

项的形参。

MainActivity.kt

...

@Preview(showBackground = true, widthDp = 1000)

@Composable

fun ReplyAppExpandedPreview() {

ReplyTheme {

Surface {

列表-详情视图简介

您可以通过应用任一规范布局来改进此布局。规范布局是大屏幕组合，可作为设计

和实现的起点。您可以使用三种可用布局来指导如何组织应用中的常见元素，包括

列表视图、支持面板和信息流。每种布局都会考虑常见的用例和组件，以满足用户

对于应用如何适应不同屏幕尺寸和划分点的期望与需求。

对于 Reply 应用，请实现列表-详情视图，因为它最适合用于浏览内容和快速查看

详情。当使用列表-详情视图布局时，您将在电子邮件列表屏幕旁边创建另一个窗格

以显示电子邮件详情。利用这种布局，您可以使用可用屏幕向用户显示更多信息，

并提高应用的效率。

实现列表-详情视图