เลย์เอาต์ Canonical

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

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

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

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

列表详情

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

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

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

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

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

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

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

实现

กระบวนทัศน์เชิงประกาศของ Compose รองรับตรรกะคลาสขนาดหน้าต่างที่กำหนดว่าจะแสดงบานหน้าต่างรายการและรายละเอียดพร้อมกันหรือไม่ (เมื่อคลาสขนาดหน้าต่างความกว้างขยาย) หรือแสดงเฉพาะบานหน้าต่างรายการหรือรายละเอียด (เมื่อคลาสขนาดหน้าต่างความกว้างเป็นขนาดกลางหรือกะทัดรัด)

หากต้องการให้โฟลว์ข้อมูลเป็นแบบทางเดียว ให้ยกสถานะทั้งหมด รวมถึงคลาสขนาดหน้าต่างปัจจุบันและรายละเอียดของรายการที่เลือก (หากมี) เพื่อให้ Composable ทั้งหมดเข้าถึงข้อมูลและแสดงผลได้อย่างถูกต้อง

เมื่อแสดงเฉพาะแผงรายละเอียดในขนาดหน้าต่างเล็ก ให้เพิ่ม BackHandler เพื่อนำแผงรายละเอียดออกและแสดงเฉพาะแผงรายการ BackHandler ไม่ได้เป็นส่วนหนึ่งของการนำทางโดยรวมของแอป เนื่องจากตัวแฮนเดิลขึ้นอยู่กับคลาสขนาดหน้าต่างและสถานะรายละเอียดที่เลือก

ListDetailPaneScaffold เป็นคอมโพสเซเบิลระดับสูงที่ช่วยลดความซับซ้อนในการติดตั้งใช้งานเลย์เอาต์แบบรายละเอียดรายการ โดยจะจัดการตรรกะของบานหน้าต่างโดยอัตโนมัติตามคลาสขนาดหน้าต่าง และรองรับการไปยังมาระหว่างบานหน้าต่าง

ตัวอย่างการใช้งานขั้นต่ำโดยใช้ ListDetailPaneScaffold มีดังนี้

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

องค์ประกอบหลักในตัวอย่างนี้มีดังนี้

• rememberListDetailPaneScaffoldNavigator: สร้าง Navigator เพื่อ จัดการการนำทางระหว่างแผงรายการและแผงรายละเอียด
• listPane: แสดงรายการสินค้า
• detailPane: แสดงเนื้อหาของรายการที่เลือก

ดูตัวอย่างการติดตั้งใช้งานโดยละเอียดได้ที่

• คู่มือนักพัฒนาแอปสร้างเลย์เอาต์รายละเอียดรายการ
• ตัวอย่าง รายละเอียดรายการ

信息流

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

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

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

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

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

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

实现

ฟีดประกอบด้วยองค์ประกอบเนื้อหาจำนวนมากในคอนเทนเนอร์ที่เลื่อนขึ้นลงได้ ซึ่งจัดวางในตารางกริด รายการแบบเลื่อนแสดงผลรายการจำนวนมากในคอลัมน์หรือแถวอย่างมีประสิทธิภาพ กริดแบบเลซีแสดงผลรายการในกริด โดยรองรับ การกำหนดค่าขนาดและช่วงของรายการ

กำหนดค่าคอลัมน์ของเลย์เอาต์ตารางกริดตามพื้นที่แสดงผลที่มีอยู่เพื่อ ตั้งค่าความกว้างขั้นต่ำที่อนุญาตสำหรับรายการตารางกริด เมื่อกำหนดรายการตารางกริด ให้ปรับ ช่วงคอลัมน์เพื่อเน้นบางรายการมากกว่ารายการอื่นๆ

สำหรับส่วนหัว ตัวคั่น หรือรายการอื่นๆ ที่ออกแบบมาให้ใช้ความกว้างเต็มของฟีด ให้ใช้ maxLineSpan เพื่อใช้ความกว้างเต็มของเลย์เอาต์

