Android Academy · Pelajaran

Melihat Pratinjau UI Anda

Gunakan @Preview untuk melakukan iterasi dengan cepat.

Melihat Pratinjau UI Anda adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Mengapa Pratinjau Membantu

Membangun dan menjalankan aplikasi di perangkat membutuhkan waktu. Compose menyediakan cara yang lebih cepat untuk melihat UI Anda: pratinjau.

Pratinjau merender composable langsung di dalam Android Studio, sehingga Anda dapat memeriksa layout tanpa meluncurkan aplikasi lengkap di emulator atau ponsel.

Anotasi @Preview

Untuk melihat pratinjau composable, Anda membuat fungsi terpisah dan menandainya dengan @Preview. Android Studio kemudian menampilkan hasil render-nya di panel desain.

Fungsi pratinjau itu sendiri juga merupakan composable, sehingga memiliki @Preview dan @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Pratinjau Tidak Menerima Parameter

Fungsi pratinjau tidak boleh menerima parameter. Compose perlu memanggilnya sendiri, sehingga tidak dapat memberikan argumen.

Itulah sebabnya Anda membuat pembungkus: pratinjau memanggil composable sebenarnya dan memberikan data contoh untuk ditampilkan.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Menamai Fungsi Pratinjau

Konvensi yang umum adalah menamai pratinjau berdasarkan composable yang ditampilkannya, dengan akhiran Preview. Untuk Greeting, Anda dapat menulis GreetingPreview.

Dengan begitu, jelas pratinjau mana yang terkait dengan composable tertentu, terutama saat file Anda semakin panjang.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Memberi Nama pada Pratinjau

Anda dapat memberi label pada pratinjau dengan parameter name. Judul ini muncul di atas pratinjau yang dirender di Android Studio.

Nama yang informatif memudahkan Anda membedakan beberapa pratinjau sekilas.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Menampilkan Latar Belakang

Secara bawaan, pratinjau mungkin dirender di atas latar transparan. Atur showBackground = true untuk menggambar permukaan solid di belakang composable Anda.

Dengan begitu, jarak dan warna jauh lebih mudah dinilai di panel desain.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Beberapa Pratinjau Sekaligus

Anda dapat menambahkan beberapa anotasi @Preview ke satu fungsi, atau menulis beberapa fungsi pratinjau. Masing-masing akan dirender secara terpisah.

Ini berguna untuk memeriksa UI yang sama dengan data contoh berbeda, seperti nama pendek dan nama panjang.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Melihat Pratinjau dalam Berbagai Ukuran

Parameter widthDp dan heightDp mengatur ukuran kanvas pratinjau. Dengan begitu, Anda dapat menguji tampilan layout di area kecil atau besar.

Mengatur ukuran pratinjau membantu menemukan teks yang membungkus secara janggal atau konten yang meluap.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Pratinjau Mode Gelap

Anda dapat melihat tampilan UI dalam tema gelap menggunakan parameter uiMode yang diatur ke mode malam. Ini membantu menemukan warna yang tampak keliru di latar gelap.

Memeriksa pratinjau terang dan gelap sejak awal akan mencegah kejutan di kemudian hari.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Pratinjau Interaktif dan Langsung

Android Studio dapat memperbarui pratinjau saat Anda mengetik, sehingga perubahan muncul hampir seketika. Tersedia juga mode interaktif untuk mengeklik dan menjelajah tanpa proses build lengkap.

Pratinjau tidak menggantikan proses menjalankan aplikasi, tetapi membuat perancangan layar jauh lebih cepat.

Pratinjau Hanya untuk Debug

Fungsi pratinjau adalah alat untuk pengembangan. Fungsi ini bukan bagian dari aplikasi yang dikirimkan dan tidak akan terlihat oleh pengguna.

Jadi, silakan tambahkan sebanyak mungkin pratinjau dengan data contoh. Pratinjau hanya memengaruhi apa yang Anda lihat di IDE.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Pemeriksaan Singkat

Mari tinjau aturan penting tentang fungsi pratinjau.

Rangkuman

Anda telah mempelajari bahwa @Preview merender composable di dalam Android Studio tanpa memerlukan perangkat. Fungsi pratinjau tidak menerima parameter, sehingga fungsi tersebut membungkus composable sebenarnya dengan data contoh.

Opsi yang berguna mencakup name, showBackground, widthDp, heightDp, dan uiMode untuk mode gelap. Pratinjau adalah alat khusus untuk debug. Berikutnya, Anda akan menggabungkan semuanya untuk membuat kartu profil nyata.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Melihat Pratinjau UI Anda” gratis?

Ya — teks lengkap “Melihat Pratinjau UI Anda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Melihat Pratinjau UI Anda”?

Gunakan @Preview untuk melakukan iterasi dengan cepat. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Melihat Pratinjau UI Anda” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy