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

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

1. โครงสร้างพื้นฐาน: ตารางกริดเลย์เอาต์เพื่อนำทางเนื้อหา

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

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

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

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

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

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

เลือกกริดคอลัมน์สำหรับเลย์เอาต์แบบทิศทางเดียวที่ตอบสนองอย่างสม่ำเสมอ หรือเมื่อคุณต้องการความยืดหยุ่นมากขึ้น

ไม่ว่าจะเป็นประเภทใด ตารางกริดเลย์เอาต์ควรปรับให้เข้ากับขนาดและรูปแบบต่างๆ ด้วย

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

หรือใช้ตารางกริดเลย์เอาต์แบบลำดับชั้นเพื่อจัดหน้าจอรายละเอียดให้เป็นระเบียบ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับคอนเทนเนอร์เลย์เอาต์ เช่น เพจเจอร์และเลย์เอาต์แบบโฟลว์

เลย์เอาต์แบบต้นฉบับและแบบก่ออิฐเป็นกริดเลย์เอาต์อีกประเภทหนึ่ง

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

2. ใช้การจำกัด

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

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

Android ใช้แถว คอลัมน์ และกล่องเป็นองค์ประกอบพื้นฐาน ดังนั้นคุณจึงออกแบบการจำกัดในลักษณะที่คล้ายกันได้ จัดกลุ่มรายการที่คล้ายกันเข้าด้วยกันโดยใช้พื้นที่ว่างหรือการแบ่งที่มองเห็นได้เพื่อช่วยแนะนำเนื้อหา

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

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

3. วางตำแหน่งเนื้อหา

เมื่อเลือกตารางกริดเลย์เอาต์และวางเนื้อหาไว้ในคอนเทนเนอร์แล้ว Android จะมีวิธีต่างๆ ในการจัดการองค์ประกอบเนื้อหาและวางตำแหน่งองค์ประกอบเหล่านั้นด้วยองค์ประกอบพื้นฐานและตัวแก้ไขหรือคอนเทนเนอร์เลย์เอาต์ เช่น กริดและ Flexbox

พิจารณาว่าเนื้อหาของคุณเป็นแบบ 1 มิติหรือ 2 มิติ เช่น เนื้อหาอาจไหลในแนวนอน แนวตั้ง หรือทั้ง 2 ทิศทาง

เลย์เอาต์การตรวจสอบสิทธิ์สามารถใช้เลย์เอาต์กริดแบบ 2 มิติได้ ดังที่แสดงในรูปภาพต่อไปนี้

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

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

คุณสามารถแสดงเนื้อหาในแถวหรือคอลัมน์ที่เลื่อนได้ด้วยแถวและคอลัมน์แบบ Lazy

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

คุณสามารถระบุการจัดเรียงองค์ประกอบ UI และ การจัดแนวได้เช่นเดียวกับการจัดเรียงและการจัดแนวเลย์เอาต์อัตโนมัติ

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

4. ปรับขนาดและครอบตัดเนื้อหา

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

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

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

ตัวอย่างเช่น รูปภาพฮีโร่แบบเต็มความกว้างจะกินพื้นที่ทั้งหน้าจอในโทรศัพท์ที่วางแนวแนวนอน

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

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

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

สำหรับช่องป้อนข้อความ เช่น การรับส่งข้อความและการตรวจสอบสิทธิ์ ระบบจะแนบช่องป้อนข้อมูลไว้กับแป้นพิมพ์และให้ความสำคัญกับช่องป้อนข้อมูลเท่านั้น

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

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

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