ในจอแสดงผลที่มีความกะทัดรัดซึ่งมีพื้นที่ไม่เพียงพอที่จะแสดงมากกว่า 1 คอลัมน์ 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)
        }
    }
}
CanonicalLayoutSamples.kt

กุญแจสำคัญของฟีดที่ปรับเปลี่ยนได้คือcolumnsการกำหนดค่า GridCells.Adaptive(minSize = 180.dp) สร้างตารางกริดที่แต่ละคอลัมน์มีความกว้างอย่างน้อย 180.dp จากนั้นตารางกริดจะแสดงคอลัมน์ให้มากที่สุดเท่าที่จะพอดีกับพื้นที่ว่าง

ดูตัวอย่างการใช้งานได้ที่ตัวอย่างฟีดที่มี Compose

辅助窗格

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

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

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

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

辅助窗格的用例包括：

• 效率应用：在辅助窗格中附有评价者所发表 评论的文档或电子表格
• 媒体应用：在辅助窗格中显示流式视频和相关视频列表，或附有播放列表的音乐专辑说明
• 工具和设置：在辅助窗格中显示调色板、效果和其他设置的媒体编辑工具

实现

Compose รองรับตรรกะคลาสขนาดหน้าต่าง ซึ่งช่วยให้คุณกำหนดได้ว่าจะแสดงทั้งเนื้อหาหลักและเนื้อหาสนับสนุนพร้อมกันหรือจะวางเนื้อหาสนับสนุนไว้ในตำแหน่งอื่น

ยกเลิกการซ่อนสถานะทั้งหมด รวมถึงคลาสขนาดหน้าต่างปัจจุบันและข้อมูลที่เกี่ยวข้องกับ ข้อมูลในเนื้อหาหลักและเนื้อหาสนับสนุน

สำหรับจอแสดงผลที่มีความกว้างแบบกะทัดรัด ให้วางเนื้อหาสนับสนุนไว้ใต้เนื้อหาหลัก หรือภายใน Bottom Sheet สำหรับความกว้างขนาดกลางและแบบขยาย ให้วางเนื้อหาที่รองรับไว้ข้างเนื้อหาหลัก โดยปรับขนาดให้เหมาะสมตามเนื้อหาและพื้นที่ว่าง สำหรับความกว้างปานกลาง ให้แบ่งพื้นที่แสดงผลเท่าๆ กันระหว่าง เนื้อหาหลักและเนื้อหาสนับสนุน สำหรับความกว้างที่ขยาย ให้จัดสรรพื้นที่ 70% สำหรับ เนื้อหาหลัก และ 30% สำหรับเนื้อหาสนับสนุน

SupportingPaneScaffold เป็นฟังก์ชันที่สามารถคอมโพสได้ระดับสูงซึ่งช่วยลดความซับซ้อนในการ ติดตั้งใช้งานเลย์เอาต์แผงสนับสนุน Composable จะจัดการตรรกะของแผงโดยอัตโนมัติตามคลาสขนาดหน้าต่าง โดยจะแสดงแผงแบบเคียงข้างกันบนหน้าจอขนาดใหญ่ หรือซ่อนแผงสนับสนุนบนหน้าจอขนาดเล็ก 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
        }
    )
}
CanonicalLayoutSamples.kt

• rememberSupportingPaneScaffoldNavigator: Composable ที่สร้าง Navigator เพื่อจัดการระดับการแสดงผลของแผง (เช่น การซ่อนหรือแสดงแผงสนับสนุนในหน้าจอขนาดกะทัดรัด)
• mainPane: Composable ที่แสดงเนื้อหาหลัก
• supportingPane: Composable ที่แสดงเนื้อหาเสริม

ดูตัวอย่างการติดตั้งใช้งานโดยละเอียดได้ที่

• คู่มือนักพัฒนาแอปสร้างเลย์เอาต์แผงสนับสนุน
• ตัวอย่าง supporting-pane-compose

其他资源

• Material Design：规范化布局