Elevation — พื้นฐาน เงาและพิกัด Z ใน Android

Elevation คืออะไร?

Elevation เป็นเมตริกที่ถูกนำมาใช้ใน Material Design (Google I/O 2014) ซึ่งอธิบายตำแหน่งขององค์ประกอบตามแนวแกน z แตกต่างจาก x และ y (ระนาบสองมิติของหน้าจอ) z คือความสูงเหนือระนาบ Elevation แสดงเป็น dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น) และกำหนดเอฟเฟกต์ภาพสองอย่าง: เงา ซึ่งจะใหญ่ขึ้นและเบลอมากขึ้นเมื่อ elevation เพิ่มขึ้น และลำดับการวาด (องค์ประกอบที่มี elevation สูงกว่าจะถูกวาดทับองค์ประกอบที่มี elevation ต่ำกว่า)

อุปมาทางกายภาพ: ลองนึกภาพแผ่นกระดาษบนโต๊ะ ยิ่งกองสูงเท่าไร เงาจากแผ่นบนสุดก็ยิ่งยาวขึ้น Elevation ใน Material Design ทำงานในลักษณะเดียวกันทุกประการ — แต่ละองค์ประกอบคือ “แผ่นดิจิทัล” ที่ความสูงระดับหนึ่ง เมื่อผู้ใช้โต้ตอบกับองค์ประกอบ (กดปุ่ม ยกการ์ด) elevation จะเพิ่มขึ้นชั่วคราว — สิ่งนี้เรียกว่า “interaction elevation”

ตาม Material Design Guidelines (Google, 2026) การใช้ elevation อย่างเหมาะสมช่วยเพิ่มความสามารถในการสแกนอินเทอร์เฟซได้ 35%: ผู้ใช้ค้นหาองค์ประกอบที่โต้ตอบได้เร็วขึ้นเพราะพวกมัน “โดดเด่น” เหนือเนื้อหาแบบเรียบ อย่างไรก็ตาม จำนวนระดับที่มากเกินไป (มากกว่า 4) จะลดประสิทธิภาพนี้ — หากทุกอย่างลอยอยู่ ไม่มีอะไรที่ดูสำคัญ

Elevation ใน Android: คุณสมบัติและ API

ใน Android elevation ถูกนำมาใช้เป็นคุณสมบัติในตัวของ View ตั้งแต่ API 21 (Android 5.0 Lollipop) View.elevation กำหนดความสูงพื้นฐานเป็นพิกเซล (px) และ View.translationZ ให้ออฟเซ็ตเพิ่มเติมสำหรับแอนิเมชัน (เช่น เมื่อกด) ความสูงที่มองเห็นทั้งหมด = elevation + translationZ คุณสมบัติทั้งสองรองรับแอนิเมชันผ่าน ViewPropertyAnimator หรือ ObjectAnimator

<!-- XML: elevation และ translationZ -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_elevation"
    android:text="ปุ่มที่มี elevation" />

StateListAnimator — ทรัพยากร XML สำหรับสร้างแอนิเมชัน elevation และ translationZ ตามสถานะของ View (กด โฟกัส เปิดใช้งาน) ตัวอย่างเช่น เมื่อกดปุ่ม elevation สามารถเพิ่มขึ้นจาก 2 dp เป็น 8 dp สร้างเอฟเฟกต์การยกขึ้น StateListAnimator รองรับแอนิเมชันผ่าน ObjectAnimator สำหรับคุณสมบัติ View ใด ๆ

// Kotlin: การตั้งค่า elevation ด้วยโปรแกรม
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // ความสูงพื้นฐานเป็น px

// แอนิเมชัน elevation เมื่อกด
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — องค์ประกอบสำคัญสำหรับการเรนเดอร์เงา elevation ที่ถูกต้อง โดยค่าเริ่มต้น Android ใช้ ViewOutlineProvider.BACKGROUND ซึ่งสร้างเส้นขอบตาม drawable พื้นหลัง สำหรับ View ที่มีมุมโค้งมน (ผ่าน shape drawable) ต้องตั้งค่า OutlineProvider แบบกำหนดเอง มิฉะนั้นเงาจะเป็นรูปสี่เหลี่ยมผืนผ้า ส่วนประกอบ Material (CardView, MaterialButton) จัดการ OutlineProvider โดยอัตโนมัติ

ระดับ Elevation ใน Material Design 3

Material Design 3 (Material You) ได้ปรับปรุงระบบ elevation เมื่อเทียบกับ Material Design 2 แทนที่จะมี 12 ระดับคงที่ (Material 2) M3 นำเสนอ 5 โทนสีพื้นฐาน ซึ่งแต่ละโทนสอดคล้องกับระดับ elevation ที่เฉพาะเจาะจง นอกจากนี้ M3 ยังแนะนำแนวคิดของ “เงาสี” (color shadow) บน Android 12+: เงาสามารถถูกแต่งสีด้วยสีเน้นของธีมแทนที่จะเป็นสีดำเทา

