เลย์เอาต์แคนอนิกเป็นเลย์เอาต์ที่ผ่านการพิสูจน์แล้วว่าใช้งานได้หลากหลายรูปแบบ ซึ่งมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ในอุปกรณ์รูปแบบต่างๆ
รูปแบบ Canonical รองรับโทรศัพท์ที่มีหน้าจอขนาดเล็ก รวมถึงแท็บเล็ต อุปกรณ์แบบพับได้ และอุปกรณ์ ChromeOS เลย์เอาต์นี้มาจากคำแนะนำเกี่ยวกับ Material Design จึงมีความสุนทรียภาพและใช้งานได้จริง
เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะทางที่ทำให้การใช้เลย์เอาต์เป็นเรื่องง่ายและเชื่อถือได้
เลย์เอาต์ตามหลักเกณฑ์จะสร้าง UI ที่น่าสนใจและเพิ่มประสิทธิภาพการทำงาน ซึ่งจะเป็นรากฐานของแอปที่ยอดเยี่ยม
หากคุณคุ้นเคยกับเลย์เอาต์ Canonical ของแอปแบบปรับขนาดได้อยู่แล้ว แต่ยังไม่คุ้นเคย ให้แน่ใจว่าจะใช้ Android API ใด ให้ข้ามไปที่การมีผลบังคับใช้ เพื่อช่วยในการพิจารณาว่าเลย์เอาต์ใดเหมาะกับกรณีการใช้งานของแอป
รายละเอียดรายการ
เลย์เอาต์รายการแบบละเอียดช่วยให้ผู้ใช้สำรวจรายการที่มีรายละเอียดอธิบาย อธิบาย หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดของรายการ
เลย์เอาต์จะแบ่งหน้าต่างแอปออกเป็น 2 แผงข้างเคียงกัน โดย 1 แผงสำหรับรายการ และอีก 1 แผงสำหรับรายละเอียด ผู้ใช้เลือกสินค้าจากรายการเพื่อแสดงรายละเอียดสินค้า Deep Link ในรายละเอียดจะแสดงเนื้อหาเพิ่มเติมในแผงรายละเอียด
การแสดงผลแบบขยายความกว้าง (ดูใช้ Window Size Classes) จะรองรับทั้งรายการและรายละเอียดพร้อมกัน การเลือกรายการในรายการจะอัปเดตแผงรายละเอียดเพื่อแสดงเนื้อหาที่เกี่ยวข้องสำหรับรายการที่เลือก
จอแสดงผลขนาดกลางและกะทัดรัดจะแสดงรายการหรือรายละเอียด ทั้งนี้ขึ้นอยู่กับการโต้ตอบของผู้ใช้กับแอป เมื่อมองเห็นเฉพาะรายการ การเลือกรายการในรายการจะแสดงรายละเอียดแทนรายการ เมื่อแสดงเฉพาะรายละเอียด การกดปุ่มย้อนกลับจะแสดงรายการอีกครั้ง
การเปลี่ยนแปลงการกำหนดค่า เช่น การเปลี่ยนแปลงการวางแนวของอุปกรณ์หรือการเปลี่ยนแปลงขนาดหน้าต่างของแอป อาจเปลี่ยนคลาสขนาดหน้าต่างของจอแสดงผล เลย์เอาต์รายละเอียดรายการจะ ตอบสนองตามนั้นโดยคงสถานะของแอปไว้ดังนี้
- หากการแสดงผลแบบขยายความกว้างซึ่งแสดงทั้งแผงรายการและแผงรายละเอียดแคบลงเป็นขนาดกลางหรือกะทัดรัด แผงรายละเอียดจะยังคงปรากฏอยู่และแผงรายการจะซ่อนอยู่
- หากจอแสดงผลขนาดกลางหรือกะทัดรัดมีเพียงแผงรายละเอียดที่มองเห็นได้ และคลาสขนาดหน้าต่างขยายกว้างขึ้นเพื่อขยาย รายการและรายละเอียดจะแสดงด้วยกัน และรายการจะระบุว่ามีการเลือกรายการที่เกี่ยวข้องกับเนื้อหาในแผงรายละเอียด
- หากจอแสดงผลขนาดกลางหรือกะทัดรัดแสดงเฉพาะแผงรายการและขยายให้กว้างขึ้น รายการและแผงรายละเอียดตัวยึดตำแหน่งจะแสดงร่วมกัน
รายละเอียดรายการเหมาะสําหรับแอปรับส่งข้อความ เครื่องมือจัดการรายชื่อติดต่อ โปรแกรมเรียกดูไฟล์ หรือแอปใดก็ตามที่เนื้อหาสามารถจัดระเบียบเป็นรายการรายการที่แสดงข้อมูลเพิ่มเติม
การใช้งาน
คุณสร้างเลย์เอาต์รายการแบบละเอียดได้โดยใช้เทคโนโลยีที่หลากหลาย ซึ่งรวมถึงการเขียน มุมมอง และการฝังกิจกรรม (สําหรับแอปเดิม) ดูส่วนความเกี่ยวข้องเพื่อดูว่าเทคโนโลยีใดเหมาะกับแอปของคุณมากที่สุด
ไลบรารี SlidingPaneLayout ออกแบบมาเพื่อใช้งานเลย์เอาต์รายการแบบละเอียดตามมุมมองหรือฟragment
ขั้นแรก ให้ประกาศ SlidingPaneLayout เป็นองค์ประกอบรูทของเลย์เอาต์ XML
ถัดไป ให้เพิ่มองค์ประกอบย่อย 2 รายการ ซึ่งอาจเป็นมุมมองหรือข้อมูลโค้ดที่แสดงรายการและเนื้อหารายละเอียด
ใช้วิธีการสื่อสารเพื่อส่งผ่านข้อมูลระหว่างมุมมองหรือส่วนย่อยของรายละเอียดรายการ แนะนำให้ใช้ ViewModel เนื่องจากความสามารถในการจัดเก็บตรรกะทางธุรกิจและการผ่านการเปลี่ยนแปลงการกำหนดค่า
SlidingPaneLayout จะกำหนดโดยอัตโนมัติว่าจะแสดงรายการและรายละเอียดร่วมกันหรือแยกกัน ในหน้าต่างที่มีพื้นที่แนวนอนเพียงพอที่จะแสดงทั้งรายการและรายละเอียด รายการและรายละเอียดจะปรากฏอยู่เคียงข้างกัน ในหน้าต่างที่มีพื้นที่ไม่เพียงพอ ระบบจะแสดงรายการหรือรายละเอียดโดยขึ้นอยู่กับการโต้ตอบของผู้ใช้กับแอป
ดูตัวอย่างการใช้งานได้ที่ตัวอย่างรายละเอียดรายการที่มีแผงเลื่อน
การฝังกิจกรรม
ใช้การฝังกิจกรรมเพื่อเปิดใช้แอปแบบหลายกิจกรรมเดิมให้แสดงกิจกรรม 2 รายการควบคู่กันในหน้าจอเดียวกันหรือซ้อนกัน (ซ้อนทับกัน) หากแอปใช้รายการและรายละเอียดของเลย์เอาต์รายการแบบมีรายละเอียดในกิจกรรมแยกต่างหาก การฝังกิจกรรมจะช่วยให้คุณสร้างเลย์เอาต์รายการแบบมีรายละเอียดได้ด้วยการแยกโค้ดใหม่เพียงเล็กน้อยหรือไม่ต้องแยกเลย
ใช้การฝังกิจกรรมโดยระบุการแยกหน้าต่างงานโดยใช้ไฟล์การกำหนดค่า XML การแยกจะกําหนดกิจกรรมหลัก ซึ่งจะเริ่มต้นการแยก และกิจกรรมรอง ระบุความกว้างในการแสดงผลขั้นต่ำสำหรับการแยกโดยใช้จุดหยุดพักของ Window Size Class เมื่อความกว้างของการแสดงผลต่ำกว่าจุดหยุดขั้นต่ำ กิจกรรมจะแสดงซ้อนทับกัน เช่น หากความกว้างขั้นต่ำของการแสดงผลคือ 600dp กิจกรรมจะแสดงโดยซ้อนทับอีกรายการหนึ่งบนจอแสดงผลแบบกะทัดรัด แต่จะแสดงคู่กันบนจอแสดงผลขนาดกลางและที่ขยาย
การฝังกิจกรรมใช้ได้ใน Android 12L (API ระดับ 32) ขึ้นไป แต่อาจใช้ได้ใน API ระดับต่ำกว่าด้วยหากผู้ผลิตอุปกรณ์นำมาใช้งาน เมื่อการฝังกิจกรรมไม่พร้อมใช้งานในอุปกรณ์ ลักษณะการทำงานสำรองจะส่งผลให้กิจกรรมรายการหรือกิจกรรมแบบละเอียดครอบครองหน้าต่างแอปทั้งหน้าต่างโดยอิงตามการโต้ตอบของผู้ใช้กับแอป
โปรดดูข้อมูลเพิ่มเติมที่การฝังกิจกรรม
ดูตัวอย่างการใช้งานได้ที่ตัวอย่างรายละเอียดรายการที่มีการฝังกิจกรรม
ฟีด
เลย์เอาต์ฟีดจะจัดองค์ประกอบเนื้อหาที่เท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและง่ายดาย
ขนาดและตําแหน่งจะสร้างความสัมพันธ์ระหว่างองค์ประกอบเนื้อหา
กลุ่มเนื้อหาสร้างขึ้นโดยทำให้องค์ประกอบมีขนาดเท่ากันและวางไว้ด้วยกัน ดึงดูดความสนใจไปยังองค์ประกอบต่างๆ ด้วยการทําให้องค์ประกอบเหล่านั้นมีขนาดใหญ่กว่าองค์ประกอบที่อยู่ใกล้เคียง
การ์ดและรายการเป็นองค์ประกอบทั่วไปของเลย์เอาต์ฟีด
เลย์เอาต์ฟีดรองรับการแสดงผลได้เกือบทุกขนาดเนื่องจากตารางกริดสามารถปรับเปลี่ยนจากคอลัมน์เดียวแบบเลื่อนได้เป็นฟีดแบบเลื่อนหลายคอลัมน์ของเนื้อหา
ฟีดเหมาะอย่างยิ่งสําหรับแอปข่าวและโซเชียลมีเดีย
การใช้งาน
RecyclerView จะแสดงผลรายการจำนวนมากในคอลัมน์เดียวได้อย่างมีประสิทธิภาพ GridLayoutManager จะจัดวางรายการเป็นตารางกริดเพื่อให้กำหนดค่าขนาดและระยะเวลาของรายการได้
กำหนดค่าคอลัมน์ตารางกริดตามขนาดของพื้นที่แสดงผลที่มีอยู่เพื่อกำหนดความกว้างขั้นต่ำที่อนุญาตสำหรับรายการ
คุณลบล้างกลยุทธ์ระยะเวลาเริ่มต้นของ GridLayoutManager ได้ 1 ช่วงต่อรายการโดยการสร้าง SpanSizeLookup ที่กำหนดเอง ปรับระยะเพื่อเน้นรายการบางรายการมากกว่ารายการอื่นๆ
ในจอแสดงผลขนาดกะทัดรัดที่มีพื้นที่เพียงพอสำหรับคอลัมน์เดียวเท่านั้น ให้ใช้ LinearLayoutManager แทน GridLayoutManager
ดูตัวอย่างการใช้งานได้ที่ตัวอย่างฟีดที่มียอดดู
แผงสนับสนุน
เลย์เอาต์แผงแบบรองรับจะจัดระเบียบเนื้อหาแอปเป็นพื้นที่ในจอแสดงผลหลักและรอง
พื้นที่แสดงผลหลักกินพื้นที่ส่วนใหญ่ของหน้าต่างแอป (โดยปกติจะประมาณ 2 ใน 3) และมีเนื้อหาหลัก พื้นที่แสดงผลรองเป็นแผงที่กินพื้นที่ส่วนที่เหลือของหน้าต่างแอปและนำเสนอเนื้อหาที่รองรับเนื้อหาหลัก
เลย์เอาต์แผงที่ใช้ร่วมกันได้จะทำงานได้ดีในจอแสดงผลแบบขยายความกว้าง (ดูใช้คลาสขนาดหน้าต่าง) ในแนวนอน จอแสดงผลขนาดกลางหรือกะทัดรัดรองรับการแสดงทั้งพื้นที่แสดงผลหลักและรอง หากเนื้อหาปรับให้เข้ากับพื้นที่แสดงผลที่แคบลงได้ หรือหากเนื้อหาเพิ่มเติมซ่อนอยู่ในชีตด้านล่างหรือด้านข้างตั้งแต่แรก ซึ่งเข้าถึงได้ด้วยการควบคุม เช่น เมนูหรือปุ่ม
เลย์เอาต์แผงสนับสนุนแตกต่างจากเลย์เอาต์แบบละเอียดรายการในความสัมพันธ์ของเนื้อหาหลักและรอง เนื้อหาในแผงรองจะมีความหมายก็ต่อเมื่อเกี่ยวข้องกับเนื้อหาหลักเท่านั้น เช่น หน้าต่างเครื่องมือในแผงสนับสนุนจะไม่เกี่ยวข้องหากใช้เพียงอย่างเดียว อย่างไรก็ตาม เนื้อหาเสริมในแผงรายละเอียดของเลย์เอาต์รายละเอียดรายการจะมีความหมายแม้ว่าจะไม่มีเนื้อหาหลัก เช่น คำอธิบายผลิตภัณฑ์จากข้อมูลผลิตภัณฑ์
กรณีการใช้งานของแผงสนับสนุน ได้แก่
- แอปเพื่อการทำงาน: เอกสารหรือสเปรดชีตที่มีความคิดเห็นของผู้ตรวจสอบในแผงสนับสนุน
- แอปสื่อ: วิดีโอสตรีมมิงที่เสริมด้วยรายการวิดีโอที่เกี่ยวข้องในแผงสนับสนุน หรือการแสดงภาพอัลบั้มเพลงที่เสริมด้วยเพลย์ลิสต์
- ค้นหาและอ้างอิงแอป: แบบฟอร์มป้อนคำค้นหาที่มีผลลัพธ์ในแผงที่รองรับ
การใช้งาน
เลย์เอาต์แผงสนับสนุนจะใช้เลย์เอาต์ตัวช่วย เช่น LinearLayout หรือ ConstraintLayout สร้างคลาสขนาดหน้าต่าง
ซึ่งแบ่งพื้นที่แสดงผลแนวนอนที่มีอยู่สำหรับแอป
3 หมวดหมู่ ได้แก่ กะทัดรัด (< 600dp), ปานกลาง (>= 600dp) และขยาย
(>= 840dp)
สำหรับคลาสขนาดหน้าต่างแต่ละระดับ ให้กำหนดเลย์เอาต์ดังนี้
- กะทัดรัด: ในโฟลเดอร์ทรัพยากรของแอป
layoutให้วางเนื้อหาที่แสดงผลแผงสนับสนุนใต้เนื้อหาหลักหรือภายในชีตด้านล่าง - กลาง: ในโฟลเดอร์
layout-w600dpให้ใส่เนื้อหาในแผงสนับสนุนซึ่งส่งผลให้เนื้อหาหลักและแผงสนับสนุนแสดงผลควบคู่กัน โดยแบ่งพื้นที่ในแนวนอนอย่างเท่าๆ กัน - ขยาย: ในโฟลเดอร์
layout-w840dpให้ใส่เนื้อหาในแผงสนับสนุนซึ่งส่งผลให้เนื้อหาหลักและแผงสนับสนุนแสดงผลควบคู่กัน แต่แผงสนับสนุนจะใช้พื้นที่แนวนอนเพียง 30% เท่านั้น ส่วนที่เหลือ 70% จะเป็นพื้นที่สำหรับเนื้อหาหลัก
ใช้ ViewModel สำหรับการสื่อสารระหว่างเนื้อหาหลักกับ
แผงสนับสนุน ไม่ว่าจะใช้มุมมอง ส่วนย่อย หรือชุดค่าผสม
สำหรับตัวอย่างการใช้งาน โปรดดูตัวอย่างต่อไปนี้
การบังคับใช้
เลย์เอาต์ตามรูปแบบบัญญัติสร้างการนำเสนอเนื้อหาหลากหลายรูปแบบเพื่อให้เข้าถึงได้ง่ายและเจาะลึก ใช้โฟลว์ชาร์ตต่อไปนี้เพื่อกำหนดเลย์เอาต์และกลยุทธ์การใช้งานที่เหมาะกับกรณีการใช้งานของแอปมากที่สุด
โปรดดูตัวอย่างเลย์เอาต์ Canonical ที่ใช้ในแอปประเภทต่างๆ ในแกลเลอรีหน้าจอขนาดใหญ่
แหล่งข้อมูลเพิ่มเติม
- Material Design — เลย์เอาต์ตามรูปแบบบัญญัติ