เลย์เอาต์ทั่วไป

ใช้เลย์เอาต์ทั่วไปเพื่อช่วยจัดวางแอปสำหรับกรณีการใช้งานและขนาดหน้าจอทั่วไป องค์ประกอบที่พร้อมใช้งานเหล่านี้เป็นจุดเริ่มต้นที่ดี

เลย์เอาต์ทั่วไป

เลย์เอาต์รายละเอียดรายการ

เลย์เอาต์รายละเอียดรายการช่วยให้ผู้ใช้สำรวจรายการไอเทมที่มีข้อมูลเชิงอธิบาย ข้อมูลเพิ่มเติม หรือข้อมูลเสริมอื่นๆ ซึ่งก็คือรายละเอียดไอเทม สำหรับขนาดหน้าจอขนาดกะทัดรัด จะแสดงเฉพาะมุมมองรายการหรือมุมมองรายละเอียด รายการเป็นเลย์เอาต์รูปแบบที่พบบ่อยที่สุดสำหรับแอป โดยจะแสดงคอลเล็กชันเนื้อหาในเลย์เอาต์แบบแถว รายละเอียดรายการเหมาะสำหรับแอปรับส่งข้อความ, แอปจัดการรายชื่อติดต่อ, ไฟล์เบราว์เซอร์ หรือแอปใดก็ตามที่จัดระเบียบเนื้อหาเป็นรายการไอเทมที่แสดงข้อมูลเพิ่มเติมได้

เนื้อหาอาจเป็นแบบคงที่หรือแบบไดนามิก

  • เนื้อหาแบบไดนามิก คือเนื้อหาที่แอปแสดงแบบเรียลไทม์และเหมาะสำหรับการแสดงเนื้อหาที่ผู้ใช้สร้างขึ้น หรือแสดงความต้องการหรือการกระทำของผู้ใช้ เช่น ลองนึกภาพแอปรูปภาพที่มีรายการรูปภาพที่ผู้ใช้สร้างขึ้นแบบเลื่อนได้ ซึ่งไม่ซ้ำกันสำหรับผู้ใช้แต่ละรายและเปลี่ยนแปลงไปเมื่อผู้ใช้อัปโหลดรูปภาพเพิ่มเติม รูปภาพเหล่านี้คือเนื้อหาแบบไดนามิก
  • เนื้อหาแบบคงที่ แสดงเนื้อหาที่ฮาร์ดโค้ดไว้ ซึ่งแก้ไขได้โดยการเปลี่ยนแปลงโค้ดของแอปโดยตรงเท่านั้น ตัวอย่างเนื้อหาแบบคงที่ ได้แก่ รูปภาพและข้อความที่ผู้ใช้ทุกคนอาจเห็น

ไฟล์ Now in Android Figma มีตัวอย่างเลย์เอาต์ หลายรายการ ตัวอย่างต่อไปนี้แสดงคอลเล็กชันเนื้อหาแบบ 1 มิติ

คอลเล็กชันเนื้อหาแบบ 1 มิติ

ดูคำแนะนำการออกแบบเพิ่มเติมเกี่ยวกับคอมโพเนนต์และข้อกำหนดของรายการได้ที่ รายการ Material 3

รายละเอียดรายการบนหน้าจอขนาดใหญ่พิเศษ
รายละเอียดรายการบนหน้าจอขนาดใหญ่พิเศษ

เลย์เอาต์ฟีด

เลย์เอาต์ฟีดจะจัดเรียงองค์ประกอบเนื้อหาที่เทียบเท่ากันในตารางกริดที่กำหนดค่าได้เพื่อให้ดูเนื้อหาจำนวนมากได้อย่างรวดเร็วและสะดวก ดูข้อมูลเพิ่มเติมเกี่ยวกับ หลักเกณฑ์ Material 3 สำหรับการใช้ การ์ด ในคอลเล็กชัน ฟีดสามารถเป็นการกำหนดค่าแบบรายการหรือแบบตารางกริดบนจอแสดงผลขนาดกะทัดรัด ซึ่งมักจะอยู่ในรูปแบบการ์ดหรือไทล์ เนื้อหาอาจเป็นแบบไดนามิก ซึ่งหมายความว่าเนื้อหาจะ "ป้อน" จากแหล่งที่มาภายนอกแบบไดนามิก เช่น API

เลย์เอาต์ตารางกริดประกอบด้วยทั้งแถวและคอลัมน์ที่สร้างขึ้นตามหลักการบรรจุโดยนัยหรือโดยชัดแจ้ง คุณสามารถใช้เลย์เอาต์ตารางกริดแบบคงที่มากขึ้นหรือแบบเหลื่อมกันเพื่อเปลี่ยนแถวและคอลัมน์ ทั้ง 2 แบบควรใช้ระยะห่างและตรรกะอย่างสอดคล้องกันเพื่อไม่ให้ผู้ใช้สับสน

คุณสามารถใช้เลย์เอาต์ฟีดกับ รายการแบบ Lazy หรือตารางกริดแบบ Lazy

เลย์เอาต์ฟีด

ตัวอย่างเช่น แกลเลอรีรูปภาพและพอดแคสต์ในเลย์เอาต์ตารางกริดเป็นรูปแบบฟีดที่พบบ่อย

เลย์เอาต์แผงการสนับสนุน

มุมมองบนมือถืออาจต้องใช้เนื้อหาหรือการควบคุมที่รองรับ เช่น ชีตหรือกล่องโต้ตอบ ซึ่งจะช่วยให้มุมมองหลักยังคงโฟกัสและไม่รก

Bottom Sheet สามารถทำหน้าที่เป็นเนื้อหาที่รองรับ มุมมองหลักได้

ดูข้อมูลเกี่ยวกับคำแนะนำ M3 สำหรับ Bottom Sheet

หน้าจอที่รองรับสำหรับเพลย์ลิสต์
บนหน้าจอขนาดใหญ่ ชีตที่รองรับสามารถเปิดเป็นแผงได้

WebView

WebView จะแสดงหน้าเว็บในแอป ในกรณีส่วนใหญ่ เราขอแนะนำให้ใช้เว็บเบราว์เซอร์มาตรฐาน เช่น Chrome เพื่อแสดงเนื้อหาแก่ผู้ใช้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับเว็บเบราว์เซอร์ โปรดอ่านคู่มือการเรียกใช้เบราว์เซอร์ด้วย Intent