เลย์เอาต์ Canonical

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

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

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

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

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

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

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

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

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

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

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

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

การใช้งาน

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

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

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

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

ตัวอย่างการใช้งาน 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: สร้างตัวนำทางเพื่อจัดการการนำทางระหว่างแผงรายการและแผงรายละเอียด
• listPane: แสดงรายการสินค้า
• detailPane: แสดงเนื้อหาของรายการที่เลือก

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

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

ฟีด

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

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

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

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

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

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

การใช้งาน

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

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

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

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

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

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

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

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

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

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

การใช้งาน

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

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

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

SupportingPaneScaffold เป็น Composable ระดับสูงที่ช่วยลดความซับซ้อนในการติดตั้งใช้งานเลย์เอาต์แผงสนับสนุน 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 ที่สร้างเครื่องมือนำทางเพื่อจัดการระดับการเข้าถึงแผง (เช่น การซ่อนหรือแสดงแผงสนับสนุนในหน้าจอขนาดกะทัดรัด)
• mainPane: Composable ที่แสดงเนื้อหาหลัก
• supportingPane: Composable ที่แสดงเนื้อหาเสริม

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

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

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

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