Potongan layar adalah area di beberapa perangkat yang memanjang ke permukaan tampilan. Hal ini memungkinkan pengalaman tepi ke tepi sekaligus menyediakan ruang untuk sensor penting di bagian depan perangkat.
Android mendukung potongan tampilan di perangkat yang menjalankan Android 9 (API level 28) dan yang lebih tinggi. Namun, produsen perangkat juga dapat mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih lama.
Halaman ini menjelaskan cara mengimplementasikan dukungan untuk perangkat yang memiliki potongan di Compose, termasuk cara menggunakan area potongan—yaitu, persegi panjang tepi-ke-tepi pada permukaan tampilan yang berisi potongan.
Kapitalisasi default
Secara default, potongan layar disertakan dalam informasi inset jendela. Oleh karena itu, aplikasi Anda tidak akan menggambar di area potongan layar saat Anda mengikuti panduan untuk membuat aplikasi dari tepi ke tepi.
Misalnya, saat Anda menggunakan
Modifier.windowInsetsPadding(WindowInsets.safeContent)
atau Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
, aplikasi Anda
secara otomatis tidak akan menggambar di area tempat potongan ditempatkan.
WindowInsets.safeContent
dan WindowInsets.safeDrawing
berisi informasi potongan layar dan tidak akan menggambar di 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 } } }
Untuk menyesuaikan perilaku ini lebih lanjut, Anda perlu menangani sendiri informasi potongan.
Menangani informasi potongan secara manual
Anda dapat menangani potongan dengan salah satu cara berikut:
Menggunakan
WindowInsets.displayCutout
Menyetel dalam manifes tema dengan
android:windowLayoutInDisplayCutoutMode
Menetapkan opsi secara terprogram di
Window
denganwindow.attributes.layoutInDisplayCutoutMode
Mengakses objek
Path
potongan denganLocalView.current.rootWindowInsets.displayCutout
Untuk Compose, sebaiknya setel 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())) }
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
View Cutout 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 potongan kemudian diterapkan
ke seluruh aktivitas, dan tidak dapat dikontrol per composable individual.
Untuk mematuhi potongan layar dalam composable tertentu, tetapi tidak yang lain, gunakan
WindowInset.displayCutout
. API ini memungkinkan Anda mengakses informasi potongan
jika diperlukan.
Praktik terbaik
Saat bekerja dengan potongan layar, pertimbangkan hal berikut:
- Perhatikan penempatan elemen penting UI. Jangan biarkan area potongan mengaburkan teks, kontrol, atau informasi penting lainnya.
- Jangan menempatkan atau memperluas elemen interaktif apa pun yang memerlukan pengenalan sentuhan ke area potongan. Sensitivitas sentuh mungkin lebih rendah di area potongan.
- Saat mengikuti panduan dari tepi ke tepi, informasi potongan disertakan dalam
inset
safeDrawing
/safeContent
. - Jika memungkinkan, gunakan
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
untuk menentukan padding yang sesuai untuk diterapkan ke konten Anda. Hindari hardcode tinggi status bar karena dapat menyebabkan konten yang tumpang tindih atau terpotong.
Menguji bagaimana konten Anda dirender dengan potongan
Pastikan untuk menguji semua layar dan pengalaman aplikasi Anda. Uji di perangkat dengan berbagai jenis potongan, jika memungkinkan. Jika tidak memiliki perangkat dengan cutout, Anda dapat menyimulasikan konfigurasi potongan umum pada perangkat apa pun atau emulator yang menjalankan Android 9 atau yang lebih tinggi dengan melakukan hal berikut:
- Aktifkan Opsi developer.
- Di layar Developer options, scroll ke bawah ke bagian Drawing, lalu pilih Simulate a display with a berguna.
- Pilih jenis potongan.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Inset jendela di Compose
- Pengubah Grafik
- Paragraf gaya