Notch — dasar-dasar, adaptasi antarmuka untuk potongan layar

Apa itu Notch?

Notch (potongan, "alis") — area di bagian atas layar smartphone tempat kamera depan, speaker percakapan, sensor jarak dan cahaya, dan untuk iPhone X dan lebih baru — kamera inframerah Face ID, proyektor titik, dan penerangan (sistem TrueDepth camera) ditempatkan. Notch diperkenalkan untuk meningkatkan area layar yang berguna sambil mempertahankan semua sensor yang diperlukan — alih-alih bingkai atas (bezel), layar meluas ke atas di sekitar potongan.

Ukuran: notch standar iPhone memiliki lebar ~34 mm (~209 pt dalam orientasi potret untuk model 6.1 inci) dan tinggi ~5 mm (~30 pt). Di sisi notch terdapat "telinga" (ears) — bagian layar kecil di kanan dan kiri potongan. "Telinga" kanan biasanya menampilkan waktu, indikator baterai, dan Wi-Fi; kiri — operator dan status. Dalam orientasi lanskap, iOS menyembunyikan notch dengan garis hitam selebar status bar — konten tidak ditampilkan di zona potongan.

Bukan hanya iPhone: konsep notch diadopsi oleh banyak produsen Android. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — semuanya memiliki potongan. Beberapa produsen melangkah lebih jauh: potongan "tetesan air" (waterdrop notch), kamera punch-hole (lubang di layar), kamera geser (modul tarik). Flagship Android modern (Samsung Galaxy S23+, Google Pixel 8 Pro) menggunakan punch-hole — lubang minimal untuk kamera di bagian atas layar, tanpa potongan lebar.

Safe Area di iOS: safeAreaInsets

Safe Area — adalah area persegi panjang di dalam view yang dijamin tidak tertutup oleh elemen antarmuka sistem: notch, sudut layar membulat (corner radius), Home Indicator, bilah tab (tab bar), dan bilah navigasi (navigation bar). Ukuran Safe Area dikembalikan melalui properti UIView.safeAreaInsets — UIEdgeInsets dengan nilai top, left, bottom, right. Untuk iPhone dengan notch, margin atas = ~44 pt (potret) atau ~0 pt (lanskap dengan garis hitam).

// Penggunaan safeAreaInsets untuk memposisikan konten
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Membaca margin Safe Area
        let safeArea = self.view.safeAreaInsets

        // Logging nilai untuk debugging
        print("Inset atas: \(safeArea.top)")    // ~44 pt dengan notch
        print("Inset bawah: \(safeArea.bottom)") // ~34 pt dengan Home Indicator

        // Memposisikan judul dengan mempertimbangkan 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
        )
    }

    // Penanganan perubahan Safe Area (rotasi, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Perhitungan ulang layout
    }
}

Auto Layout dan Safe Area: di Interface Builder, gunakan "Safe Area" sebagai target anchor, bukan "Superview". Untuk layout terprogram, gunakan safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS secara otomatis memperbarui safeAreaInsets saat rotasi perangkat, transisi ke Split View di iPad, menampilkan/menyembunyikan keyboard, dan perubahan orientasi. Semua pengontrol UIKit standar (UINavigationController, UITabBarController) sudah memperhitungkan Safe Area. View dan pengontrol kustom harus secara eksplisit menggunakan safeAreaInsets.

Notch di Android: DisplayCutout dan WindowInsets

DisplayCutout — kelas Android SDK, ditambahkan di API 28 (Android 9.0), yang mendeskripsikan area potongan di layar. Dapat diperoleh melalui WindowInsets.displayCutout(). Kelas ini mengembalikan boundingBoxList — daftar persegi panjang yang mendeskripsikan potongan dan safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — margin minimal untuk tampilan konten yang aman. Android mendukung berbagai konfigurasi potongan: tengah (seperti iPhone), samping (kamera di sudut), ganda (dua kamera), punch-hole.

// Adaptasi antarmuka untuk DisplayCutout di Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Mengizinkan tampilan konten di zona potongan (jika perlu)
        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)

        // Mendapatkan DisplayCutout melalui WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Mengatur margin untuk konten atas
            headerView.updatePadding(top = safeTop)
        }
    }
}

Mode tampilan (layoutInDisplayCutoutMode): ALWAYS — konten dapat ditampilkan di zona potongan (untuk aplikasi full-screen, video, game); NEVER — konten tidak pernah menutupi potongan, sistem menambahkan margin; SHORT_EDGES — konten ditampilkan di zona potongan hanya di sisi pendek (untuk aplikasi potret dengan notch di atas). Mode standar — SHORT_EDGES (mulai Android 12). Untuk kamera punch-hole, potongan lebih kecil dan banyak aplikasi menggunakan ALWAYS untuk memaksimalkan penggunaan layar.

Evolusi Notch: dari iPhone X ke Dynamic Island

