หน่วย Dp เวลาออกแบบ Android App คืออะไร ทำไมไม่ใช้ Pixel แล้วเกี่ยวอะไรกับ dpi
เมื่อหลายปีที่แล้วมีโอกาสออกแบบ และเขียน Android App ด้วย Titanium Appcelerator (ซึ่งเป็นการเขียนแอพ Cross-Platform ด้วย JavaScript ซึ่งมีแนวคิดคล้ายกับ React Native ที่ฮิตกันอยู่ในตอนนี้) ก็เลยได้รู้จักค่านึง ที่ใช้กำหนดขนาดให้วัตถุต่างๆ ชื่อว่า “Dp” เลยอยากเอามาเล่าให้ฟัง
ซึ่งก่อนที่เราจะเข้าใจว่าหน่วย Dp คืออะไร เราต้องทำความเข้าใจกับ “dpi” กันก่อน
dpi คืออะไร?
dpi ย่อมาจาก “dots per inch” หรือ ppi — “pixels per inch” (จริงๆ ต่างกันนิดนึงแต่ในที่นี้เรียกสลับกันได้) ซึ่งเป็นค่าความละเอียดของหน้าจอที่บอกว่า
ในความยาว 1 นิ้ว นั้น มีจำนวน Pixel เรียงต่อกันอยู่กี่ Pixel
ยกตัวอย่างง่ายๆ iPhone 7 มีความละเอียดอยู่ ~326 ppi
และมี Resolution 750 x 1334 pixels
เพราะฉะนั้น iPhone 7 จะมีหน้าจอกว้างเท่ากับ
750/326 = 2.3 นิ้ว และสูง 1334/326 = 4.09 นิ้ว
ซึ่งถ้าสังเกตดีๆ มันคือความสัมพันธ์ระหว่างหน่วยวัดของโลกดิจิตอล กับโลกความเป็นจริงนั่นเอง
เรื่องความละเอียดของจอ (Density)
ตอนแรกที่ทำ Android App แล้วต้องทำ Assets เจอคำว่า mdpi, hdpi, xhdpi… ยอมรับว่างงมาก มันคือขนาดของจอหรือเปล่า หรือว่าอะไร?
จริงๆ คือขนาดของ dpi ที่ต่างกัน ซึ่งถ้าเห็นตารางนี้น่าจะเข้าใจเลย
เช่น ถ้าเราเปิดแอพด้วยมือถือที่มีความละเอียด ppi ของจอประมาณไหน ก็จะหยิบ Asset ของความละเอียดนั้นมาแสดง
จะเห็นว่าถ้าเทียบกับ Scale จะเหมือนกับของ iOS เลย ที่มีการกำหนดขนาด 1x 2x
แล้ว Dp คืออะไร?
Dp ย่อมาจาก Density-independent Pixels หรือบางทีใช้ว่า “Dip” ก็ได้ ซึ่งก็คือหน่วยที่จำลองขึ้นมา เพื่อเวลาแสดงผลในโลกความเป็นจริงจะให้ขนาดที่ใกล้เคียงกัน
ยกตัวอย่างให้เห็นภาพ ถ้าเรากำหนดให้ปุ่มความสูง 160dp ซึ่งถ้าเอาไม้บรรทัดไปวัดบนจอจะได้ประมาณ 1 นิ้ว ถ้าแอพเดียวกันไปเปิดใน Tablet หรือมือถือที่มีขนาดจอหรือความละเอียดต่างกัน เอาไม้บรรทัดไปวัด ก็จะสูงประมาณ 1 นิ้วเหมือนกัน
โดยยืดจอขนาด mdpi (160 dpi ) เป็น Baseline (ถ้าดูดีๆ มันคือความละเอียดใกล้เคียงกับ 1x ของ iOS) โดยมีสูตรแปลงค่าจาก dp เป็น Pixel ตามนี้
Pixel = ( dp X dpi ) / 160
ถ้าอยากได้ค่า dp ก็ไปกลับสมการกันเองนะครับ
ซึ่งสาเหตุหลักๆ ที่ทำให้เกิด dp ขึ้นมาเพราะว่า Android นั้นมีขนาดจอที่หลากหลายมาก เขาเลยอยากทำให้ง่ายขึ้นโดยคิดหน่วยนึงขึ้นมา ซึ่งถ้าเข้าใจ dp แล้วจะสามารถออกแบบ และทำได้ทุกความละเอียดหน้าจอเลย
