Notch — พื้นฐาน การปรับอินเทอร์เฟซให้เข้ากับรอยบากหน้าจอ

Notch คืออะไร?

Notch (รอยบาก) คือพื้นที่ที่ด้านบนของหน้าจอสมาร์ทโฟนซึ่งเป็นที่ตั้งของกล้องหน้า ลำโพงสนทนา เซ็นเซอร์วัดระยะและแสงโดยรอบ และสำหรับ iPhone X ขึ้นไป — กล้องอินฟราเรด Face ID, โปรเจคเตอร์จุด และไฟส่องสว่าง (TrueDepth camera system) Notch ถูกนำมาใช้เพื่อเพิ่มพื้นที่หน้าจอที่ใช้งานได้ในขณะที่คงเซ็นเซอร์ที่จำเป็นทั้งหมดไว้ — แทนที่กรอบบน (bezel) หน้าจอจะขยายขึ้นไปรอบ ๆ รอยบาก

ขนาด: notch มาตรฐานของ iPhone มีความกว้างประมาณ ~34 มม. (~209 pt ในแนวตั้งสำหรับรุ่น 6.1 นิ้ว) และสูงประมาณ ~5 มม. (~30 pt) ที่ด้านข้างของ notch มี "หู" — ส่วนหน้าจอเล็ก ๆ ทางขวาและซ้ายของรอยบาก "หู" ขวามักจะแสดงเวลา ตัวบ่งชี้แบตเตอรี่ และ Wi-Fi; หูซ้ายแสดงผู้ให้บริการและสถานะ ในแนวนอน iOS จะซ่อน notch ด้วยแถบสีดำตลอดความกว้างของแถบสถานะ — เนื้อหาจะไม่แสดงในบริเวณรอยบาก

ไม่ใช่แค่ iPhone: แนวคิด notch ถูกนำไปใช้โดยผู้ผลิต Android หลายราย Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — ทุกรุ่นมีรอยบาก ผู้ผลิตบางรายไปไกลกว่านั้น: notch แบบหยดน้ำ (waterdrop), กล้อง punch-hole (รูในหน้าจอ), กล้องแบบเลื่อน (โมดูลที่ดึงออกได้) เรือธง Android สมัยใหม่ (Samsung Galaxy S23+, Google Pixel 8 Pro) ใช้ punch-hole — รูเล็กๆ สำหรับกล้องที่ด้านบนของหน้าจอ โดยไม่มีรอยบากกว้าง

Safe Area ใน iOS: safeAreaInsets

Safe Area คือพื้นที่สี่เหลี่ยมภายใน view ที่รับประกันว่าจะไม่ถูกบดบังโดยองค์ประกอบอินเทอร์เฟซระบบ: notch, มุมหน้าจอโค้งมน (corner radius), Home Indicator, แถบแท็บ (tab bar) และแถบนำทาง (navigation bar) ขนาด Safe Area จะถูกส่งคืนผ่านคุณสมบัติ UIView.safeAreaInsets — UIEdgeInsets ที่มีค่า top, left, bottom, right สำหรับ iPhone ที่มี notch, top inset = ~44 pt (แนวตั้ง) หรือ ~0 pt (แนวนอนที่มีแถบสีดำ)

// การใช้ safeAreaInsets สำหรับวางตำแหน่งเนื้อหา
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // การอ่านระยะขอบ Safe Area
        let safeArea = self.view.safeAreaInsets

        // การบันทึกค่าสำหรับการดีบัก
        print("Top inset: \(safeArea.top)")    // ~44 pt มี notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt มี Home Indicator

        // การวางตำแหน่งหัวเรื่องด้วย Safe Area
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // การจัดการการเปลี่ยนแปลง Safe Area (การหมุน, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // การคำนวณเลย์เอาต์ใหม่
    }
}

Auto Layout และ Safe Area: ใน Interface Builder ให้ใช้ "Safe Area" เป็นเป้าหมายของ anchor แทน "Superview" สำหรับเลย์เอาต์แบบโปรแกรม ให้ใช้ safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor) iOS จะอัปเดต safeAreaInsets โดยอัตโนมัติเมื่อหมุนอุปกรณ์ เข้าสู่ Split View บน iPad แสดง/ซ่อนคีย์บอร์ด และเปลี่ยนการวางแนว ตัวควบคุม UIKit มาตรฐานทั้งหมด (UINavigationController, UITabBarController) พิจารณา Safe Area อยู่แล้ว มุมมองและตัวควบคุมที่กำหนดเองต้องใช้ safeAreaInsets อย่างชัดเจน

