พิกเซลที่ไม่ขึ้นอยู่กับความหนาแน่น (dp) และพิกเซลที่รองรับการปรับขนาด (sp) เป็นสิ่งจำเป็นสำหรับการสร้างเลย์เอาต์และการนำเสนอแบบอักษรที่ตอบสนองต่อความหนาแน่นของหน้าจอ คลาสขนาด รูปแบบ และสัดส่วนภาพที่หลากหลายซึ่งประกอบกันเป็นอุปกรณ์ Android อย่างสม่ำเสมอ
สรุปประเด็นสำคัญ
- หากใช้ตารางกริดพื้นฐาน ให้ใช้การวัดที่ 4 และ 8
- ระบุข้อมูลจำเพาะในหน่วย dp และ sp แทนที่จะเป็นพิกเซล
- ส่งออกกราฟิกบิตแมป/แรสเตอร์สำหรับที่เก็บข้อมูลทั้งหมด
- ออกแบบโดยคำนึงถึงการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่มีคลาสขนาด ความละเอียด และ สัดส่วนภาพที่แตกต่างกัน
- ความหนาแน่นของพิกเซลอิสระ (dp): ความหนาแน่นของพิกเซลอิสระเป็นหน่วยที่ยืดหยุ่น ซึ่งปรับขนาดให้มีขนาดสม่ำเสมอบนหน้าจอใดก็ได้ โดยอิงตาม ความหนาแน่นทางกายภาพของหน้าจอ หน่วยเหล่านี้สัมพันธ์กับหน้าจอ 160 dpi (จุดต่อนิ้ว) ซึ่ง 1 dp จะเท่ากับ 1 px โดยประมาณ
- พิกเซลที่ปรับขนาดได้ (sp): พิกเซลที่ปรับขนาดได้มีฟังก์ชันเดียวกับ dp แต่ใช้กับแบบอักษร ค่าเริ่มต้นของ sp จะเหมือนกับค่าเริ่มต้นของ dp ระบบ Android จะคำนวณขนาดแบบอักษรจริงที่จะใช้โดยอิงตามอุปกรณ์และความต้องการของผู้ใช้ที่ตั้งค่าไว้ในแอปการตั้งค่าของอุปกรณ์ Android
ความแตกต่างหลักระหว่างหน่วยวัดเหล่านี้คือพิกเซลที่ปรับขนาดได้ จะรักษาการตั้งค่าแบบอักษรของผู้ใช้ ผู้ใช้ที่มีการตั้งค่าข้อความขนาดใหญ่เพื่อการช่วยเหลือพิเศษจะเห็นขนาดแบบอักษรที่ตรงกับค่ากำหนดขนาดข้อความของตน ดูวิธีเปลี่ยนขนาดแบบอักษรในโหมดเขียน
Android ใช้หน่วยเหล่านี้เพื่อช่วยปรับขนาดและแปลในอุปกรณ์และความละเอียดต่างๆ
กลุ่มความหนาแน่น
หน้าจอความหนาแน่นสูงมีพิกเซลต่อนิ้วมากกว่าหน้าจอความหนาแน่นต่ำ ด้วยเหตุนี้ องค์ประกอบ UI ที่มีขนาดพิกเซลเท่ากันจึงปรากฏใหญ่ขึ้นบนหน้าจอที่มีความหนาแน่นต่ำ และเล็กลงบนหน้าจอที่มีความหนาแน่นสูง ด้วยเหตุนี้ คุณจึงไม่ควรประกาศ การวัดเป็นพิกเซล
Android จะจัดกลุ่มช่วงความหนาแน่นของหน้าจอเป็น "กลุ่ม" และใช้กลุ่มเหล่านั้นเพื่อ
ส่งชุดชิ้นงานที่เหมาะสมที่สุดไปยังอุปกรณ์ของคุณ ความหนาแน่นที่ใช้กันมากที่สุด
คือ mdpi, hdpi, xhdpi, xxhdpi และ xxxhdpi (nodpi และ
anydpi หมายถึงความหนาแน่นที่ไม่ปรับขนาดตามความละเอียดของอุปกรณ์ ซึ่งมักใช้กับ Drawable แบบเวกเตอร์) ซึ่งแต่ละความหนาแน่นจะสอดคล้องกับไฟล์ทรัพยากรของแอป
วิธีคำนวณ dp
dp = (ความกว้างเป็นพิกเซล * 160) / ความหนาแน่นของหน้าจอ
ตารางกริด
ตารางกริดบรรทัดฐาน
การสร้างโดยใช้ตารางกริดพื้นฐานจะช่วยสร้างระยะห่างและการจัดแนวที่สอดคล้องกัน ใน UI UI ของ Android ใช้ตารางกริด 8 dp สำหรับเลย์เอาต์ คอมโพเนนต์ และ การเว้นวรรค
องค์ประกอบขนาดเล็ก เช่น ไอคอน แบบอักษร และองค์ประกอบบางอย่างภายในคอมโพเนนต์ ควรจัดแนวให้สอดคล้องกับตารางกริด 4dp
ตารางกริด
คอลัมน์จะสร้างโครงสร้างตารางกริดเพื่อกำหนดเลย์เอาต์ในแนวตั้งโดยการ แบ่งเนื้อหาภายในพื้นที่เนื้อหา เนื้อหาจะอยู่ในพื้นที่ของหน้าจอที่มีคอลัมน์ จัดแนวตามตารางกริดพื้นฐานเพื่อจัดแนวเนื้อหา แต่ ควรคงการปรับขนาดที่ยืดหยุ่นไว้ ดูข้อมูลพื้นฐานเกี่ยวกับวิธีตั้งค่าตารางกริดคอลัมน์และ ใช้เนื้อหาในข้อมูลพื้นฐานเกี่ยวกับเลย์เอาต์
ดูรายละเอียดเกี่ยวกับการสร้างเลย์เอาต์ที่ยืดหยุ่นในอุปกรณ์ต่างๆ ได้ที่หน้าเลย์เอาต์มาตรฐานของ Material 3
คลาสขนาด
คลาสขนาดหน้าต่างคือชุดเบรกพอยต์วิวพอร์ตที่กำหนดไว้ล่วงหน้าซึ่งจะช่วยคุณ ออกแบบ พัฒนา และทดสอบเลย์เอาต์แอปพลิเคชันที่ปรับเปลี่ยนตามอุปกรณ์และปรับเปลี่ยนตามพื้นที่โฆษณา Android แบ่งคลาสขนาดหน้าต่างออกเป็น 3 คลาส ได้แก่ Compact, Medium และ Expanded อ่านเพิ่มเติมเกี่ยวกับ คลาสขนาดหน้าต่าง
สัดส่วนภาพ
สัดส่วนภาพคือสัดส่วนความกว้างต่อความสูงขององค์ประกอบ สัดส่วนภาพ จะเขียนเป็นความกว้าง:ความสูง
หากต้องการให้เลย์เอาต์มีความสอดคล้องกัน ให้ใช้อัตราส่วนภาพที่สอดคล้องกันในองค์ประกอบต่างๆ เช่น รูปภาพ พื้นผิว และขนาดหน้าจอ
เราขอแนะนำให้ใช้สัดส่วนภาพต่อไปนี้ใน UI
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3