องค์ประกอบและโครงสร้างของเนื้อหา

สร้างโฟลว์และจังหวะที่ยืดหยุ่นด้วยวิธีการจัดโครงสร้างและการควบคุมสำหรับเนื้อหาของคุณ

1. โครงสร้างพื้นฐาน

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

ขอบจะเว้นช่องว่างที่ขอบด้านซ้ายและขวาของหน้าจอและเนื้อหา ค่าระยะขอบมาตรฐานสำหรับการกำหนดขนาดกะทัดรัดคือ 16 dp แต่ระยะขอบควรปรับให้เข้ากับหน้าจอขนาดใหญ่ เนื้อหาและส่วนการทำงานของแอปต้องอยู่ภายใน และสอดคล้องกับขอบเหล่านี้

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

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

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

โปรดระมัดระวังในการสร้างตารางกริดของแถวที่มาพร้อมกัน เนื่องจากอาจจำกัดการปรับขนาดเนื้อหาแนวนอนในทุกการวางแนวและรูปแบบต่างๆ โดยปกติแล้วการสร้างกฎการเว้นวรรคจะช่วยให้ความสอดคล้องด้านภาพที่จำเป็น

2. ใช้การกักกัน

ใช้การบรรจุเพื่อจัดกลุ่มองค์ประกอบด้วยภาพ

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

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

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

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

3. จัดตำแหน่งเนื้อหา

Android มีหลายวิธีในการจัดการองค์ประกอบเนื้อหาในคอนเทนเนอร์ที่เกี่ยวข้อง ซึ่งจะช่วยจัดวางองค์ประกอบได้อย่างเหมาะสม รวมถึงการวางแนว การเว้นวรรค และการปรับขนาด

Gravity เป็นมาตรฐานสำหรับการวางออบเจ็กต์ภายในคอนเทนเนอร์ที่อาจมีขนาดใหญ่กว่า สำหรับ Use Case ที่เฉพาะเจาะจง รูปภาพต่อไปนี้แสดงตัวอย่างของ การวางตำแหน่งออบเจ็กต์เริ่มต้นและกึ่งกลาง (1), ด้านบนและ กึ่งกลางแนวนอน (2), ด้านล่างซ้าย (3) และสิ้นสุดและขวา (1)

4. ปรับขนาดเนื้อหา

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

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

เนื้อหาที่ไม่ได้ใส่คำอธิบายแทนเสียงอาจปรากฏแตกต่างจากที่คุณคาดหวังหรือต้องการ

เนื้อหาที่ปักหมุด

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

การจัดข้อความ

ใช้ AlignmentLine เพื่อสร้างเส้นแนวที่กำหนดเอง ซึ่งเลย์เอาต์หลัก สามารถใช้เพื่อจัดแนวและวางตำแหน่งองค์ประกอบย่อยได้

เลย์เอาต์คอมโพเนนต์

คอมโพเนนต์ Material 3 มีการกำหนดค่าและสถานะของตัวเองสำหรับการโต้ตอบและเนื้อหา

Compose มีเลย์เอาต์ที่สะดวกสำหรับการรวม Material Components เข้ากับ รูปแบบหน้าจอทั่วไป Composable เช่น Scaffold มีช่องสำหรับ คอมโพเนนต์ต่างๆ และองค์ประกอบอื่นๆ ของหน้าจอ อ่านเพิ่มเติมเกี่ยวกับคอมโพเนนต์และเลย์เอาต์ของ Material