Pratinjau tata letak

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.