Dynamic Island: apa itu, notifikasi interaktif iPhone

Apa itu Dynamic Island di iPhone?

Dynamic Island — elemen antarmuka iPhone 14 Pro, 15 Pro dan yang lebih baru, yang menggunakan area di sekitar kamera depan dan sensor Face ID untuk menampilkan notifikasi dan Live Activity. Tidak seperti potongan notch lama yang merupakan elemen hitam statis, Dynamic Island secara dinamis mengubah bentuk dan ukuran: meluas untuk menampilkan timer, menyusut untuk ikon AirPods yang terhubung, berubah menjadi persegi panjang untuk hasil olahraga.

Implementasi teknis Dynamic Island didasarkan pada potongan hardware (pill-shaped cutout) layar OLED dan pemrosesan perangkat lunak piksel di sekitarnya. Sistem meningkatkan kecepatan penyegaran piksel hingga 120 Hz di area Island dan menggunakan penghalusan untuk transisi mulus antara konten dan area hitam kamera. Pengembang tidak memprogram Island secara langsung — ia membuat konten melalui ActivityKit, dan sistem menempatkannya di sekitar potongan secara otomatis.

Persepsi pengguna Dynamic Island mengubah kekurangan hardware menjadi elemen fungsional. Menurut penelitian Apple, pengguna menganggap Island sebagai bagian alami dari layar setelah beberapa hari penggunaan. Pencahayaan dan animasi menarik perhatian — misalnya, kedatangan notifikasi menggeser Island dan menampilkan konten dengan efek perluasan pada 120 frame per detik.

Mode tampilan Dynamic Island

Dynamic Island mendukung tiga mode tampilan konten, yang dipilih sistem secara otomatis berdasarkan jenis dan jumlah aktivitas. Pengembang menentukan UI untuk setiap mode di WidgetBundle, tetapi tidak mengelola mode mana yang aktif saat ini. Sistem juga dapat menampilkan dua aktivitas secara bersamaan: satu di kiri potongan, satu di kanan.

Transisi antar mode dilakukan dengan animasi sistem selama 0.4–0.6 detik dengan kurva ease-in-out. Saat Activity baru muncul, Island meluas dari mode kompak ke diperluas. Saat selesai — menyusut kembali. Pengguna dapat memaksa mode diperluas untuk mengecil dengan menggeser ke kiri — Island beralih ke mode kompak atau minimal. Sistem juga mengecilkan mode diperluas setelah 5 detik tidak aktif, jika tidak ada pembaruan yang diharapkan.

Dua aktivitas — jika dua aplikasi memiliki Live Activity aktif, Dynamic Island menampilkannya di kedua sisi potongan. Sisi kiri — Activity pertama yang dijalankan, sisi kanan — kedua. Jika hanya satu aktivitas, ia menempati sisi kiri, sisi kanan tetap kosong. Saat menekan salah satu sisi, Island meluas dan menampilkan konten Activity tersebut. Sistem sendiri yang memutuskan Activity mana yang mendapat prioritas jika terjadi konflik.

Membuat konten untuk Dynamic Island

Konten Dynamic Island dibuat secara eksklusif melalui Live Activity dengan framework ActivityKit. Pengembang menentukan empat area dalam kode: kompak kiri (compactLeading), kompak kanan (compactTrailing), minimal (minimal) dan diperluas (expanded). Setiap area adalah SwiftUI View yang menerima status Activity saat ini melalui context. Jika area tidak ditentukan, Island tidak menampilkan Activity ini dalam mode yang sesuai.

struct DeliveryIsland: DynamicIsland {
    var body: some DynamicIslandContent {
        DynamicIslandExpandedContent {
            VStack(alignment: .leading) {
                Text(context.state.status)
                    .font(.headline)
                ProgressView(
                    value: context.state.progress
                )
                Text("ETA: \(context.state.minutes) min")
                    .font(.caption)
            }
        } compactLeading: {
            Image(systemName: "box.truck")
        } compactTrailing: {
            Text("\(context.state.minutes) min")
                .monospacedDigit()
        } minimal: {
            Image(systemName: "box.truck")
        }
    }
}

Batasan SwiftUI di Dynamic Island — komponen yang tersedia: Text, Image, HStack, VStack, ZStack, Spacer, ProgressView, Button (hanya melalui Link), Gauge. Dilarang: ScrollView, List, TabView, animasi, gesture recognizers. Palet warna — hanya System Colors (label, secondaryLabel, tint). Font — ukuran sistem dari .caption hingga .title3. Font kustom dan SF Symbols berfungsi dengan benar.

