เลย์เอาต์ Canonical

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

เลย์เอาต์ Canonical รองรับโทรศัพท์ที่มีหน้าจอขนาดเล็ก รวมถึงแท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS เลย์เอาต์เหล่านี้ได้มาจากคำแนะนำของ Material Design จึงมีความสวยงาม และใช้งานได้จริง

เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะที่ทำให้การติดตั้งใช้งานเลย์เอาต์เป็นเรื่องง่ายและเชื่อถือได้

เลย์เอาต์ Canonical สร้าง UI ที่น่าสนใจและช่วยเพิ่มประสิทธิภาพ ซึ่งเป็นรากฐานของแอปที่ยอดเยี่ยม

รายละเอียดรายการ

เลย์เอาต์รายละเอียดรายการช่วยให้ผู้ใช้สำรวจรายการที่มีคำอธิบาย ข้อมูลอธิบาย หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดรายการ

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

จอแสดงผลที่มีความกว้างแบบขยาย (ดู ใช้คลาสขนาดหน้าต่าง) จะแสดงทั้ง รายการและรายละเอียดพร้อมกัน การเลือกรายการในรายการจะอัปเดตบานหน้าต่างรายละเอียดเพื่อแสดงเนื้อหาที่เกี่ยวข้องกับรายการที่เลือก

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

การเปลี่ยนแปลงการกำหนดค่า เช่น การเปลี่ยนแปลงการวางแนวอุปกรณ์หรือการเปลี่ยนแปลงขนาดหน้าต่างแอป อาจเปลี่ยนคลาสขนาดหน้าต่างของจอแสดงผล เลย์เอาต์รายละเอียดรายการจะตอบสนองตามนั้น โดยรักษาสถานะของแอปไว้ดังนี้

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

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

การใช้งาน

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

ListDetailPaneScaffold is a high-level composable that simplifies the implementation of list-detail layouts. It automatically handles pane logic based on window size classes and supports navigation between panes.

Here is a minimal implementation using 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

The following are the key components in this example:

• rememberListDetailPaneScaffoldNavigator: Creates a navigator to manage navigation between the list and detail panes.
• listPane: Displays the list of items.
• detailPane: Displays the content of a selected item.

For detailed implementation examples, see:

• Build a list-detail layout developer guide
• list-detail-compose sample

ฟีด

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

ขนาดและตำแหน่งจะกำหนดความสัมพันธ์ระหว่างองค์ประกอบเนื้อหา

ระบบจะสร้างกลุ่มเนื้อหาโดยทำให้องค์ประกอบมีขนาดเท่ากันและวางไว้ด้วยกัน การทำให้องค์ประกอบมีขนาดใหญ่กว่าองค์ประกอบที่อยู่ใกล้เคียงจะดึงดูดความสนใจไปยังองค์ประกอบนั้น

การ์ดและรายการเป็นคอมโพเนนต์ทั่วไปของเลย์เอาต์ฟีด

เลย์เอาต์ฟีดรองรับจอแสดงผลเกือบทุกขนาด เนื่องจากตารางกริดสามารถปรับจากคอลัมน์เดียวแบบเลื่อนได้เป็นฟีดเนื้อหาแบบเลื่อนได้หลายคอลัมน์

ฟีดเหมาะอย่างยิ่งสำหรับแอปข่าวและแอปโซเชียลมีเดีย

การใช้งาน

A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.

For section headers, dividers, or other items designed to occupy the full width of the feed, use maxLineSpan to take up the full width of the layout.

On compact-width displays that don't have enough space to show more than one column, LazyVerticalGrid behaves just like a LazyColumn.

Here is a minimal implementation using 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

The key to an adaptive feed is the columns configuration. GridCells.Adaptive(minSize = 180.dp) creates a grid where each column is at least 180.dp wide. The grid then displays as many columns as can fit in the available space.

For an example implementation, see the Feed with Compose sample.

บานหน้าต่างรอง

เลย์เอาต์บานหน้าต่างรองจะจัดระเบียบเนื้อหาแอปเป็นพื้นที่แสดงผลหลักและพื้นที่แสดงผลรอง

พื้นที่แสดงผลหลักจะครอบครองพื้นที่ส่วนใหญ่ของหน้าต่างแอป (โดยปกติประมาณ 2 ใน 3) และมีเนื้อหาหลัก พื้นที่แสดงผลรองคือบานหน้าต่างที่ใช้พื้นที่ส่วนที่เหลือของหน้าต่างแอปและแสดงเนื้อหาที่รองรับเนื้อหาหลัก

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

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

กรณีการใช้งานสำหรับบานหน้าต่างรองมีดังนี้

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

การใช้งาน

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 — เลย์เอาต์ Canonical