Safe Area — คืออะไร ระยะห่างจาก notch และ StatusBar

Safe Area คืออะไร?

Safe Area คือพื้นที่สี่เหลี่ยมบนหน้าจอที่รับประกันว่าเนื้อหาจะไม่ถูกบดบังโดยองค์ประกอบระบบฮาร์ดแวร์และซอฟต์แวร์: รอยบากกล้อง (notch), Dynamic Island, แถบสถานะ (StatusBar), ตัวบ่งชี้การนำทางด้วยท่าทาง (Home Indicator), มุมหน้าจอโค้งมน และแถบนำทาง ขอบเขตของ Safe Area เปลี่ยนแปลงแบบไดนามิกเมื่อหมุนอุปกรณ์ เรียกใช้แป้นพิมพ์ หรือเริ่ม Split View ตามข้อกำหนดของ Apple Human Interface Guidelines (2025) การละเลย Safe Area ถือเป็นข้อบกพร่องในการออกแบบและอาจนำไปสู่การปฏิเสธแอประหว่างการตรวจสอบ

ทำไมต้องใช้ Safe Area

Safe Area แก้ปัญหาการแตกแยกของหน้าจอในระบบนิเวศมือถือ ก่อน iPhone X iPhone ทุกรุ่นมีหน้าจอสี่เหลี่ยมที่มีสัดส่วนเท่ากัน ด้วยการถือกำเนิดของ notch จำนวนรูปแบบหน้าจอเพิ่มขึ้นเป็นมากกว่า 20 — ขนาด notch ที่แตกต่างกัน, Dynamic Island, มุมโค้งมน, ตัวบ่งชี้ Safe Area ทำให้ developers ไม่ต้องกังวลกับความแตกต่างเหล่านี้โดยการจัดหา API ที่เป็นหนึ่งเดียวสำหรับระยะห่างแบบปรับได้ ตามข้อมูลของ Apple Developer (2025) iOS ใช้ Safe Area โดยอัตโนมัติกับ root view แต่ UICollectionView และ UIScrollView ต้องการการกำหนดค่าด้วยตนเอง

Safe Area ใน iOS: SafeAreaLayoutGuide และ SwiftUI

ใน iOS Safe Area ถูกนำไปใช้ผ่าน SafeAreaLayoutGuide ใน UIKit และตัวปรับแต่ง safeAreaInset ใน SwiftUI SafeAreaLayoutGuide คือคำแนะนำเลย์เอาต์ที่เพิ่มในแต่ละ UIView และกำหนดพื้นที่สี่เหลี่ยมที่ปราศจากองค์ประกอบระบบ ใน Interface Builder Safe Area จะแสดงเป็นพื้นที่สีฟ้า SwiftUI ใช้ Safe Area โดยอัตโนมัติกับคอนเทนเนอร์ส่วนใหญ่ แต่อนุญาตให้ละเว้นได้ผ่าน .ignoresSafeArea()

// UIKit: SafeAreaLayoutGuide
let safeGuide = view.safeAreaLayoutGuide
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.topAnchor.constraint(
        equalTo: safeGuide.topAnchor),
    button.leadingAnchor.constraint(
        equalTo: safeGuide.leadingAnchor),
    button.trailingAnchor.constraint(
        equalTo: safeGuide.trailingAnchor),
])

SafeAreaLayoutGuide ใน UIKit กำหนดจุดยึดสี่จุด — บน, ล่าง, ต้น, ปลาย — ซึ่งพิจารณา notch, StatusBar และ Home Indicator โดยอัตโนมัติ วิธีการนี้ทำงานบนอุปกรณ์ iOS ทั้งหมดตั้งแต่ iOS 11 เป็นต้นไป ใน SwiftUI เอฟเฟกต์เดียวกันนี้ทำได้ผ่านตัวปรับแต่งเนื้อหาภายใน NavigationStack หรือ VStack — SwiftUI ใช้ Safe Area Insets โดยอัตโนมัติ

// SwiftUI: safeAreaInset และ ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("เนื้อหาใน Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("แถบที่ด้านล่างของหน้าจอ")
        .padding()
        .background(.thinMaterial)
}

ใน SwiftUI .ignoresSafeArea() อนุญาตให้พื้นหลังขยายเกิน Safe Area ในขณะที่ .safeAreaInset(edge:) เพิ่มแผงที่กำหนดเองซึ่งลด Safe Area ทางด้านที่ระบุ นี่เป็นรูปแบบมาตรฐานสำหรับแถบนำทาง แถบเครื่องมือ และแบนเนอร์โฆษณา

Safe Area ใน Android: WindowInsets และ System Bars

ใน Android Safe Area ถูกนำไปใช้ผ่าน WindowInsets (API 30+) และ WindowInsetsCompat (ไลบรารี AndroidX) WindowInsets ให้ระยะห่างสำหรับ Status Bar, Navigation Bar, IME (แป้นพิมพ์) และท่าทางของระบบ เริ่มตั้งแต่ Android 10 (API 29) Google แนะนำให้ใช้ WindowInsetsCompat.getInsets() กับ WindowInsetsCompat.Type.systemBars() เพื่อรับชุดระยะห่างที่เป็นหนึ่งเดียวสำหรับองค์ประกอบระบบทั้งหมด

// Android: WindowInsets (Kotlin)
class MainActivity : AppCompatActivity() {
    override fun onCreate(
        savedInstanceState: Bundle?
    ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main_content)
        ) { view, insets ->
            val systemBars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
            )
            view.setPadding(
                systemBars.left,
                systemBars.top,
                systemBars.right,
                systemBars.bottom
            )
            ViewCompat.ON_APPLY_WINDOW_INSETS_LISTENER
        }
    }
}

