เลย์เอาต์มาตรฐานเป็นเลย์เอาต์ที่ได้รับการพิสูจน์แล้วว่ามีความหลากหลายและมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ในอุปกรณ์รูปแบบต่างๆ
เลย์เอาต์มาตรฐานรองรับโทรศัพท์หน้าจอขนาดเล็ก รวมถึงแท็บเล็ต อุปกรณ์พับได้ และอุปกรณ์ ChromeOS เลย์เอาต์ที่ได้จากคำแนะนำเกี่ยวกับ Material Design นั้นมีความ สวยงามและใช้งานได้จริง
เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะทางที่ทำให้การติดตั้งใช้งานเลย์เอาต์เป็นไปอย่างตรงไปตรงมาและเชื่อถือได้
เลย์เอาต์มาตรฐานจะสร้าง UI ที่น่าสนใจและช่วยเพิ่มประสิทธิภาพการทำงาน ซึ่งเป็น รากฐานของแอปที่ยอดเยี่ยม
หากคุณคุ้นเคยกับเลย์เอาต์ Canonical ของแอปแบบปรับขนาดได้อยู่แล้ว แต่ยังไม่คุ้นเคย ให้แน่ใจว่าจะใช้ Android API ใด ให้ข้ามไปที่การมีผลบังคับใช้ เพื่อช่วยในการพิจารณาว่าเลย์เอาต์ใดเหมาะกับกรณีการใช้งานของแอป
รายการ-รายละเอียด
เลย์เอาต์รายการ-รายละเอียดช่วยให้ผู้ใช้สำรวจรายการที่มี ข้อมูลอธิบาย ข้อมูลชี้แจง หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดของรายการ
เลย์เอาต์จะแบ่งหน้าต่างแอปออกเป็น 2 บานหน้าต่างที่อยู่ติดกัน โดยบานหน้าต่างหนึ่งจะแสดงรายการ และอีกบานหน้าต่างหนึ่งจะแสดงรายละเอียด ผู้ใช้เลือกสินค้าจากรายการเพื่อแสดงรายละเอียดสินค้า Deep Link ในรายละเอียดจะแสดงเนื้อหาเพิ่มเติมในแผงรายละเอียด
จอแสดงผลแบบกว้าง (ดูใช้คลาสขนาดหน้าต่าง) จะแสดงทั้งรายการและรายละเอียดพร้อมกัน การเลือกรายการในลิสต์จะอัปเดตแผงรายละเอียด เพื่อแสดงเนื้อหาที่เกี่ยวข้องสำหรับรายการที่เลือก
จอแสดงผลที่มีความกว้างปานกลางและกะทัดรัดจะแสดงรายการหรือรายละเอียด โดยขึ้นอยู่กับการโต้ตอบของผู้ใช้กับแอป เมื่อแสดงเฉพาะรายการ การเลือกรายการในรายการจะแสดงรายละเอียดแทนรายการ เมื่อเห็นเฉพาะรายละเอียด การกดปุ่มย้อนกลับจะแสดงรายการอีกครั้ง
การเปลี่ยนแปลงการกำหนดค่า เช่น การเปลี่ยนแปลงการวางแนวอุปกรณ์หรือการเปลี่ยนแปลงขนาดหน้าต่างแอป อาจเปลี่ยนคลาสขนาดหน้าต่างของจอแสดงผลได้ เลย์เอาต์รายการ-รายละเอียด จะตอบสนองตามนั้นเพื่อรักษาสถานะของแอป
- หากจอแสดงผลแบบขยายที่แสดงทั้งแผงรายการและแผงรายละเอียดแคบลง เป็นขนาดกลางหรือกะทัดรัด แผงรายละเอียดจะยังคงปรากฏอยู่และแผงรายการจะ ซ่อนอยู่
- หากจอแสดงผลที่มีความกว้างปานกลางหรือกะทัดรัดมีเพียงบานหน้าต่างรายละเอียดที่มองเห็นได้ และ คลาสขนาดหน้าต่างขยายเป็น "ขยาย" ระบบจะแสดงรายการและรายละเอียด พร้อมกัน และรายการจะระบุว่ามีการเลือกรายการที่สอดคล้องกับเนื้อหา ในบานหน้าต่างรายละเอียด
- หากจอแสดงผลขนาดกลางหรือขนาดกะทัดรัดมีเพียงบานหน้าต่างรายการที่มองเห็นได้และ ขยายเป็นแบบขยาย ระบบจะแสดงรายการและบานหน้าต่างรายละเอียดตัวยึดตำแหน่ง พร้อมกัน
รูปแบบรายการ-รายละเอียดเหมาะสำหรับแอปส่งข้อความ เครื่องมือจัดการรายชื่อติดต่อ เบราว์เซอร์สื่อแบบอินเทอร์แอกทีฟ หรือแอปใดก็ตามที่จัดระเบียบเนื้อหาเป็นรายการของ รายการที่แสดงข้อมูลเพิ่มเติมได้
การใช้งาน
คุณสร้างเลย์เอาต์รายการแบบละเอียดได้โดยใช้เทคโนโลยีที่หลากหลาย ซึ่งรวมถึงการเขียน มุมมอง และการฝังกิจกรรม (สําหรับแอปเดิม) ดูส่วนความเกี่ยวข้องเพื่อดูว่าเทคโนโลยีใดเหมาะกับแอปของคุณมากที่สุด
ไลบรารี 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 - เลย์เอาต์ Canonical