dp — พื้นฐาน, พิกเซลที่ไม่ขึ้นกับความหนาแน่นใน Android

dp ใน Android คืออะไร?

dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น) เป็นหน่วยวัดเสมือนใน Android ที่ถูกนำมาใช้เพื่อรวมขนาดขององค์ประกอบ UI บนอุปกรณ์ที่มีความหนาแน่นของพิกเซลต่างกัน หนึ่ง dp มีค่าเท่ากับประมาณหนึ่งพิกเซลทางกายภาพบนหน้าจอที่มีความหนาแน่น 160 dpi (mdpi) บนหน้าจอที่มีความหนาแน่น 320 dpi (xhdpi) 1 dp เท่ากับ 2 พิกเซลทางกายภาพ ดังนั้นขนาดทางกายภาพขององค์ประกอบบนหน้าจอยังคงเท่าเดิม — ประมาณ 1/160 นิ้ว ตามข้อมูลของ Android Developers (2025) dp เป็นหน่วยวัดเดียวที่ควรใช้สำหรับขนาด layout, padding, margin และความกว้าง/ความสูงของ view

ทำไมไม่ควรใช้ px

หากคุณกำหนดความกว้างของปุ่มเป็น 160 px บนหน้าจอ mdpi จะกว้าง 1 นิ้ว แต่บนหน้าจอ xxxhdpi (640 dpi) — เพียง 0.25 นิ้ว dp แก้ปัญหานี้: 160 dp บนหน้าจอใดๆ จะเท่ากับ 1 นิ้ว Android จะแปลง dp เป็น px โดยอัตโนมัติผ่าน DisplayMetrics.density ระหว่างการเรนเดอร์ ตามข้อมูลของ Android Developer Blog (2025) ก่อนการนำ dp มาใช้ (Android 1.0) นักพัฒนาต้องคำนวณออฟเซ็ต px ด้วยตนเอง ซึ่งทำให้เกิดบั๊กอย่างต่อเนื่องเมื่อพอร์ต

dp, px และ sp: แตกต่างกันอย่างไร

dp, px และ sp เป็นสามหน่วยวัดใน Android แต่ละหน่วยมีวัตถุประสงค์ของตัวเอง px คือพิกเซลหน้าจอทางกายภาพที่ขึ้นอยู่กับความหนาแน่น dp คือพิกเซลที่ไม่ขึ้นกับความหนาแน่นสำหรับขนาดขององค์ประกอบ sp คือพิกเซลที่ไม่ขึ้นกับสเกลสำหรับข้อความที่คำนึงถึงการตั้งค่าขนาดฟอนต์ของระบบด้วย ตามข้อมูลของ Material Design (2025) ความแตกต่างระหว่าง dp และ sp เป็นจุดสำคัญของการเข้าถึง: ผู้ใช้สายตาไม่ดีจะเพิ่มขนาดฟอนต์ และค่า sp จะปรับโดยอัตโนมัติ ในขณะที่ dp ไม่ปรับ

สูตรแปลง dp เป็น px และกลับกัน

สูตรการแปลง dp เป็น px: px = dp × (dpi / 160) สำหรับการแปลงกลับ: dp = px / (dpi / 160) density คืออัตราส่วน dpi / 160 ซึ่ง Android คำนวณตาม DisplayMetrics บน mdpi density = 1.0, บน hdpi = 1.5, บน xhdpi = 2.0, บน xxhdpi = 3.0, บน xxxhdpi = 4.0 ดังนั้น 48 dp ในพิกเซล: บน mdpi — 48 px, บน xxhdpi — 144 px ตามข้อมูลของ Google I/O 2024 สูตรนี้สามารถใช้สำหรับการแปลงโดยประมาณของ pt (จุด) iOS เป็น dp — 1 pt ≈ 1 dp

dimens.xml: การจัดการขนาดแบบรวมศูนย์

dimens.xml คือไฟล์ทรัพยากร Android ใน res/values/ ที่ออกแบบมาเพื่อจัดเก็บขนาดทั้งหมดเป็น dp (และ sp สำหรับข้อความ) การรวมศูนย์ขนาดใน dimens.xml ช่วยให้การบำรุงรักษาง่ายขึ้น: การเปลี่ยนค่าเดียวใน dimens.xml จะอัปเดตขนาดบนทุกหน้าจอของแอปพลิเคชัน คุณสามารถสร้างไฟล์ dimens.xml ที่มีคุณสมบัติสำหรับความหนาแน่นต่างๆ (values-hdpi, values-xhdpi) ตามข้อมูลของ Android Jetpack Docs (2025) Google แนะนำให้จัดเก็บระยะขอบ, padding, ความกว้างขององค์ประกอบ (ค่าคงที่), ขนาดอวาตาร์ และความสูงของแถบเครื่องมือใน dimens.xml

