Dukungan Android Studio untuk Compose

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.3.0"
implementation "androidx.compose.ui:ui-tooling-preview:1.3.0"

Pratinjau Composable

Composable ditentukan oleh fungsi, yang dianotasi dengan @Composable:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

Elemen teks sederhana yang berisi kata "Hello World" (Halo Dunia)

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:

Pemilih "Tampilan Terpisah" Android Studio

Tampilan teks sederhana yang ditampilkan di jendela pratinjau

Anda dapat menambahkan parameter secara manual dalam kode untuk menyesuaikan cara Android Studio merender @Preview.

Fitur @Preview

Android Studio menawarkan beberapa fitur untuk memperluas pratinjau composable. Anda dapat mengubah desain penampung, berinteraksi dengan penampung, atau men-deploy 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.

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

Pengguna mengklik tombol "interaktif" pratinjau

Video pengguna yang berinteraksi dengan pratinjau

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 memiliki 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.

Pengguna mengklik tombol "deploy" pratinjau

Video pengguna yang men-deploy pratinjau ke perangkat

Anotasi Multipratinjau

Dengan multipratinjau, Anda dapat menentukan class anotasi yang sudah memiliki beberapa anotasi @Preview dengan konfigurasi berbeda. Menambahkan anotasi ini ke fungsi composable akan otomatis merender semua pratinjau yang berbeda sekaligus. Misalnya, Anda dapat menggunakan anotasi ini untuk melihat pratinjau beberapa perangkat, ukuran font, atau tema secara bersamaan tanpa perlu mengulangi definisi tersebut untuk setiap satu composable.

Mulai dengan membuat class anotasi kustom Anda sendiri:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviews

Anda dapat menggunakan anotasi kustom ini untuk composable pratinjau:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}

Tab desain Android Studio yang menampilkan composable dengan font kecil dan besar

Anda dapat menggabungkan beberapa anotasi multipratinjau dan anotasi pratinjau normal untuk membuat kumpulan pratinjau yang lebih lengkap. Menggabungkan anotasi multipratinjau tidak berarti semua kombinasi berbeda akan ditampilkan. Sebaliknya, setiap anotasi multipratinjau bertindak secara independen dan hanya merender variannya sendiri.

@Preview(
    name = "dark theme",
    group = "themes",
    uiMode = UI_MODE_NIGHT_YES
)
@FontScalePreviews
@DevicePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview() {
    MyTheme { Surface { Text("Hello world") } }
}

Tab desain Android Studio yang menampilkan composable di semua konfigurasi

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.

Pengguna mengarahkan kursor ke atas pratinjau, yang menyebabkan Studio menampilkan outline composable.

Salin render @Preview

Setiap pratinjau yang dirender dapat disalin sebagai image dengan mengklik kanan pada image.

Pengguna mengklik pratinjau untuk menyalinnya sebagai 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")
}

Persegi panjang hijau dengan tulisan "Hello World" (Halo Dunia)

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")
    }
}

Kotak kuning dengan tulisan "Hello World" (Halo Dunia)

Lokal

Untuk menguji berbagai lokal pengguna, Anda perlu menambahkan parameter locale:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

Elemen teks sederhana yang berisi kata "Bonjour" dengan bendera Prancis

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")
}

Jendela pratinjau yang menampilkan aktivitas dengan status dan panel tindakan

@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.

UI pratinjau Compose

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 Pengubah padding dalam dp
  • weight untuk menambahkan Pengubah weight
  • W, WR, WC untuk melingkupi composable saat ini dengan penampung Box, Row, atau Column

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:

Pengguna mengklik ikon gutter penerapan fungsi pratinjau, dan menerapkan pratinjau ke perangkat

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:

Pengguna mengklik warna di gutter, memunculkan pemilih warna

Pemilih resource gambar

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:

Pengguna mengklik ikon di gutter, yang memunculkan pemilih resource

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.

Live edit of literals

Android Studio dapat secara real-time mengupdate beberapa literal konstan yang digunakan di composable dalam pratinjau, emulator, dan perangkat fisik. Berikut beberapa jenis yang didukung:

  • Int
  • String
  • Color
  • Dp
  • Boolean

Video pengguna yang mengubah literal dalam kode sumber, dan pratinjau yang diperbarui secara dinamis

Anda dapat melihat literal konstan yang memicu update real-time tanpa langkah kompilasi dengan mengaktifkan dekorasi literal melalui indikator UI Live Edit of literals:

Mengaktifkan Live Editing of Literals

Edit Live

Anda dapat mempercepat pengalaman pengembangan Compose menggunakan Edit Live dalam rilis terbatas Android Studio Flamingo. Edit Live adalah versi yang lebih canggih dari Live edit of literals. Dengan fungsi ini, Anda dapat melihat efek update pada composable secara real time dengan men-deploy perubahan kode secara otomatis ke emulator atau perangkat.

Ringkasan UI Edit Live

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:

Pengguna yang mengklik tombol "terapkan perubahan"

Layout Inspector

Layout Inspector memungkinkan Anda memeriksa tata letak Compose di dalam aplikasi yang berjalan di emulator atau perangkat fisik.

Mendapatkan jumlah rekomposisi

Anda dapat menggunakan Layout Inspector untuk memeriksa seberapa sering composable dikomposisi ulang atau dilewati. Jika UI Anda memiliki performa yang buruk, hal ini sering kali disebabkan oleh error coding yang memaksa UI Anda dikomposisi ulang secara berlebihan. Di sisi lain, beberapa error coding dapat mencegah UI Anda dikomposisi ulang saat diperlukan, yang berarti perubahan UI tidak muncul di layar. Melacak rekomposisi dapat membantu menemukan kedua jenis masalah ini.

Untuk melacak rekomposisi, aktifkan Show Recomposition Counts di opsi tampilan:

Jumlah rekomposisi diaktifkan di opsi tampilan.

Setelah Anda mengaktifkannya, Layout Inspector akan menampilkan jumlah rekomposisi di sebelah kiri, dan rekomposisi yang dilewati di sebelah kanan:

Jumlah rekomposisi yang ditampilkan di Layout Inspector

Jika Anda mengklik dua kali composable di Layout Inspector, Anda akan diarahkan ke kode yang sesuai untuk analisis.

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 selama transisinya:

Memutar ulang, menggeser, dan memperlambat AnimatedVisibility

Anda juga dapat menggunakan Pratinjau Animasi untuk memvisualisasikan grafik kurva animasi, yang berguna untuk memastikan nilai animasi disusun dengan benar:

Visualisasi kurva animasi

Pratinjau Animasi otomatis mendeteksi animasi yang dapat diperiksa, yang ditunjukkan dengan ikon Start Animation Inspection Ikon Run.

Ikon Start Animation Inspection di jendela Design

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).

Alat Compose diaktifkan di dalam preferensi Eksperimental Android Studio