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