Jetpack Compose mendukung interoperabilitas dengan View — Anda dapat menggunakan Compose dalam View, dan View dalam Compose. Hal ini memungkinkan penggunaan Compose di aplikasi berbasis View yang sudah ada tanpa harus segera memigrasikan semua View.
Langkah migrasi
- Buat rencana: Buat rencana yang kuat dan langkah demi langkah untuk melakukan migrasi. Sebaiknya buat backlog tugas migrasi yang diprioritaskan.
- Identifikasi kandidat XML untuk migrasi : Identifikasi dan mulai dari komponen terkecil yang merupakan node daun dalam hierarki, dan perluas rencana migrasi dari bawah ke atas ke komponen yang lebih tinggi secara progresif dalam hierarki. Kandidat yang baik untuk migrasi awal adalah yang berukuran kecil, stateless, dan memiliki lebih sedikit dependensi.
- Analisis hierarki: Setelah mengidentifikasi XML View yang akan dimigrasikan, analisis struktur dan penerapan tata letak XML-nya.
- Merekam status awal: Jalankan pengujian screenshot untuk merekam status awal Tampilan XML yang dipilih.
- Prasyarat: Siapkan dependensi Compose Identifikasi apakah project memiliki dependensi Compose dan penyiapan Compiler. Jika tidak, ikuti langkah-langkah di bagian Menyiapkan dependensi dan Compiler Compose.
- Prasyarat: Siapkan tema Compose Identifikasi apakah project sudah menyiapkan tema Compose. Jika tidak, ikuti tema komposisi. Mempertahankan tema XML asli saat aplikasi beroperasi Memigrasikan Tema XML ke Compose untuk memahami pola cara menyatakan dan hingga project sepenuhnya dimigrasikan ke Compose.
- Memigrasikan Tampilan XML ke Compose: Mulai konversi kode XML ke Compose, terapkan tema yang sesuai, dan tambahkan Pratinjau Compose untuk composable yang dimigrasikan. Untuk skenario migrasi umum, lihat referensi tambahan. Misalnya, untuk bermigrasi ke Lazy API di Compose, ikuti langkah-langkah di Memigrasikan RecyclerView ke Compose.
- Mengganti penggunaan: Ganti penggunaan View XML sebelumnya untuk menggunakan komponen Compose baru. Untuk menambahkan Compose di View, ikuti langkah-langkah di Compose di View. Untuk menambahkan Tampilan di Compose, ikuti langkah-langkah di Tampilan di Compose.
- Validasi migrasi: Pastikan status awal yang diambil dalam pengujian screenshot sama dengan Pratinjau Compose dari composable yang dimigrasikan. Jika tidak cocok, lakukan iterasi pada UI composable baru dan tingkatkan kualitasnya agar sesuai dengan status awal. Buat pengujian UI Compose baru untuk composable baru.
- Penghapusan XML: Setelah composable yang baru dimigrasikan cocok dengan UI XML awal, hapus kode XML View yang sudah tidak digunakan dan pengujiannya.
Skenario migrasi umum
Pastikan ekstensi dp dan sp digunakan (16.dp, 20.sp) dalam composable.
Jika tools:text ada di XML View, gunakan di composable @Preview
terpisah.
Konversi Atribut ke Pengubah
Sebagian besar atribut XML menjadi bagian dari rantai modifier atau parameter fungsi composable.
| Atribut XML | Setara Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Perilaku default, biasanya tidak memerlukan pengubah) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Padding luar) |
android:gravity="center" |
contentAlignment = Alignment.Center (Kotak) atau horizontalAlignment / verticalArrangement (Kolom/Baris) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Gabungkan dalam blok if (visible) { ... } |
Memigrasikan gaya (styles.xml)
Gaya XML sering kali menggabungkan beberapa atribut untuk membuat gaya. Di Compose, hal ini dilakukan dengan membuat variasi composable dengan gaya tertentu.
Berikan fungsi @Composable terpisah yang diberi nama sesuai dengan gaya dan komponen dasar, untuk menunjukkan perbedaan dalam gaya dan kasus penggunaan untuk komponen tersebut.
- Pola: Jika elemen XML menggunakan gaya kustom
(misalnya,
style="@style/MyPrimaryButton"), jangan coba mereplikasi gaya inline. Sebagai gantinya, sarankan pembuatan composable tertentu. - Contoh:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Tulis:
MyPrimaryButton(onClick = { ... })
- XML:
- Grup Atribut Umum: Jika gaya menetapkan pengubah umum (seperti padding + tinggi), ekstrak ke dalam properti ekstensi yang dapat dibaca atau variabel Pengubah bersama.