ในตัวอย่างนี้ WindowInsets ส่งคืนระยะห่างสำหรับแถบระบบทั้งหมด — Status Bar ด้านบน, Navigation Bar ด้านล่าง setOnApplyWindowInsetsListener ถูกเรียกทุกครั้งที่ระยะห่างเปลี่ยนแปลง (การหมุน, การเรียกแป้นพิมพ์) เมธอด systemBars() รวมแถบสถานะ แถบนำทาง และแถบปรับแต่งเป็นชุดเดียว ทำให้โค้ดง่ายขึ้น

Edge-to-Edge ใน Android

เริ่มตั้งแต่ Android 15 Google กำหนดให้แสดงผลแบบ edge-to-edge สำหรับแอปพลิเคชันทั้งหมดที่กำหนดเป้าหมาย API ใหม่ ซึ่งหมายความว่าแอปพลิเคชันวาดภายใต้แถบระบบ และ Safe Area ถูกนำไปใช้ผ่าน handleWindowInsets หรือ WindowInsetController ตามข้อมูลของ Android Developer Blog (2025) 68% ของแอปพลิเคชันได้เปลี่ยนไปใช้ edge-to-edge แล้ว ซึ่งช่วยปรับปรุงการรับรู้ทางภาพบนอุปกรณ์ที่มีหน้าจอขนาดใหญ่

Safe Area, Padding และ Insets: ต่างกันอย่างไร

Safe Area, Padding และ Insets เป็นแนวคิดที่เกี่ยวข้องแต่แตกต่างกัน Safe Area คือพื้นที่หน้าจอที่รับประกันว่าปราศจากองค์ประกอบระบบ Padding คือระยะห่างภายในขององค์ประกอบจากขอบของมัน Insets คือค่าออฟเซ็ตตัวเลขเฉพาะที่ส่งคืนโดย API Safe Area ตามข้อมูลของ Apple Tech Notes (2025) ความสับสนระหว่าง Safe Area และ Padding เป็นสาเหตุของ 40% ของปัญหาการปรับตัวในร้านค้าแอป

ตัวอย่างการนำ Safe Area ไปใช้พร้อมโค้ด

ลองพิจารณาสถานการณ์ทั่วไป: Safe Area ใน UIKit สำหรับแนวนอนที่มี notch, Safe Area ใน SwiftUI พร้อมแผงที่กำหนดเอง, Safe Area ใน Android Compose ตัวอย่างสำหรับ iOS UIKit — การวางคอลเล็กชันภายใน Safe Area บน iPhone ที่มี Dynamic Island ตัวอย่างสำหรับ Jetpack Compose — การใช้ WindowInsets ใน Material 3

// Jetpack Compose: ระยะห่าง Safe Area
@OptIn(ExperimentalMaterial3Api::class)
fun SafeAreaScreen() {
    val systemBars = with(
        LocalDensity.current
    ) {
        val insets = WindowInsets
            .systemBars
            .getAsPaddingValues()
        PaddingValues(
            top = insets.calculateTopPadding(),
            bottom = insets.calculateBottomPadding()
        )
    }
    Scaffold(
        contentWindowInsets = WindowInsets(
            top = systemBars.computeTopPadding(),
            bottom = systemBars.computeBottomPadding()
        )
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {
            Text("เนื้อหาใน Safe Area")
        }
    }
}

ใน Jetpack Compose Scaffold พิจารณา WindowInsets โดยอัตโนมัติผ่านพารามิเตอร์ contentWindowInsets InnerPadding ถูกส่งต่อไปยังเนื้อหาและนำไปใช้กับองค์ประกอบภายใน Column ที่มีตัวปรับแต่ง padding(innerPadding) รับประกันว่าข้อความจะไม่ไปอยู่ใต้แถบระบบ

ข้อผิดพลาดทั่วไปเมื่อทำงานกับ Safe Area

ตามการวิเคราะห์ App Store Review โดย Apple (2025) ข้อผิดพลาดห้าประการที่พบบ่อยที่สุดคือ: การละเลย Safe Area ในแนวนอน, การใช้ระยะห่างแบบตายตัวแทน SafeAreaLayoutGuide, การจัดการ Safe Area ที่ไม่ถูกต้องใน UIScrollView, การลืมระยะห่างในการนำเสนอแบบ modal และการขาดการปรับตัวสำหรับ Dynamic Island ระยะห่างแบบตายตัว (20px คงที่ด้านบน) เป็นข้อผิดพลาดที่พบบ่อยที่สุด: บน iPhone 14 Pro 20px เหล่านั้นกลายเป็น 59px และเนื้อหาถูกตัด

• การละเลยแนวนอน — ในแนวนอน Safe Area มีระยะห่างที่แตกต่างกัน: Home Indicator เลื่อนไปด้านขวาและระยะห่างด้านบนลดลง
• ระยะห่างแบบตายตัว — ค่า 20px หรือ 44px ใช้ได้กับ iPhone รุ่นเก่าที่ไม่มี notch เท่านั้น บนอุปกรณ์สมัยใหม่ ระยะห่างแตกต่างกัน 2-3 เท่า
• ScrollView และ Safe Area — contentInsetAdjustmentBehavior ใน UIScrollView ต้องตั้งค่าเป็น .always มิฉะนั้นเนื้อหาจะถูกซ่อนอยู่ใต้แถบระบบ