iPhone X (2017) — smartphone pertama Apple dengan notch. Potongan berisi kamera TrueDepth untuk Face ID — sistem yang terdiri dari kamera inframerah, proyektor titik (Dot Projector), dan penerangan (Flood Illuminator). Ukuran potongan: ~34 mm × 5 mm. Di iOS 11, Apple memperkenalkan Safe Area untuk adaptasi aplikasi. Pengguna terbagi: beberapa menerima notch sebagai kebutuhan untuk Face ID, yang lain mengkritik karena layar "terpotong".

iPhone 13 (2021) — Apple mengurangi notch sebesar 20% dengan memindahkan speaker ke bingkai atas layar. Ini adalah notch klasik terakhir. iPhone 14 dan 14 Plus (2022) mempertahankan notch yang diperkecil. iPhone 14 Pro dan Pro Max memperkenalkan Dynamic Island — potongan berbentuk elips yang menggabungkan kamera dan sensor Face ID, yang secara dinamis mengubah bentuk dan menampilkan notifikasi sistem (timer, musik, koneksi AirPods). Dynamic Island menjadi platform perangkat lunak dengan API sendiri (ActivityKit, Live Activities).

Dynamic Island — bukan sekadar potongan, tetapi elemen antarmuka interaktif. Saat menghubungkan AirPods, pulau meluas menampilkan ikon dan status. Panggilan taksi (Uber) menampilkan waktu kedatangan. Timer terlihat di pulau saat aplikasi diminimalkan. Dynamic Island tersedia di iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area untuk Dynamic Island: margin atas = 54 pt (10 pt lebih banyak dari notch klasik).

Aturan desain untuk antarmuka dengan potongan

Jangan pernah menyembunyikan konten di belakang notch — gunakan Safe Area atau DisplayCutout untuk perhitungan margin otomatis. Jangan menetapkan nilai margin tetap (misalnya 44 pt) — nilainya berbeda di perangkat dan orientasi yang berbeda. Selalu gunakan API sistem untuk membaca Safe Area: safeAreaInsets di iOS, windowInsets.displayCutout di Android. Ini menjamin tampilan yang benar di semua perangkat: iPhone SE (tanpa notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (tanpa notch, tetapi dengan Home Indicator).

Orientasi lanskap — zona risiko khusus. Di iPhone dengan notch dalam mode lanskap, iOS secara otomatis menambahkan garis hitam selebar status bar (konten di kiri dan kanan notch tidak ditampilkan). Ini dilakukan dengan Safe Area inset = 0 top, tetapi left/right insets yang ditingkatkan (~47 pt). Jangan mencoba menonaktifkan perilaku ini — App Store akan menolak aplikasi yang menggunakan zona layar "terlarang" untuk konten dalam lanskap. Untuk video full-screen, gunakan AVPlayerViewController, yang secara otomatis menempatkan kontrol di luar zona notch.

Latar belakang dan status bar: jika Anda menggunakan warna latar belakang kustom, itu harus mengisi seluruh area layar, termasuk zona di belakang notch. Jangan menggambar konten di atas status bar — gunakan Safe Area. Untuk mode gelap, pastikan status bar dapat dibaca: atur preferredStatusBarStyle sesuai dengan gaya latar belakang Anda (.default untuk teks gelap di latar terang, .lightContent untuk teks terang di latar gelap).

Pengujian adaptasi Notch

Simulator dan emulator: Xcode menyediakan simulator semua model iPhone dengan notch (iPhone X–14) dan Dynamic Island (iPhone 14 Pro–15). Android Studio menyediakan emulator dengan berbagai konfigurasi potongan (Google Pixel 3 XL, emulator kustom dengan cutout). Uji dalam orientasi potret dan lanskap, dengan dan tanpa keyboard, di Split View (iPad). Periksa bahwa semua konten dapat dibaca dan tidak tertutup.

Perangkat nyata: notch di simulator dan di perangkat nyata mungkin berbeda. Misalnya, simulator iPhone 14 Pro menampilkan Dynamic Island, tetapi tanpa interaktivitas nyata (Live Activities). Di Android, kamera punch-hole mungkin tidak dapat diemulasi secara akurat. Cara terbaik adalah menguji di perangkat nyata. Set minimal: iPhone SE (tanpa notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android dengan punch-hole, Android dengan layar waterfall (Samsung Edge).

Alat: untuk iOS, gunakan Xcode View Debugger dengan opsi "Show Safe Area Insets" — akan menampilkan batas Safe Area secara visual. Untuk Android — Layout Inspector di Android Studio, yang menampilkan WindowInsets dan DisplayCutout di panel Attributes. Juga Accessibility Inspector berguna untuk memeriksa bahwa semua elemen di dalam Safe Area dapat diakses oleh VoiceOver/TalkBack. Jangan lupakan iPad tanpa notch, tetapi dengan Home Indicator (margin bawah ~21 pt) dan sudut membulat.