Anda dapat melihat pratinjau komponen Jetpack Compose di Android Studio, tanpa harus men-deploy aplikasi ke perangkat atau emulator. Anda dapat melihat beberapa pratinjau fungsi tertentu yang dapat dikomposisi, masing-masing dengan batasan lebar dan tinggi, penskalaan font, atau tema yang berbeda. Saat mengembangkan aplikasi, pratinjau akan diupdate untuk membantu Anda meninjau perubahan dengan lebih cepat.
Membuat pratinjau tata letak dasar
Untuk membuat pratinjau tata letak, tulis fungsi yang dapat dikomposisi yang tidak menggunakan
parameter apa pun, dan tambahkan anotasi @Preview
. Setelah membuat aplikasi,
UI fungsi pratinjau akan muncul di panel Preview Studio.
Misalnya, Anda memiliki fungsi yang dapat dikomposisi yang menampilkan salam kepada pengguna:
@Composable
fun Greeting(name: String) {
Text (text = "Hello $name!")
}
Untuk melihat pratinjau UI fungsi ini, tulis fungsi wrapper yang tidak menggunakan
parameter, dan tambahkan anotasi @Preview
ke wrapper:
@Preview
@Composable
fun PreviewGreeting() {
Greeting("Android")
}
Gambar 1. Jendela pratinjau menampilkan UI yang dihasilkan oleh fungsi pratinjau Anda.
Jika Anda mengklik elemen UI dalam pratinjau, Studio akan mengarahkan Anda ke baris
tempat elemen tersebut dibuat. Misalnya, jika Anda mengklik teks "Hello Android!"
di jendela pratinjau ini, Studio akan membawa Anda ke baris dalam Greeting()
tempat elemen teks dibuat.
Saat kode Anda berubah, klik tombol refresh
di jendela pratinjau untuk mengupdate pratinjau. Anda mungkin perlu membuat ulang
project untuk mengupdate pratinjau; jendela pratinjau akan memberi tahu
jika Anda harus melakukannya.
Anda dapat menyesuaikan pratinjau dengan meneruskan parameter ke anotasi
@Preview
. Misalnya, secara default label pratinjau didasarkan pada nama
fungsi pratinjau, yang dalam hal ini adalah PreviewGreeting
. Anda dapat mengubah
label dengan meneruskan parameter name
:
@Preview(name = "Android greeting")
@Composable
fun PreviewGreeting() {
Greeting("Android")
}
Untuk daftar lengkap parameter yang dapat diteruskan ke @Preview
, lihat
referensi
@Preview
.
Anda dapat menentukan beberapa fungsi pratinjau, yang semuanya ditampilkan bersamaan di jendela pratinjau. Misalnya, Anda dapat menulis fungsi yang menguji berbagai jenis input:
@Preview(name = "Long greeting")
@Composable
fun PreviewLongGreeting() {
Greeting("my valued friend, whom I am incapable of "
+ "greeting without using a great many words")
}
@Preview(name = "Newline greeting")
@Composable
fun PreviewNewlineGreeting() {
Greeting("world\nwith a line break")
}
Gambar 2. Jika Anda menentukan beberapa fungsi pratinjau, UI-nya akan ditampilkan dalam jendela pratinjau yang sama.
Men-deploy pratinjau ke perangkat Anda
Untuk men-deploy pratinjau ke perangkat atau emulator default, klik tombol
deploy:
Android Studio akan membuat aktivitas baru berisi UI yang dihasilkan oleh
fungsi tersebut, dan men-deploy-nya ke aplikasi Anda di perangkat. Ini memungkinkan Anda mencoba UI
pada perangkat sebenarnya tanpa perlu menginstal ulang seluruh aplikasi atau
membuka lokasinya.
Gambar 3. Pratinjau ComposeLongGreeting()
, yang di-deploy ke perangkat
virtual.
Pratinjau interaktif
Android Studio menyediakan mode pratinjau interaktif. Saat berada dalam
mode pratinjau interaktif, Anda dapat mengklik atau mengetikkan elemen UI, dan UI
merespons seolah-olah aplikasi tersebut terinstal. Untuk mengaktifkan pratinjau interaktif, klik
tombol interactive di jendela pratinjau mana pun:
Panel pratinjau akan beralih ke mode interaktif untuk fungsi pratinjau tersebut sampai
Anda keluar dari mode tersebut.
Misalnya, lihat fungsi ini yang merespons klik pengguna:
@Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
Button(
onClick = { updateCount(count + 1) },
colors = defaultButtonColors(
backgroundColor = if (count > 5) Color.Green else Color.White
)
) {
Text("I've been clicked $count times")
}
}
@Preview
@Composable
fun PreviewCounter() {
val counterState = remember { mutableStateOf(0) }
Counter(
count = counterState.value,
updateCount = { newCount ->
counterState.value = newCount
}
)
}
Pratinjau biasa untuk fungsi ini akan menampilkan tata letak elemen UI. Namun, jika Anda mengklik tombol, tindakan ini tidak akan direspons. Sebagai gantinya, Studio akan mengarahkan Anda ke baris tempat elemen dibuat.
Hal sebaliknya terjadi saat dalam mode pratinjau interaktif. Saat Anda mengklik tombol, hitungan akan bertambah; saat hitungan mencapai 6, tombol berubah menjadi hijau seperti pada aplikasi yang berjalan:
Gambar 4. Saat jendela pratinjau dalam mode interaktif, jendela tersebut akan merespons klik pengguna.
Catatan: Mode pratinjau interaktif tidak memungkinkan fungsi Anda berinteraksi dengan penyimpanan atau jaringan perangkat. Jika Anda perlu menguji fungsi yang bergantung pada operasi tersebut, Anda harus memberikan objek palsu.