Android Academy · Pelajaran

Pratinjau dan Hot Reload

Lakukan iterasi dengan cepat menggunakan pratinjau Compose.

Pelajaran 4 dari 413 langkah

Pratinjau dan Hot Reload adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Pratinjau Saat Desain

Salah satu fitur terbaik Compose adalah @Preview: Anda dapat melihat komposabel dirender di dalam Android Studio tanpa menjalankan aplikasi di perangkat atau emulator.

Anotasi @Preview

Tambahkan @Preview di atas fungsi @Composable. Android Studio merendernya di panel desain.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

Pratinjau Tidak Memerlukan Parameter

Fungsi pratinjau harus dapat dipanggil tanpa argumen. Jadi, buat komposabel pembungkus yang menyediakan data contoh, lalu pratinjau pembungkus tersebut.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Penamaan Fungsi Pratinjau

Sesuai konvensi, pembungkus pratinjau diberi nama berdasarkan nama komposabel ditambah akhiran Preview, misalnya GreetingPreview. Dengan begitu, fungsi tersebut mudah ditemukan dan menandakan bahwa fungsi itu tidak digunakan dalam produksi.

Parameter Pratinjau

@Preview menerima argumen untuk menyesuaikan hasil render, seperti showBackground, name, dan widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

Secara default, pratinjau memiliki latar belakang transparan. Berikan showBackground = true untuk merender permukaan buram, sehingga teks lebih mudah dilihat saat mendesain.

Beberapa Pratinjau

Anda dapat menumpuk beberapa anotasi @Preview pada satu fungsi untuk melihat konfigurasi yang berbeda secara berdampingan — misalnya lebar kecil dan lebar besar.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

Pratinjau Interaktif

Android Studio menyediakan Mode Interaktif untuk pratinjau. Mode ini memungkinkan Anda mengeklik tombol dan memicu perubahan status langsung di dalam pratinjau, tanpa menerapkan aplikasi.

Pengeditan Langsung / Muat Ulang Cepat

Dengan Pengeditan Langsung, perubahan pada isi komposabel muncul hampir seketika di pratinjau, bahkan pada perangkat yang sedang menjalankan aplikasi — tanpa perlu membangun ulang seluruh aplikasi. Ini mempercepat siklus desain secara drastis.

Pratinjau Tidak Membutuhkan Biaya

Fungsi pratinjau dihapus dari build rilis Anda, sehingga menambahkan banyak pratinjau tidak menimbulkan biaya saat runtime. Gunakan pratinjau sebanyak mungkin untuk mendokumentasikan dan menguji setiap komposabel secara visual.

Contoh Lengkap

Berikut komposabel beserta pratinjaunya. Buka panel desain untuk melihatnya dirender secara langsung.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

Pemeriksaan Cepat

Mengapa fungsi @Preview tidak boleh menerima parameter?

Jawab di pelajaran interaktif

Rangkuman

Pratinjau mempercepat pengembangan Compose:

Tambahkan @Preview di atas komposabel tanpa argumen.
Gunakan opsi seperti showBackground dan widthDp.
Tumpuk beberapa pratinjau; gunakan Mode Interaktif dan Pengeditan Langsung untuk iterasi cepat.

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 36
Pelajaran: 152

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pratinjau dan Hot Reload” gratis?

Ya — teks lengkap “Pratinjau dan Hot Reload” 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 “Pratinjau dan Hot Reload”?

Lakukan iterasi dengan cepat menggunakan pratinjau Compose. 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 4 dari 4.

Berapa lama pelajaran “Pratinjau dan Hot Reload” 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