เลย์เอาต์ 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 รองรับตรรกะคลาสขนาดหน้าต่าง ซึ่งช่วยให้คุณกำหนดได้ว่าจะแสดงทั้งเนื้อหาหลักและเนื้อหาสนับสนุนพร้อมกันหรือจะวางเนื้อหาสนับสนุนไว้ในตำแหน่งอื่น

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

สำหรับจอแสดงผลที่มีความกว้างแบบกะทัดรัด ให้วางเนื้อหาสนับสนุนไว้ใต้เนื้อหาหลัก หรือภายใน 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

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

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