ตารางกริดและหน่วย

พิกเซลที่ไม่ขึ้นอยู่กับความหนาแน่น (dp) และพิกเซลที่รองรับการปรับขนาด (sp) เป็นสิ่งจำเป็นสำหรับ การสร้างเลย์เอาต์และการนำเสนอแบบอักษรที่ตอบสนองต่อความหนาแน่นของหน้าจอ คลาสขนาด รูปแบบอุปกรณ์ และสัดส่วนภาพที่หลากหลาย ซึ่งประกอบกันเป็นอุปกรณ์ Android อย่างสม่ำเสมอ

สรุปประเด็นสำคัญ

• หากใช้ตารางกริดพื้นฐาน ให้ใช้การวัดที่ 4 และ 8
• ระบุข้อมูลจำเพาะในหน่วย dp และ sp แทนที่จะเป็นพิกเซล
• ส่งออกกราฟิกบิตแมป (แรสเตอร์) สำหรับที่เก็บข้อมูลทั้งหมด
• ออกแบบโดยคำนึงถึงแนวคิดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ โดยพิจารณาจากคลาสขนาด ความละเอียด และ สัดส่วนภาพที่แตกต่างกัน
• ความหนาแน่นของพิกเซลอิสระ (dp): ความหนาแน่นของพิกเซลอิสระเป็นหน่วยที่ยืดหยุ่น ซึ่งปรับขนาดให้มีขนาดสม่ำเสมอบนหน้าจอใดก็ได้ โดยอิงตาม ความหนาแน่นจริงของหน้าจอ หน่วยเหล่านี้สัมพันธ์กับหน้าจอ 160 dpi (จุดต่อนิ้ว) ซึ่ง 1 dp จะเท่ากับ 1 px โดยประมาณ
• พิกเซลที่ปรับขนาดได้ (sp): พิกเซลที่ปรับขนาดได้มีฟังก์ชันเดียวกับ dp แต่ใช้กับแบบอักษร ค่าเริ่มต้นของ sp จะเหมือนกับค่าเริ่มต้นของ dp ระบบ Android จะคำนวณขนาดแบบอักษรจริงที่จะใช้ตามอุปกรณ์และความต้องการของผู้ใช้ที่ตั้งค่าไว้ในการตั้งค่าของอุปกรณ์

ความแตกต่างหลักระหว่างหน่วยวัดเหล่านี้คือพิกเซลที่ปรับขนาดได้จะรักษาการตั้งค่าแบบอักษรของผู้ใช้ไว้ ผู้ใช้ที่มีการตั้งค่าข้อความขนาดใหญ่ขึ้นเพื่อการช่วยเหลือพิเศษจะเห็นขนาดแบบอักษรที่ตรงกับค่ากำหนดขนาดข้อความของตน ดูวิธีเปลี่ยนขนาดแบบอักษรใน Compose

Android ใช้หน่วยเหล่านี้เพื่อช่วยปรับขนาดและแปลในอุปกรณ์และความละเอียดต่างๆ

กลุ่มความหนาแน่น

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

Android จะจัดกลุ่มช่วงความหนาแน่นของหน้าจอเป็น "กลุ่ม" และใช้กลุ่มเหล่านั้นเพื่อส่งชุดชิ้นงานที่เหมาะสมที่สุดไปยังอุปกรณ์ของคุณ กลุ่มความหนาแน่นที่ใช้กันโดยทั่วไปคือ mdpi, hdpi, xhdpi, xxhdpi และ xxxhdpi (nodpi และ anydpi หมายถึงกลุ่มที่ไม่ปรับขนาดตามความละเอียดของอุปกรณ์ ซึ่งโดยทั่วไปจะใช้สำหรับ Vector Drawable) ซึ่งแต่ละกลุ่มจะสอดคล้องกับไฟล์ทรัพยากรของแอป

วิธีคำนวณ dp

dp = (ความกว้างเป็นพิกเซล * 160) / ความหนาแน่นของหน้าจอ

ตารางกริดบรรทัดฐาน

การสร้างโดยใช้ตารางกริดพื้นฐานจะช่วยสร้างระยะห่างและการจัดแนวที่สอดคล้องกัน ใน UI UI ของ Android ใช้ตารางกริด 8 dp สำหรับเลย์เอาต์ คอมโพเนนต์ และ การเว้นวรรค

องค์ประกอบขนาดเล็ก เช่น ไอคอน แบบอักษร และองค์ประกอบบางอย่างภายในคอมโพเนนต์ ควรจัดแนวให้สอดคล้องกับตารางกริด 4 dp

ตารางกริดเลย์เอาต์

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

ตารางกริดแบบลำดับชั้น

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

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

ตารางกริดแบบโมดูล

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

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

ตารางกริดคอลัมน์

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

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

คลาสขนาด

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

สัดส่วนภาพ

สัดส่วนภาพคือสัดส่วนความกว้างต่อความสูงขององค์ประกอบ โดยเขียนเป็นความกว้าง:ความสูง

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

เราขอแนะนำให้ใช้สัดส่วนภาพต่อไปนี้ใน UI

• 16:9
• 3:2
• 4:3
• 1:1
• 3:4
• 2:3