เลย์เอาต์แคนอนิกเป็นเลย์เอาต์ที่ผ่านการพิสูจน์แล้วว่าใช้งานได้หลากหลายรูปแบบ ซึ่งมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ในอุปกรณ์รูปแบบต่างๆ
รูปแบบ Canonical รองรับโทรศัพท์ที่มีหน้าจอขนาดเล็ก รวมถึงแท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS เลย์เอาต์นี้มาจากคำแนะนำเกี่ยวกับ Material Design จึงมีความสุนทรียภาพและใช้งานได้จริง
เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะทางที่ทำให้การใช้เลย์เอาต์เป็นเรื่องง่ายและเชื่อถือได้
เลย์เอาต์ตามหลักเกณฑ์จะสร้าง UI ที่น่าสนใจและเพิ่มประสิทธิภาพการทำงาน ซึ่งจะเป็นรากฐานของแอปที่ยอดเยี่ยม
รายละเอียดรายการ
เลย์เอาต์รายการแบบละเอียดช่วยให้ผู้ใช้สำรวจรายการที่มีรายละเอียดอธิบาย อธิบาย หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดของรายการ
เลย์เอาต์จะแบ่งหน้าต่างแอปออกเป็น 2 แผงข้างเคียงกัน โดย 1 แผงสำหรับรายการ และอีก 1 แผงสำหรับรายละเอียด ผู้ใช้เลือกสินค้าจากรายการเพื่อแสดงรายละเอียดสินค้า Deep Link ในรายละเอียดจะแสดงเนื้อหาเพิ่มเติมในแผงรายละเอียด
การแสดงผลแบบขยายความกว้าง (ดูใช้ Window Size Classes) จะรองรับทั้งรายการและรายละเอียดพร้อมกัน การเลือกรายการในรายการจะอัปเดตแผงรายละเอียดเพื่อแสดงเนื้อหาที่เกี่ยวข้องสำหรับรายการที่เลือก
จอแสดงผลขนาดกลางและกะทัดรัดจะแสดงรายการหรือรายละเอียด ทั้งนี้ขึ้นอยู่กับการโต้ตอบของผู้ใช้กับแอป เมื่อมองเห็นเฉพาะรายการ การเลือกรายการในรายการจะแสดงรายละเอียดแทนรายการ เมื่อแสดงเฉพาะรายละเอียด การกดปุ่มย้อนกลับจะแสดงรายการอีกครั้ง
การเปลี่ยนแปลงการกำหนดค่า เช่น การเปลี่ยนแปลงการวางแนวของอุปกรณ์หรือการเปลี่ยนแปลงขนาดหน้าต่างของแอป อาจเปลี่ยนคลาสขนาดหน้าต่างของจอแสดงผล เลย์เอาต์รายละเอียดรายการจะ ตอบสนองตามนั้นโดยคงสถานะของแอปไว้ดังนี้
- หากการแสดงผลแบบขยายความกว้างซึ่งแสดงทั้งแผงรายการและแผงรายละเอียดแคบลงเป็นขนาดกลางหรือกะทัดรัด แผงรายละเอียดจะยังคงปรากฏอยู่และแผงรายการจะซ่อนอยู่
- หากจอแสดงผลขนาดกลางหรือกะทัดรัดมีเพียงแผงรายละเอียดที่มองเห็นได้ และคลาสขนาดหน้าต่างขยายกว้างขึ้นเพื่อขยาย รายการและรายละเอียดจะแสดงด้วยกัน และรายการจะระบุว่ามีการเลือกรายการที่เกี่ยวข้องกับเนื้อหาในแผงรายละเอียด
- หากจอแสดงผลขนาดกลางหรือกะทัดรัดแสดงเฉพาะแผงรายการและขยายให้กว้างขึ้น รายการและแผงรายละเอียดตัวยึดตำแหน่งจะแสดงร่วมกัน
รายละเอียดรายการเหมาะสําหรับแอปรับส่งข้อความ เครื่องมือจัดการรายชื่อติดต่อ โปรแกรมเรียกดูไฟล์ หรือแอปใดก็ตามที่เนื้อหาสามารถจัดระเบียบเป็นรายการรายการที่แสดงข้อมูลเพิ่มเติม
การใช้งาน
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 Compose 构建列表详情示例。
ฟีด
เลย์เอาต์ฟีดจะจัดองค์ประกอบเนื้อหาที่เท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและง่ายดาย
ขนาดและตําแหน่งจะสร้างความสัมพันธ์ระหว่างองค์ประกอบเนื้อหา
กลุ่มเนื้อหาสร้างขึ้นโดยทำให้องค์ประกอบมีขนาดเท่ากันและวางไว้ด้วยกัน ดึงดูดความสนใจไปยังองค์ประกอบต่างๆ ด้วยการทําให้องค์ประกอบเหล่านั้นมีขนาดใหญ่กว่าองค์ประกอบที่อยู่ใกล้เคียง
การ์ดและรายการเป็นองค์ประกอบทั่วไปของเลย์เอาต์ฟีด
เลย์เอาต์ฟีดรองรับการแสดงผลได้เกือบทุกขนาดเนื่องจากตารางกริดสามารถปรับเปลี่ยนจากคอลัมน์เดียวแบบเลื่อนได้เป็นฟีดแบบเลื่อนหลายคอลัมน์ของเนื้อหา
ฟีดเหมาะอย่างยิ่งสําหรับแอปข่าวและโซเชียลมีเดีย
การใช้งาน
Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。
根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。
对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。
如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。
如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。
แผงสนับสนุน
เลย์เอาต์แผงแบบรองรับจะจัดระเบียบเนื้อหาแอปเป็นพื้นที่ในจอแสดงผลหลักและรอง
พื้นที่แสดงผลหลักกินพื้นที่ส่วนใหญ่ของหน้าต่างแอป (โดยปกติจะประมาณ 2 ใน 3) และมีเนื้อหาหลัก พื้นที่แสดงผลรองเป็นแผงที่กินพื้นที่ส่วนที่เหลือของหน้าต่างแอปและนำเสนอเนื้อหาที่รองรับเนื้อหาหลัก
เลย์เอาต์แผงที่ใช้ร่วมกันได้จะทำงานได้ดีในจอแสดงผลแบบขยายความกว้าง (ดูใช้คลาสขนาดหน้าต่าง) ในแนวนอน จอแสดงผลขนาดกลางหรือกะทัดรัดรองรับการแสดงทั้งพื้นที่แสดงผลหลักและรอง หากเนื้อหาปรับให้เข้ากับพื้นที่แสดงผลที่แคบลงได้ หรือหากเนื้อหาเพิ่มเติมซ่อนอยู่ในชีตด้านล่างหรือด้านข้างตั้งแต่แรก ซึ่งเข้าถึงได้ด้วยการควบคุม เช่น เมนูหรือปุ่ม
เลย์เอาต์แผงสนับสนุนแตกต่างจากเลย์เอาต์แบบละเอียดรายการในความสัมพันธ์ของเนื้อหาหลักและรอง เนื้อหาในแผงรองจะมีความหมายก็ต่อเมื่อเกี่ยวข้องกับเนื้อหาหลักเท่านั้น เช่น หน้าต่างเครื่องมือในแผงสนับสนุนจะไม่เกี่ยวข้องหากใช้เพียงอย่างเดียว อย่างไรก็ตาม เนื้อหาเสริมในแผงรายละเอียดของเลย์เอาต์รายละเอียดรายการจะมีความหมายแม้ว่าจะไม่มีเนื้อหาหลัก เช่น คำอธิบายผลิตภัณฑ์จากข้อมูลผลิตภัณฑ์
กรณีการใช้งานของแผงสนับสนุน ได้แก่
- แอปเพื่อการทำงาน: เอกสารหรือสเปรดชีตที่มีความคิดเห็นของผู้ตรวจสอบในแผงสนับสนุน
- แอปสื่อ: วิดีโอสตรีมมิงที่เสริมด้วยรายการวิดีโอที่เกี่ยวข้องในแผงสนับสนุน หรือการแสดงภาพอัลบั้มเพลงที่เสริมด้วยเพลย์ลิสต์
- ค้นหาและอ้างอิงแอป: แบบฟอร์มป้อนคำค้นหาที่มีผลลัพธ์ในแผงที่รองรับ
การใช้งาน
Compose supports window size class logic, which enables 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.
For an example implementation, see the Supporting pane with Compose sample.
แหล่งข้อมูลเพิ่มเติม
- Material Design — เลย์เอาต์ตามรูปแบบบัญญัติ