Android Studio menghadirkan banyak fitur baru khusus untuk Jetpack Compose. Android Studio memanfaatkan pendekatan yang mengutamakan kode sekaligus meningkatkan produktivitas developer tanpa harus memilih antara antarmuka desain atau editor kode saja.
Perbedaan mendasar antara UI Berbasis Tampilan dan Jetpack Compose adalah bahwa Compose tidak mengandalkan View
untuk merender composable. Sebagai akibat dari
pendekatan arsitektur ini, Android Studio menawarkan fitur tambahan untuk Jetpack
Compose tanpa harus membuka emulator atau terhubung ke perangkat dibandingkan dengan
Android View, sehingga memungkinkan proses iterasi yang lebih cepat bagi developer untuk menerapkan
desain UI.
Untuk mengaktifkan fitur khusus Android Studio bagi Jetpack Compose, Anda perlu menambahkan
dependensi ini di file build.gradle
aplikasi Anda:
debugImplementation "androidx.compose.ui:ui-tooling:1.1.1"
implementation "androidx.compose.ui:ui-tooling-preview:1.1.1"
Pratinjau Composable
Composable ditentukan oleh fungsi, yang dianotasi dengan @Composable
:
@Composable
fun SimpleComposable() {
Text("Hello World")
}
Untuk mengaktifkan pratinjau composable ini, Anda perlu membuat composable lain, yang dianotasikan dengan @Composable
dan @Preview
, dengan menghapus composable yang sebelumnya Anda buat:
@Preview
@Composable
fun ComposablePreview() {
SimpleComposable()
}
Terakhir, klik tampilan terpisah (desain/kode) untuk membuka panel sisi kanan tempat pratinjau akan ditampilkan:
@Preview
menerima parameter untuk menyesuaikan cara Android Studio merendernya. Anda dapat menambahkan parameter ini secara manual di kode Anda, atau mengklik ikon gutter di sebelah @Preview
untuk menampilkan alat pilih konfigurasi, agar Anda dapat memilih dan mengubah parameter konfigurasi tersebut.
@Preview
fitur
Android Studio menawarkan beberapa fitur untuk memperluas pratinjau composable. Anda dapat mengubah desain penampung, berinteraksi dengan mereka, atau menerapkannya langsung ke emulator atau perangkat.
LocalInspectionMode
Anda dapat membaca dari
LocalInspectionMode
CompositionLocal
untuk melihat apakah composable sedang dirender dalam pratinjau.
Dengan begitu, Anda dapat melakukan hal-hal seperti menampilkan gambar placeholder di jendela pratinjau,
bukan menampilkan data nyata. Jika komposisi sedang dirender dalam pratinjau,
LocalInspectionMode.current
akan mengevaluasi ke true
.
private fun ToolingSnippetLocalInspectionMode() {
if (LocalInspectionMode.current) {
// Show this text in a preview window:
Text("Hello preview user!")
} else {
// Show this text in the app:
Text("Hello $name!")
}
}
Mode interaktif
Mode interaktif memungkinkan Anda berinteraksi dengan pratinjau dengan cara yang sama seperti yang akan Anda lakukan di perangkat. Mode interaktif terisolasi di lingkungan sandbox (dipisahkan dari pratinjau lain), tempat Anda dapat mengklik elemen dan memasukkan input pengguna dalam pratinjau; pratinjau bahkan memutar animasi. Ini adalah cara cepat untuk menguji berbagai status dan gestur dari composable Anda, seperti kotak centang yang dicentang atau kosong.
Mode interaktif Pratinjau berjalan langsung di dalam Android Studio tanpa menjalankan emulator, yang menyebabkan beberapa batasan:
- Tidak ada akses jaringan
- Tidak ada akses file
- Beberapa API
Context
mungkin tidak sepenuhnya tersedia
Men-deploy Pratinjau
Anda dapat menerapkan @Preview
tertentu ke emulator atau perangkat fisik. Pratinjau
di-deploy dalam aplikasi project yang sama sebagai aktivitas baru, sehingga berbagi
konteks dan izin yang sama. Hal ini berarti Anda tidak perlu menulis
kode boilerplate seperti meminta izin jika sudah diberikan.
Klik ikon Deploy to Device
di samping anotasi
@Preview
atau di bagian atas pratinjau, dan Android Studio
akan men-deploy @Preview tersebut ke perangkat atau emulator yang terhubung.
Navigasi kode dan kerangka composable
Anda dapat mengarahkan kursor ke pratinjau untuk melihat garis besar dari composable yang ada di dalamnya. Mengklik outline composable akan memicu tampilan editor Anda untuk menuju ke definisinya.
Salin render @Preview
Setiap pratinjau yang dirender dapat disalin sebagai image dengan mengklik kanan pada image.
Menetapkan warna latar belakang
Secara default, log Anda dapat ditampilkan dengan latar belakang transparan.
Untuk menambahkan latar belakang, tambahkan parameter showBackground
dan backgroundColor
.
Perhatikan bahwa backgroundColor
adalah Long
ARGB, bukan nilai Color
:
@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
Text("Hello World")
}
Dimensi
Secara default, dimensi @Preview
dipilih secara otomatis untuk menggabungkan kontennya.
Jika ingin menyetel dimensi secara manual, Anda dapat menambahkan parameter heightDp
dan widthDp
. Perhatikan bahwa nilai tersebut sudah diinterpretasikan sebagai Dp
, Anda tidak perlu menambahkan .dp
di akhir nilai:
@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
Box(Modifier.background(Color.Yellow)) {
Text("Hello World")
}
}
Lokal
Untuk menguji berbagai lokal pengguna, Anda perlu menambahkan parameter locale
:
@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
Text(text = stringResource(R.string.greetings))
}
UI sistem
Jika Anda perlu menampilkan status dan panel tindakan di dalam pratinjau, tambahkan parameter showSystemUi
:
@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
Text("Hello World")
}
@PreviewParameter
Anda dapat meneruskan data contoh ke fungsi Pratinjau Composable dengan menambahkan parameter
menggunakan
anotasi
@PreviewParameter
.
@Preview
@Composable
fun UserProfilePreview(
@PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
UserProfile(user)
}
Untuk menyediakan data contoh, buat class yang mengimplementasikan
PreviewParameterProvider
dan menampilkan data contoh sebagai urutan.
class UserPreviewParameterProvider : PreviewParameterProvider<User> {
override val values = sequenceOf(
User("Elise"),
User("Frank"),
User("Julia")
)
}
Akan ada satu pratinjau yang dirender per elemen data dalam urutan:
Anda dapat menggunakan class penyedia yang sama untuk beberapa pratinjau. Jika perlu, batasi jumlah pratinjau yang akan dirender dengan menyetel parameter batas.
@Preview
@Composable
fun UserProfilePreview(
@PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
UserProfile(user)
}
Mode UI
Parameter uiMode dapat menggunakan salah satu konstanta Configuration.UI_* dan memungkinkan Anda mengubah perilaku pratinjau. Misalnya, Anda dapat menyetel pratinjau ke Mode Malam untuk melihat reaksi tema.
Tindakan editor
Android Studio juga memiliki fitur di dalam area editor untuk meningkatkan produktivitas Anda dengan Jetpack Compose.
Template Langsung
Android Studio telah menambahkan template langsung terkait Compose, yang memungkinkan Anda memasukkan cuplikan kode untuk penyisipan cepat dengan mengetik singkatan template yang sesuai:
comp
untuk menetapkan fungsi@Composable
prev
untuk membuat fungsi composable@Preview
paddp
untuk menambahkan Pengubahpadding
dalam dpweight
untuk menambahkan Pengubahweight
W
,WR
,WC
untuk melingkupi composable saat ini dengan penampungBox
,Row
, atauColumn
Ikon gutter
Ikon gutter adalah tindakan kontekstual yang terlihat di sidebar, di samping nomor baris. Android Studio memperkenalkan beberapa ikon gutter khusus untuk Jetpack Compose guna memudahkan pengalaman developer Anda.
Men-deploy pratinjau
Anda dapat menerapkan @Preview ke emulator atau perangkat fisik langsung dari ikon gutter:
Pemilih warna
Setiap kali warna ditetapkan di dalam atau di luar composable, pratinjau akan ditampilkan di gutter. Anda dapat mengubah warna melalui pemilih warna dengan mengkliknya seperti ini:
Pemilih resource image
Setiap kali drawable, vektor, atau image ditentukan di dalam atau di luar composable, pratinjaunya akan ditampilkan di gutter. Anda dapat mengubahnya melalui pemilih resource image dengan mengkliknya seperti ini:
Pengembangan kode berulang
Sebagai developer seluler, Anda sering mengembangkan UI aplikasi langkah demi langkah, bukan mengembangkan semuanya sekaligus. Android Studio menggunakan pendekatan ini dengan Jetpack Compose melalui penyediaan alat yang tidak memerlukan build penuh untuk memeriksa, mengubah nilai, dan memverifikasi hasil akhir.
Edit langsung literal
Android Studio dapat mengupdate secara real-time beberapa literal konstanta yang digunakan di composable dalam pratinjau, emulator, dan perangkat fisik. Berikut beberapa jenis yang didukung:
Int
String
Color
Dp
Boolean
Anda dapat melihat literal konstan yang memicu update real-time tanpa langkah kompilasi dengan mengaktifkan dekorasi literal melalui indikator UI Live Edit of literals:
Apply Changes
Menerapkan Perubahan memungkinkan Anda mengupdate kode dan resource tanpa harus men-deploy ulang aplikasi ke emulator atau perangkat fisik (dengan beberapa batasan).
Setiap kali menambahkan, mengubah, atau menghapus composable, Anda dapat mengupdate aplikasi tanpa harus men-deploy ulang dengan mengklik tombol ini:
Layout Inspector
Pemeriksa tata letak memungkinkan Anda memeriksa tata letak Compose di dalam aplikasi yang berjalan di emulator atau perangkat fisik.
Animasi
Android Studio memungkinkan Anda memeriksa animasi dari Pratinjau Animasi. Jika animasi dijelaskan dalam composable pratinjau, Anda dapat memeriksa nilai yang tepat dari setiap nilai animasi pada waktu tertentu, menjeda animasi, memutarnya, mempercepatnya, atau memperlambatnya, untuk membantu Anda men-debug animasi di sepanjang transisinya:
Anda juga dapat menggunakan Pratinjau Animasi untuk memvisualisasikan grafik kurva animasi, yang berguna untuk memastikan nilai animasi disusun dengan benar:
Pratinjau Animasi otomatis mendeteksi animasi yang dapat diperiksa, yang
ditunjukkan dengan ikon Start Animation Inspection
.
Pratinjau Animasi saat ini mendukung updateTransition
API. Untuk menggunakan Pratinjau Animasi dengan updateTransition
, gunakan Compose versi
1.0.1 atau yang lebih tinggi.
Mengaktifkan fitur eksperimental
Beberapa fitur hanya tersedia setelah diaktifkan secara manual di bagian eksperimental dalam preferensi Android Studio: File > Settings > Experimental (Android Studio > Preferences > Experimental di Mac).