Notch ใน Android: DisplayCutout และ WindowInsets

DisplayCutout คือคลาส Android SDK ที่เพิ่มใน API 28 (Android 9.0) ซึ่งอธิบายพื้นที่รอยบากบนหน้าจอ สามารถรับได้ผ่าน WindowInsets.displayCutout() คลาสนี้คืนค่า boundingBoxList — รายการสี่เหลี่ยมที่อธิบายรอยบาก และ safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — ระยะขอบขั้นต่ำสำหรับการแสดงเนื้อหาที่ปลอดภัย Android รองรับการกำหนดค่ารอยบากต่าง ๆ: กลาง (เหมือน iPhone), ด้านข้าง (กล้องที่มุม), คู่ (กล้องสองตัว), punch-hole

// การปรับอินเทอร์เฟซสำหรับ DisplayCutout ใน Activity
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // อนุญาตให้แสดงเนื้อหาในบริเวณรอยบาก (หากจำเป็น)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // การรับ DisplayCutout ผ่าน WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // การตั้งระยะขอบสำหรับเนื้อหาด้านบน
            headerView.updatePadding(top = safeTop)
        }
    }
}

โหมดการแสดงผล (layoutInDisplayCutoutMode): ALWAYS — เนื้อหาสามารถแสดงในบริเวณรอยบากได้ (สำหรับแอปเต็มหน้าจอ วิดีโอ เกม); NEVER — เนื้อหาไม่ทับซ้อนรอยบาก ระบบเพิ่มระยะขอบ; SHORT_EDGES — เนื้อหาแสดงในบริเวณรอยบากเฉพาะที่ขอบสั้น (สำหรับแอปแนวตั้งที่มี notch ด้านบน) โหมดเริ่มต้นคือ SHORT_EDGES (ตั้งแต่ Android 12) สำหรับกล้อง punch-hole รอยบากจะเล็กกว่า และแอปจำนวนมากใช้ ALWAYS เพื่อเพิ่มการใช้หน้าจอให้สูงสุด

วิวัฒนาการของ Notch: จาก iPhone X สู่ Dynamic Island

iPhone X (2017) — สมาร์ทโฟน Apple เครื่องแรกที่มี notch รอยบากบรรจุกล้อง TrueDepth สำหรับ Face ID — ระบบของกล้องอินฟราเรด โปรเจคเตอร์จุด และไฟส่องสว่าง ขนาดรอยบาก: ~34 มม. × 5 มม. ใน iOS 11 Apple ได้แนะนำ Safe Area สำหรับการปรับตัวของแอป ผู้ใช้ถูกแบ่งออกเป็นสองฝ่าย: บางคนยอมรับ notch ว่าจำเป็นสำหรับ Face ID คนอื่นวิจารณ์ว่าหน้าจอถูก "ตัด"

iPhone 13 (2021) — Apple ลดขนาด notch ลง 20% โดยย้ายลำโพงไปที่กรอบบน นี่คือ notch แบบคลาสสิกตัวสุดท้าย iPhone 14 และ 14 Plus (2022) คง notch ที่ลดขนาดไว้ iPhone 14 Pro และ Pro Max ได้แนะนำ Dynamic Island — รอยบากรูปวงรีที่รวมกล้องและเซ็นเซอร์ Face ID เข้าด้วยกัน ซึ่งเปลี่ยนรูปร่างแบบไดนามิกและแสดงการแจ้งเตือนระบบ (ตัวจับเวลา เพลง การเชื่อมต่อ AirPods) Dynamic Island กลายเป็นแพลตฟอร์มซอฟต์แวร์ที่มี API ของตัวเอง (ActivityKit, Live Activities)

Dynamic Island ไม่ใช่แค่รอยบาก แต่เป็นองค์ประกอบอินเทอร์เฟซแบบโต้ตอบ เมื่อเชื่อมต่อ AirPods เกาะจะขยายแสดงไอคอนและสถานะ การเรียกแท็กซี่ (Uber) แสดงเวลามาถึง ตัวจับเวลาจะมองเห็นได้ในเกาะเมื่อย่อแอป Dynamic Island มีให้บริการบน iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max Safe Area สำหรับ Dynamic Island: top inset = 54 pt (มากกว่า notch แบบคลาสสิก 10 pt)

กฎการออกแบบสำหรับอินเทอร์เฟซที่มีรอยบาก

