פריסות קנוניות

规范化布局是经过验证的通用型布局，可在各种规格的设备上提供最佳用户体验。

描绘了显示规范化布局的各种大屏设备。

规范化布局既支持小屏幕的手机，也支持平板电脑、可折叠设备和 ChromeOS 设备。此类布局遵循 Material Design 指南，不仅十分美观 ，而且功能强大。

Android 框架包含专门的组件，让您可以使用 View 和 Jetpack Compose 方便而可靠地实现此类布局。

借助规范化布局，您可以构建出引人注目且能提高效率的界面，为打造优秀的应用奠定基础。

列表详情

列表-详情布局的线框图。

借助列表详情布局，用户可以浏览包含描述性、解释性或其他补充信息（即“项详情”）的项列表。

该布局可将应用窗口分为两个并排显示的窗格：一个用于显示列表，另一个用于显示详情。用户从列表中选择要查看的项，即可显示对应的项详情。详情中的深层链接可以在详情窗格中显示更多内容。

较大宽度的显示屏（请参阅使用窗口大小类别）可同时容纳 列表和详情。选择列表项后，详情窗格会更新，以显示所选项的相关内容。

中等宽度和紧凑宽度的显示屏可以显示列表或详情，具体取决于用户与应用的互动。如果只显示列表，当用户选择某个列表项时，对应的详情便会取代列表进行显示。如果只显示详情，当用户按返回按钮时，系统会重新显示列表。

配置更改（例如设备屏幕方向更改或应用窗口大小更改）可能会更改显示屏的窗口大小类别。列表详情布局会相应地做出响应，同时保留应用状态：

  • 如果展开宽度的显示屏同时显示列表窗格和详情窗格，然后收窄为中等宽度或紧凑宽度，则详情窗格仍会显示，而列表窗格会变为隐藏状态
  • 如果中等宽度或紧凑宽度的显示屏先只显示“详细信息”窗格，然后窗口大小类别展开为较大宽度，则列表和详情会一起显示，并且列表会指明与“详细信息”窗格中的内容对应的项已被选中
  • 如果中等宽度或较小宽度的屏幕先只显示列表窗格，然后展开为较大宽度，则列表和占位符详情窗格会一起显示

列表详情布局非常适合即时通讯应用、通讯录管理器、互动 媒体浏览器或内容可整理为 项列表（用于显示额外信息）的任何应用。

图 1. 显示对话列表和所选对话的详情的即时通讯应用。

实现

הפרדיגמה הדקלרטיבית של Compose תומכת בלוגיקה של מחלקת גודל החלון שקובעת אם להציג את חלוניות הרשימה והפרטים בו-זמנית (כשהרוחב של מחלקת גודל החלון מורחב) או רק את חלונית הרשימה או הפרטים (כשהרוחב של מחלקת גודל החלון הוא בינוני או קומפקטי).

כדי להבטיח זרימת נתונים חד-כיוונית, מעבירים את כל המצב, כולל פרטים על גודל החלון הנוכחי ופרטים על הפריט שנבחר ברשימה (אם יש כזה), כך שלכל הפונקציות הניתנות להרכבה תהיה גישה לנתונים והן יוכלו לבצע רינדור בצורה תקינה.

כשמציגים רק את חלונית הפרטים בגדלים קטנים של חלונות, מוסיפים BackHandler כדי להסיר את חלונית הפרטים ולהציג רק את חלונית הרשימה. ה-BackHandler לא מהווה חלק מהניווט הכולל באפליקציה, כי ה-handler תלוי במחלקה של גודל החלון ובמצב הפרטים שנבחרו.

‫ListDetailPaneScaffold הוא רכיב הניתן להרכבה ברמה גבוהה, שמפשט את ההטמעה של פריסות עם רשימה ופרטים. הוא מטפל אוטומטית בלוגיקה של החלונית על סמך סיווגים של גודל החלון, ותומך בניווט בין חלוניות.

הנה הטמעה מינימלית באמצעות ListDetailPaneScaffold:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

