ใช้เลย์เอาต์มาตรฐานเป็นจุดเริ่มต้น ซึ่งเป็นองค์ประกอบที่พร้อมใช้งานซึ่งจะช่วยให้เลย์เอาต์ปรับให้เข้ากับกรณีการใช้งานและขนาดหน้าจอทั่วไปได้ เลย์เอาต์เหล่านี้มีความสวยงามและใช้งานได้จริง โดยอิงตามคำแนะนำของ Material 3
เฟรมเวิร์ก Android มีคอมโพเนนต์เฉพาะที่ทำให้การติดตั้งใช้งานเลย์เอาต์เป็นไปอย่างตรงไปตรงมาและเชื่อถือได้โดยใช้ API ของ Jetpack Compose หรือ View
เลย์เอาต์รายการ-รายละเอียด
เลย์เอาต์รายการ-รายละเอียดช่วยให้ผู้ใช้สำรวจรายการที่มี ข้อมูลเชิงอธิบาย ข้อมูลอธิบาย หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดของรายการ สำหรับขนาดหน้าจอแบบกะทัดรัด จะเห็นเฉพาะมุมมองรายการหรือมุมมองรายละเอียด รายการเป็นรูปแบบเลย์เอาต์ที่พบบ่อยที่สุดสำหรับแอป โดยจะแสดง คอลเล็กชันเนื้อหาในเลย์เอาต์แบบแถว รูปแบบรายการ-รายละเอียดเหมาะสำหรับแอปส่งข้อความ ตัวจัดการรายชื่อติดต่อ เบราว์เซอร์ไฟล์ หรือแอปใดก็ตามที่จัดระเบียบเนื้อหาเป็นรายการของรายการ ซึ่งแสดงข้อมูลเพิ่มเติมได้
เนื้อหาอาจเป็นแบบคงที่หรือแบบไดนามิกก็ได้
- เนื้อหาแบบไดนามิกคือเนื้อหาที่แอปแสดงแบบเรียลไทม์ ซึ่งเหมาะสำหรับ การแสดงเนื้อหาที่ผู้ใช้สร้างขึ้น หรือแสดงถึงค่ากำหนดหรือการกระทำของผู้ใช้ ตัวอย่างเช่น ลองนึกถึงแอปรูปภาพที่มีรายการรูปภาพที่ผู้ใช้สร้างขึ้นซึ่งเลื่อนได้ โดยรูปภาพจะแตกต่างกันไปในผู้ใช้แต่ละรายและจะเปลี่ยนแปลงเมื่อผู้ใช้อัปโหลดรูปภาพเพิ่มเติม รูปภาพเหล่านี้เป็นเนื้อหาแบบไดนามิก
- เนื้อหาแบบคงที่แสดงถึงเนื้อหาที่เขียนโค้ดไว้ ซึ่งจะแก้ไขได้โดย ทำการเปลี่ยนแปลงในโค้ดของแอปโดยตรงเท่านั้น ตัวอย่างเนื้อหาแบบคงที่ ได้แก่ รูปภาพและข้อความที่ผู้ใช้ทุกคนอาจเห็น
ไฟล์ Figma ของ Now in Android มีตัวอย่างเลย์เอาต์หลายแบบ ตัวอย่างต่อไปนี้แสดงคอลเล็กชันเนื้อหาแบบ 1 มิติ
ดูคำแนะนำด้านการออกแบบเพิ่มเติมเกี่ยวกับคอมโพเนนต์และข้อกำหนดของรายการได้ที่รายการ Material 3
เลย์เอาต์ฟีด
เลย์เอาต์ฟีดจะจัดเรียงองค์ประกอบเนื้อหาที่เทียบเท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและสะดวก ดูข้อมูลเพิ่มเติมเกี่ยวกับ หลักเกณฑ์ Material 3 สำหรับการใช้การ์ดในคอลเล็กชัน ฟีดอาจเป็นการกำหนดค่าแบบรายการหรือแบบตารางกริดบนจอแสดงผลขนาดกะทัดรัด โดยมักจะอยู่ในรูปแบบการ์ดหรือ ไทล์ เนื้อหาอาจเป็นแบบไดนามิก ซึ่งหมายความว่า "ป้อน" จากแหล่งที่มาภายนอกแบบไดนามิก เช่น API
เลย์เอาต์ตารางกริดประกอบด้วยทั้งแถวและคอลัมน์ที่สร้างขึ้นตามหลักการบรรจุโดยนัยหรือ โดยชัดแจ้ง คุณสามารถใช้เลย์เอาต์ตารางกริดอย่างเข้มงวดมากขึ้นหรือ สลับแถวและคอลัมน์ ทั้ง 2 อย่างควรมีการใช้เว้นวรรคและตรรกะที่สอดคล้องกันเพื่อไม่ให้ผู้ใช้สับสน ดูหลักเกณฑ์ของ Material 3 เกี่ยวกับการออกแบบฟีด
คุณสามารถใช้เลย์เอาต์ฟีดใน Compose ด้วยรายการแบบเลซีหรือตารางกริดแบบเลซี
หรือใน Views ด้วย RecyclerView หรือ CardView
ตัวอย่างเช่น แกลเลอรีรูปภาพและพอดแคสต์ในเลย์เอาต์ตารางกริดเป็นรูปแบบฟีดที่พบบ่อย
เลย์เอาต์แผงการสนับสนุน
มุมมองบนอุปกรณ์เคลื่อนที่อาจต้องมีเนื้อหาหรือการควบคุมที่รองรับ โดยปกติแล้วจะอยู่ในรูปแบบของชีตหรือกล่องโต้ตอบ ซึ่งช่วยให้มุมมองหลักยังคงโฟกัสและ ไม่รก ดูคำแนะนำ M3 สำหรับการใช้เลย์เอาต์ Canonical ของแผงสนับสนุน
ดูข้อมูลเกี่ยวกับคำแนะนำ M3 สำหรับชีตด้านล่าง