อย่าซ่อนเนื้อหาไว้ด้านหลัง notch — ใช้ Safe Area หรือ DisplayCutout สำหรับการคำนวณระยะขอบอัตโนมัติ อย่ากำหนดค่าระยะขอบคงที่ (เช่น 44 pt) — ค่าเหล่านี้แตกต่างกันบนอุปกรณ์และการวางแนวต่างๆ ให้ใช้ API ของระบบเสมอในการอ่าน Safe Area: safeAreaInsets ใน iOS, windowInsets.displayCutout ใน Android ซึ่งรับประกันการแสดงผลที่ถูกต้องบนอุปกรณ์ทั้งหมด: iPhone SE (ไม่มี notch), iPhone 14 Pro (มี notch), iPhone 15 (Dynamic Island), iPad (ไม่มี notch แต่มี Home Indicator)

การวางแนวแนวนอน — พื้นที่เสี่ยงพิเศษ บน iPhone ที่มี notch ในแนวนอน iOS จะเพิ่มแถบสีดำโดยอัตโนมัติตลอดความกว้างของแถบสถานะ (เนื้อหาจะไม่แสดงทางซ้ายและขวาของ notch) ทำได้โดย Safe Area inset = 0 top แต่เพิ่ม left/right insets (~47 pt) อย่าพยายามปิดการทำงานนี้ — App Store จะปฏิเสธแอปที่ใช้พื้นที่ "ต้องห้าม" ของหน้าจอสำหรับเนื้อหาในแนวนอน สำหรับวิดีโอเต็มหน้าจอ ให้ใช้ AVPlayerViewController ซึ่งวางองค์ควบคุมไว้นอกบริเวณ notch โดยอัตโนมัติ

พื้นหลังและแถบสถานะ: หากคุณใช้สีพื้นหลังที่กำหนดเอง ควรเติมเต็มพื้นที่หน้าจอทั้งหมด รวมถึงพื้นที่ด้านหลัง notch อย่าวาดเนื้อหาทับแถบสถานะ — ใช้ Safe Area สำหรับโหมดมืด ตรวจสอบให้แน่ใจว่าแถบสถานะสามารถอ่านได้: ตั้งค่า preferredStatusBarStyle ให้ตรงกับสไตล์พื้นหลังของคุณ (.default สำหรับข้อความสีเข้มบนพื้นหลังสีอ่อน, .lightContent สำหรับข้อความสีอ่อนบนพื้นหลังสีเข้ม)

การทดสอบการปรับตัวเข้ากับ Notch

ซิมูเลเตอร์และอีมูเลเตอร์: Xcode มีซิมูเลเตอร์สำหรับทุกรุ่น iPhone ที่มี notch (iPhone X–14) และ Dynamic Island (iPhone 14 Pro–15) Android Studio มีอีมูเลเตอร์ที่มีการกำหนดค่ารอยบากต่าง ๆ (Google Pixel 3 XL, อีมูเลเตอร์แบบกำหนดเองที่มี cutout) ทดสอบในแนวตั้งและแนวนอน มีและไม่มีคีย์บอร์ด ใน Split View (iPad) ตรวจสอบว่าเนื้อหาทั้งหมดอ่านได้และไม่ถูกบดบัง

อุปกรณ์จริง: notch บนซิมูเลเตอร์และอุปกรณ์จริงอาจแตกต่างกัน ตัวอย่างเช่น ซิมูเลเตอร์ iPhone 14 Pro แสดง Dynamic Island แต่ไม่มีการโต้ตอบจริง (Live Activities) สำหรับ Android กล้อง punch-hole อาจไม่ถูกจำลองอย่างแม่นยำ วิธีที่ดีที่สุดคือทดสอบบนอุปกรณ์จริง ชุดขั้นต่ำ: iPhone SE (ไม่มี notch), iPhone 14 (มี notch), iPhone 15 Pro (Dynamic Island), Android ที่มี punch-hole, Android ที่มีหน้าจอ waterfall (Samsung Edge)

เครื่องมือ: สำหรับ iOS ให้ใช้ Xcode View Debugger ด้วยตัวเลือก "Show Safe Area Insets" — แสดงขอบเขต Safe Area ด้วยภาพ สำหรับ Android — Layout Inspector ใน Android Studio ซึ่งแสดง WindowInsets และ DisplayCutout ในแผง Attributes Accessibility Inspector ก็มีประโยชน์ในการตรวจสอบว่าองค์ประกอบทั้งหมดภายใน Safe Area สามารถเข้าถึงได้โดย VoiceOver/TalkBack อย่าลืม iPad ที่ไม่มี notch แต่มี Home Indicator (ระยะขอบล่าง ~21 pt) และมุมโค้งมน