הרכיבים העיקריים בדוגמה הזו הם:

  • ‫rememberListDetailPaneScaffoldNavigator: יוצר רכיב ניווט לניהול הניווט בין חלוניות הרשימה והפרטים.
  • ‫listPane: הצגת רשימת הפריטים.
  • ‫detailPane: הצגת התוכן של פריט נבחר.

דוגמאות מפורטות להטמעה זמינות במאמרים הבאים:

信息流

Feed 布局的线框图。

Feed 布局能够以可配置网格的形式排列等效的内容元素，以便用户快速、方便地查看大量内容。

内容元素之间的关系由大小和位置确定。

如要创建内容组，可以将相关元素设置为相同的大小，并将这些元素放置到一起。如要吸引用户注意某个元素，可以将其设置为比附近的元素大。

卡片和列表是 Feed 布局的常见组件。

Feed 布局支持几乎任何尺寸的显示屏，因为网格可从滚动的单列调整为滚动的多列内容 Feed。

Feed 尤其适用于 新闻和社交媒体应用。

图 2. 以各种大小的卡片显示帖子的社交媒体应用。

实现

פיד מורכב ממספר גדול של רכיבי תוכן במיכל עם גלילה אנכית, שמוצגים בפריסה של רשת. רשימות עצלניות מאפשרות לעבד ביעילות מספר גדול של פריטים בעמודות או בשורות. Lazy grids מעבדים פריטים בטבלאות, ותומכים בהגדרת הגדלים והטווחים של הפריטים.

הגדרת העמודות של פריסת הרשת על סמך אזור התצוגה הזמין כדי להגדיר את הרוחב המינימלי המותר לפריטים ברשת. כשמגדירים פריטים ברשת, אפשר לשנות את מספר העמודות שהפריטים תופסים כדי להבליט פריטים מסוימים יותר מאחרים.

כדי שפריטים כמו כותרות של קטעים, קווים להפרדה או פריטים אחרים שנועדו לתפוס את כל הרוחב של הפיד יתפסו את כל הרוחב של הפריסה, צריך להשתמש ב-maxLineSpan.

במסכים צרים שאין בהם מספיק מקום להצגת יותר מעמודה אחת, התג LazyVerticalGrid מתנהג בדיוק כמו התג LazyColumn.

הנה הטמעה מינימלית באמצעות LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

הסוד לפיד שמותאם לצרכים שלכם הוא ההגדרה columns. ‫GridCells.Adaptive(minSize = 180.dp) יוצר רשת שבה כל עמודה היא ברוחב של לפחות 180.dp. לאחר מכן, הרשת תציג כמה עמודות שאפשר להציג במקום הפנוי.

דוגמה להטמעה מופיעה בדוגמה של פיד עם Compose.

辅助窗格

辅助窗格布局的线框图。

辅助窗格布局会按主要显示区域和辅助显示区域来整理应用内容。

主要显示区域占据应用窗口的大部分区域（通常占据三分之二左右），并且包含主要内容。辅助显示区域是一个窗格，它占据应用窗口的其余区域，并会展示主要内容的辅助性内容。

辅助窗格布局在采用横屏模式的较大宽度显示屏（请参阅使用窗口大小类别）上效果出众。在以下情况下，中等宽度或紧凑宽度的显示屏支持同时显示主要显示区域和辅助显示区域：内容可适应狭窄的显示空间，或者附加内容最初可隐藏在底部或侧边动作条（可通过菜单或按钮等控件访问）中。

主要内容和辅助内容之间的关系是辅助窗格布局与列表详情布局的区别所在。辅助窗格内容只在与主要内容相关时才有用；例如，如果单独使用，辅助窗格工具窗口则没有意义。但是，即使没有主要内容，列表详情布局的详情窗格中的补充内容仍然有意义；例如，商品详情中的商品说明。

辅助窗格的用例包括：

图 3. 在辅助窗格中显示商品说明的购物应用。

实现

Compose 支持窗口大小类别逻辑，可用于确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和较大宽度的显示屏，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一种高级可组合项，可简化对辅助窗格布局的实现。该可组合函数会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持窗格之间的导航。

以下是最低限度的实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：用于创建导航器以管理窗格可见性（例如，在紧凑型屏幕上隐藏或显示支持窗格）的可组合函数
  • mainPane：用于显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

其他资源