Menguji Dynamic Island — Xcode menyediakan simulator dengan dukungan Dynamic Island. Pilih iPhone 14 Pro atau 15 Pro sebagai perangkat target. ActivityKit mensimulasikan berbagai mode Island: tombol Dynamic Island Mode di menu Debug Xcode beralih antara kompak, minimal, dan diperluas. Untuk menguji beberapa Activity secara bersamaan, gunakan skema dengan ActivityID berbeda atau jalankan dua instance aplikasi.

Peristiwa sistem di Dynamic Island

Peristiwa sistem — panggilan, AirPods, Face ID, pengisian daya dan lainnya — memiliki prioritas di atas Live Activity kustom. Saat peristiwa sistem terjadi, Island menjeda tampilan konten kustom dan menampilkan konten sistem. Setelah peristiwa sistem selesai, Island kembali ke konten kustom dengan animasi. Pengembang tidak dapat membatalkan atau mengubah peristiwa sistem — peristiwa tersebut dikelola di tingkat sistem operasi iOS.

Panggilan masuk — peristiwa sistem terpenting. Dynamic Island menampilkan nama penelepon di kiri potongan dan durasi/status di kanan. Selama panggilan aktif, Island tidak menampilkan Live Activity kustom apa pun. Pengguna dapat memperluas Island untuk membuka layar panggilan atau mengecilkannya untuk melanjutkan pekerjaan di aplikasi dengan panggilan aktif di latar belakang.

Koneksi AirPods — saat membuka casing di dekat iPhone, Dynamic Island menganimasikan koneksi dan menampilkan daya setiap earbud dan casing. Animasi berlangsung 2–3 detik, setelah itu Island kembali ke status sebelumnya. Jika pengguna tidak memiliki Live Activity aktif, Island tetap kosong. AirPods Pro 2 juga menampilkan volume dan mode peredam bising saat menekan batang.

Praktik terbaik pengembangan untuk Dynamic Island

Praktik terbaik Dynamic Island dari Apple direkomendasikan untuk memastikan pengalaman pengguna yang berkualitas. Mode kompak harus menampilkan hanya informasi terpenting — ikon dan satu angka atau label pendek. Mode diperluas — hanya informasi kunci tanpa elemen berlebihan. Hindari menempatkan teks dalam mode kompak jika melebihi 20 karakter — sistem memotong teks dengan elipsis.

Pembaruan Push untuk Dynamic Island — gunakan ActivityKit push untuk pembaruan jarang (status pesanan, hasil olahraga) dan pembaruan lokal untuk timer atau stopwatch yang sering. Notifikasi push melewati APNs dan membutuhkan waktu 0.5–2 detik untuk muncul di Island. StaleDate — tetapkan tanggal kedaluwarsa konten: jika pembaruan tidak datang tepat waktu, sistem menampilkan latar abu-abu alih-alih konten, memberi sinyal kepada pengguna bahwa data sudah usang.

func updateDelivery(activity: Activity<DeliveryAttributes>) {
    Task {
        let newContent = ActivityContent(
            state: DeliveryAttributes.ContentState(
                status: .delivered,
                estimatedMinutes: 0
            ),
            staleDate: Date().addingTimeInterval(300)
        )
        await activity.update(newContent)
        // Mengakhiri Activity dalam 2 detik
        try? await Task.sleep(nanoseconds: 2_000_000_000)
        await activity.end(newContent)
    }
}

Konsumsi daya — Dynamic Island dan Live Activities memiliki dampak minimal pada baterai berkat optimalisasi hardware layar OLED. Piksel hitam di sekitar potongan dimatikan, dan konten dirender pada koprosesor khusus. Konsumsi rata-rata Live Activity — kurang dari 1% baterai per jam penggunaan dengan pembaruan setiap 5 menit. Sistem secara otomatis menjeda Island saat baterai rendah (di bawah 20%) atau dalam mode hemat daya.

Desain untuk Dynamic Island tidak memerlukan adaptasi UI utama aplikasi — Island bekerja secara independen dari layar aktif. Warna Live Activity harus sesuai dengan tema sistem (terang/gelap) melalui Color Assets sistem. SF Symbols lebih diutamakan daripada ikon kustom — mereka menjamin tampilan yang benar dalam mode Island apa pun dan memiliki dukungan bawaan untuk Dynamic Type.