<resources>
    <dimen name="margin_small">8dp</dimen>
    <dimen name="margin_medium">16dp</dimen>
    <dimen name="margin_large">24dp</dimen>
    <dimen name="avatar_size">48dp</dimen>
    <dimen name="toolbar_height">56dp</dimen>
    <dimen name="text_size_body">14sp</dimen>
    <dimen name="icon_size_small">24dp</dimen>
</resources>

ในไฟล์นี้ แต่ละ dimen มีชื่อและค่า การใช้งานในมาร์กอัป XML: @dimen/avatar_size ตามข้อมูลของ Material Design Guidelines (2025) ขั้นตอนกริดพื้นฐานใน Android คือ 8 dp (กริด 8 จุด) ระยะขอบ ขนาดองค์ประกอบ และระยะทางทั้งหมดต้องเป็นผลคูณของ 8 dp: 8, 16, 24, 32, 48, 56, 64, 72 dp สำหรับข้อความ ขั้นตอนคือ 4 sp

การใช้ dp ในการเขียนโปรแกรมใน Kotlin และ XML

ในมาร์กอัป XML ใช้ dp โดยตรง: android:layout_width="48dp" ในโค้ดการเขียนโปรแกรม (Kotlin/Java) คุณต้องแปลง dp เป็น px โดยใช้ TypedResource หรือฟังก์ชันส่วนขยาย TypedResource มีวิธีการพร้อมใช้สำหรับทำงานกับ dp ในรันไทม์: getDimensionPixelSize() คืนค่า px เป็นจำนวนเต็ม ใน Jetpack Compose dp เป็นหน่วยวัดมาตรฐานในตัวปรับแต่งและคอนเทนเนอร์เค้าโครง

// การแปลง dp เป็น px ด้วยโปรแกรม
fun Context.dpToPx(dp: Int): Int {
    return (dp * resources
        .displayMetrics
        .density).toInt()
}

// การใช้งานใน Activity
val paddingPx = dpToPx(16)
button.setPadding(
    paddingPx,
    paddingPx,
    paddingPx,
    paddingPx,
)

// Jetpack Compose: dp เป็นหน่วยในตัว
Modifier
    .padding(16.dp)
    .size(48.dp)

ในตัวอย่างนี้ dpToPx() คือฟังก์ชันส่วนขยายสำหรับ Context ที่แปลง dp เป็น px โดยใช้ displayMetrics.density ใน Jetpack Compose dp ถูกสร้างไว้ในระบบชนิดและไม่ต้องการการแปลงด้วยตนเอง — คอมไพเลอร์จะแปล dp เป็น px โดยอัตโนมัติในขั้นตอนการเรนเดอร์

มาร์กอัป XML กับ dp

<Button
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:padding="@dimen/margin_medium"
    android:textSize="@dimen/text_size_body"
    android:text="@string/button_label"
    android:layout_marginTop="16dp"
/>

ใน XML dp ระบุเป็นส่วนต่อท้ายของตัวเลข — margin_top="16dp" สำหรับข้อความใช้ sp — textSize="@dimen/text_size_body" การอ้างอิง @dimen ช่วยให้การจัดการค่าแบบรวมศูนย์ การใช้ match_parent สำหรับความกว้างและ 48dp สำหรับความสูงเป็นรูปแบบ Material Design มาตรฐานสำหรับปุ่ม

ข้อผิดพลาดทั่วไปเมื่อใช้ dp

ตามการวิเคราะห์แอปพลิเคชัน Android จาก Google Play Console (2025) ข้อผิดพลาดห้าประการที่พบบ่อยที่สุดคือ: การใช้ px แทน dp ในมาร์กอัป XML การไม่มี dimens.xml (ค่าที่เขียนแบบอินไลน์) การแปลง dp เป็น px ไม่ถูกต้องในโค้ด (ใช้การหารจำนวนเต็ม) การละเลย sp สำหรับข้อความ และไม่คำนึงถึงการตั้งค่าขนาดฟอนต์ของระบบผ่าน sp การหารจำนวนเต็ม เป็นข้อผิดพลาดที่อันตรายที่สุด: ใน Kotlin val px = dp * density — ถ้า dp และ density เป็น Int ผลลัพธ์ก็จะเป็น Int ด้วย และความแม่นยำจะสูญเสียไป

• px แทน dp — แอปพลิเคชันดูแตกต่างกันบนอุปกรณ์ที่มีความหนาแน่นต่างกัน แก้ไขโดยการแทนที่ px ด้วย dp ใน XML
• ค่าแบบอินไลน์ — ขนาดถูกเขียนลงในไฟล์เค้าโครงโดยตรง การทำซ้ำค่าทำให้การบำรุงรักษาและการอัปเดตซับซ้อน
• sp สำหรับข้อความ — การใช้ dp สำหรับขนาดฟอนต์ละเว้นการตั้งค่าผู้ใช้ ทำลายการเข้าถึง
• การหารจำนวนเต็ม — ใน Kotlin การหาร Int ด้วย Int จะได้ Int ทำให้สูญเสียเศษส่วน ให้ใช้ Float เสมอ