Cutout di Compose

Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar. Potongan layar memungkinkan pengalaman dari tepi ke tepi sekaligus memberikan ruang untuk sensor penting di bagian depan perangkat.

Gambar 1. Contoh potongan dalam mode Potret

Gambar 2. Contoh potongan dalam mode lanskap

Android mendukung potongan layar di perangkat yang menjalankan Android 9 (level API 28) dan yang lebih baru. Namun, produsen perangkat juga dapat mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih rendah.

Halaman ini menjelaskan cara menerapkan dukungan untuk perangkat dengan potongan layar di Compose, termasuk cara menggunakan area potongan—yaitu, persegi panjang dari tepi ke tepi di permukaan layar yang berisi potongan.

Kasus default

Secara default, potongan tampilan disertakan dalam informasi inset jendela. Oleh karena itu, aplikasi Anda tidak akan menggambar di area potongan layar saat Anda mengikuti panduan pembuatan aplikasi dari tepi ke tepi.

Misalnya, saat Anda menggunakan Modifier.windowInsetsPadding(WindowInsets.safeContent) atau Modifier.windowInsetsPadding(WindowInsets.safeDrawing), aplikasi otomatis tidak akan menggambar di area tempat potongan ditempatkan. WindowInsets.safeContent dan WindowInsets.safeDrawing berisi informasi potongan layar dan tidak akan menggambar lokasi potongan perangkat.

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

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Untuk menyesuaikan perilaku ini lebih lanjut, Anda harus menangani sendiri informasi potongan.

Menangani informasi potongan secara manual

Anda dapat menangani potongan dengan salah satu cara berikut:

• Menggunakan WindowInsets.displayCutout

• Setelan dalam manifes tema dengan android:windowLayoutInDisplayCutoutMode

• Menetapkan opsi secara terprogram di Window dengan window.attributes.layoutInDisplayCutoutMode

• Mengakses objek Path potongan dengan LocalView.current.rootWindowInsets.displayCutout

Untuk Compose, sebaiknya tetapkan windowLayoutInDisplayCutoutMode ke default di tema Anda secara keseluruhan, lalu manfaatkan WindowInsets.displayCutout untuk menangani inset dalam composable Anda:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Pendekatan ini memungkinkan Anda mematuhi padding displayCutout jika diperlukan, atau mengabaikannya jika tidak diperlukan.

Atau, Anda dapat menerapkan setelan yang sama dengan yang dijelaskan dalam dokumentasi Potongan Tampilan dengan menyetel tema aktivitas android:windowLayoutInDisplayCutoutMode ke opsi lain, atau menyetel atribut jendela menggunakan window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Namun, mode cutout kemudian diterapkan ke seluruh aktivitas, dan tidak dapat dikontrol per composable individual.

Untuk mengikuti potongan tampilan di composable tertentu, tetapi tidak di composable lainnya, gunakan WindowInset.displayCutout. API ini memungkinkan Anda mengakses informasi potongan jika diperlukan.

Praktik terbaik

Saat menggunakan potongan layar, pertimbangkan hal berikut:

• Perhatikan penempatan elemen penting UI. Jangan biarkan area potongan mengaburkan teks, kontrol, atau informasi penting lainnya.
• Jangan tempatkan atau perluas elemen interaktif apa pun yang memerlukan pengenalan sentuhan halus ke area potongan. Sensitivitas sentuh mungkin lebih rendah di area potongan.
• Saat mengikuti panduan tepi-ke-tepi, informasi potongan akan disertakan dalam inset safeDrawing / safeContent.
• Jika memungkinkan, gunakan Modifier.windowInsetsPadding(WindowInsets.safeDrawing) untuk menentukan padding yang sesuai untuk diterapkan ke konten Anda. Hindari hardcoding tinggi status bar, karena hal ini dapat menyebabkan konten tumpang-tindih atau terpotong.

Menguji cara konten dirender dengan cutout

Pastikan untuk menguji semua layar dan pengalaman aplikasi Anda. Uji di perangkat dengan berbagai jenis potongan, jika memungkinkan. Jika tidak memiliki perangkat dengan potongan layar, Anda dapat menyimulasikan konfigurasi potongan layar umum di perangkat atau emulator apa pun yang menjalankan Android 9 atau yang lebih tinggi dengan melakukan hal berikut:

1. Aktifkan Opsi developer.
2. Di layar Developer options, scroll ke bawah ke bagian Drawing dan pilih Simulate a display with a cutout.
3. Pilih jenis potongan.

   

   Gambar 3. Gunakan Opsi developer untuk menguji cara konten dirender.