เลย์เอาต์ Canonical

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้งาน

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

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

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

ฟีด

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

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

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

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

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

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

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

รูปที่ 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

แผงสนับสนุน

โครงร่างเลย์เอาต์ของแผงสนับสนุน

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

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

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

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

กรณีการใช้งานสำหรับแผงสนับสนุนมีดังนี้

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

รูปที่ 3 แอป Shopping ที่มีรายละเอียดผลิตภัณฑ์ในแผงที่รองรับ

การใช้งาน

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

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

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

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

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