Interaction elevation — การเพิ่มขึ้นชั่วคราวของ elevation ระหว่างการโต้ตอบของผู้ใช้กับองค์ประกอบ ใน Material Design 3 องค์ประกอบที่โต้ตอบได้ (ปุ่ม การ์ด) จะได้รับ +1–2 dp เพิ่มจาก elevation พื้นฐานเมื่อถูกกด (สถานะ pressed) หรือโฟกัส (สถานะ focused) สำหรับ FloatingActionButton interaction elevation คือ +6 dp แอนิเมชันการเปลี่ยนระหว่างสถานะควรใช้เวลา 150–200 ms เพื่อการตอบสนองทางสัมผัสที่เป็นธรรมชาติ

Elevation ใน Jetpack Compose

Jetpack Compose รองรับ elevation ผ่านส่วนประกอบ Card และ Surface ซึ่งมีพารามิเตอร์ elevation ในตัว แตกต่างจากระบบ View Compose เรนเดอร์เงาผ่านเอ็นจินการเรนเดอร์ของตัวเอง ทำให้มั่นใจได้ถึงพฤติกรรมที่สอดคล้องกันในทุกเวอร์ชันของ Android (API 21+) Modifier.shadow() เป็นตัวปรับแต่งระดับต่ำสำหรับเพิ่มเงาให้กับ composable ใด ๆ

// Jetpack Compose: elevation ผ่าน Surface และ Card
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Surface

Card(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        focusedElevation = 6.dp
    ),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    )
) {
    Text("การ์ดที่ควบคุมด้วย elevation")
}

// Modifier.shadow สำหรับรูปร่างที่กำหนดเอง
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* การกระทำ */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("พื้นผิวที่มีเงา") }

แอนิเมชัน elevation ใน Compose ถูกนำมาใช้ผ่าน animateFloatAsState หรือ Animatable เมื่อ elevation เปลี่ยนแปลง Compose จะสร้างแอนิเมชันเงาโดยอัตโนมัติ สำหรับองค์ประกอบที่โต้ตอบได้ ให้ใช้ M3 InteractionSource ร่วมกับ animateElevation เพื่อให้ elevation ตอบสนองต่อการกด โฟกัส และการลาก Material 3 ใน Compose 1.2+ รองรับเงาสี — เงาที่ถูกแต่งสีด้วยสี primary Container ของธีม

Elevation บน iOS: การจำลองความสูง

บน iOS ไม่มีสิ่งที่เทียบเท่าในตัวสำหรับ elevation จาก Material Design Human Interface Guidelines ของ Apple ไม่ใช้พิกัด z สำหรับการจัดการเงา — แต่ผู้พัฒนากำหนดค่าเงาด้วยตนเองผ่าน CALayer.shadow* อย่างไรก็ตาม แนวคิดของลำดับชั้นทางสายตาผ่านเงาและความลึกก็มีอยู่บน iOS เช่นกัน: การนำเสนอแบบโมดอล UIAlertController, UIPopoverPresentationController — ทั้งหมดใช้เงาเพื่อแยกตัวออกจากพื้นหลัง

สำหรับ การจำลอง elevation บน iOS ผู้พัฒนาใช้การรวมกันของ shadowOpacity + shadowRadius + shadowOffset ยิ่ง “ความสูง” ที่ต้องการมากเท่าใด รัศมีเบลอและออฟเซ็ตเงาก็ยิ่งมากขึ้นเท่านั้น ใน SwiftUI เงาจะถูกกำหนดผ่านตัวปรับแต่ง .shadow() พร้อมพารามิเตอร์ สำหรับพฤติกรรมที่คล้าย Material บน iOS มีไลบรารีเช่น Material Components for iOS (MDC) โดย Google

// iOS: การจำลอง elevation ผ่าน CALayer
import UIKit

extension UIView {
    func applyElevation(level: Int) {
        let elevationMap: [Int: (CGFloat, CGFloat, CGFloat)] = [
            1: (0.05, 1, 2),
            2: (0.08, 2, 4),
            3: (0.11, 4, 8),
            4: (0.12, 6, 12),
            5: (0.14, 8, 16),
            6: (0.15, 12, 24)
        ]
        let (opacity, offset, radius) = elevationMap[level] ?? (0.08, 2, 4)
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = Float(opacity)
        layer.shadowOffset = CGSize(width: 0, height: offset)
        layer.shadowRadius = radius
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

// การใช้งาน
cardView.applyElevation(level: 3)  // เทียบเท่า 6 dp

Material Components for iOS (MDC-iOS) — ไลบรารีของ Google ที่นำ Material Design elevation มาสู่ iOS MDC-iOS จัดเตรียมคลาส MDCShadowElevation พร้อมค่าที่กำหนดไว้ล่วงหน้า MDCShadowLayer สำหรับการเรนเดอร์เงา และ MDCCard สำหรับการ์ด Material ที่มี elevation ที่ถูกต้อง MDC-iOS รองรับแอนิเมชัน elevation เมื่อกดผ่านคุณสมบัติเงาที่มีสถานะ