เลย์เอาต์ Canonical

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

ภาพอุปกรณ์ที่มีหน้าจอขนาดใหญ่ซึ่งแสดงเลย์เอาต์มาตรฐาน

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

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

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

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

ไวร์เฟรมของเลย์เอาต์รายละเอียดรายการ

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

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

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

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

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

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

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

รูปที่ 1. แอปรับส่งข้อความที่แสดงรายการการสนทนาและรายละเอียดของการสนทนาที่เลือก

การใช้งาน

กระบวนทัศน์เชิงประกาศของ 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: แสดงเนื้อหาของรายการที่เลือก

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

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

ฟีด

ไวร์เฟรมของเลย์เอาต์ฟีด

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

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

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

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

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

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

รูปที่ 2. แอปโซเชียลมีเดียที่แสดงโพสต์ในการ์ดขนาดต่างๆ

การใช้งาน

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

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

สำหรับส่วนหัว ตัวคั่น หรือรายการอื่นๆ ที่ออกแบบมาให้ใช้ความกว้างเต็มของฟีด ให้ใช้ 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

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

Wireframe ของเลย์เอาต์แผงสนับสนุน

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

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

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

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

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

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

รูปที่ 3. แอปช็อปปิ้งพร้อมคำอธิบายผลิตภัณฑ์ในบานหน้าต่างรอง

การใช้งาน

Compose supports window size class logic, which lets you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.

Hoist all state, including current window size class and information related to the data in the main content and supporting content.

For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@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

Key components in the example:

rememberSupportingPaneScaffoldNavigator: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
mainPane: Composable that displays the primary content
supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see:

Build a supporting pane layout developer guide
supporting-pane-compose sample

แหล่งข้อมูลเพิ่มเติม

Material Design — เลย์เอาต์ Canonical

การวางแนว สัดส่วนการแสดงผล และการปรับขนาดแอป

รองรับขนาดการแสดงผลที่ต่างกัน