Strategi migrasi

Jika memiliki aplikasi dengan UI berbasis View, Anda mungkin tidak ingin menulis ulang seluruh UI-nya sekaligus. Halaman ini akan membantu Anda menambahkan elemen Compose baru ke UI yang sudah ada.

Jetpack Compose dirancang dengan interoperabilitas View sejak awal. Dengan fungsi ini, Anda dapat memigrasikan aplikasi berbasis View yang sudah ada ke Compose sekaligus tetap dapat membuat fitur baru. Untuk bermigrasi ke Compose, sebaiknya lakukan migrasi inkremental tempat Compose dan View berada berdampingan dalam codebase Anda sampai aplikasi sepenuhnya berada di Compose.

**Gambar 1**. Tahap migrasi aplikasi berbasis View ke Compose

Untuk memigrasikan aplikasi Anda ke Compose, ikuti langkah-langkah berikut:

Buat fitur baru dengan Compose.
Saat Anda membuat fitur, identifikasi elemen yang dapat digunakan kembali dan mulai buat library komponen UI umum.
Ganti fitur yang ada di satu layar dalam satu waktu.

Membuat fitur baru dengan Compose

Menggunakan Compose untuk membuat fitur baru adalah cara terbaik untuk mendorong penggunaan Compose Anda. Dengan strategi ini, Anda dapat menambahkan fitur dan mengambil manfaat Compose sambil tetap memenuhi kebutuhan bisnis perusahaan Anda.

Layar baru

Saat menggunakan Compose untuk membuat fitur baru di aplikasi yang sudah ada, Anda masih menangani batasan arsitektur aplikasi. Jika menggunakan komponen Fragment dan Navigation, serta fitur yang Anda buat yang mencakup seluruh layar, Anda harus membuat Fragment baru, tetapi kontennya akan berada di Compose.

Untuk menggunakan Compose di Fragment, tampilkan ComposeView dalam metode siklus proses onCreateView() Fragment Anda. ComposeView memiliki metode setContent() tempat Anda dapat memberikan fungsi composable.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}MigrationStrategySnippets.kt

Lihat ComposeView di Fragmen untuk mempelajari lebih lanjut.

Layar yang ada

Jika fitur baru akan menjadi bagian dari layar yang ada, Anda dapat menambahkan ComposeView ke hierarki UI, seperti View lainnya.

Misalnya, Anda ingin menambahkan tampilan turunan ke LinearLayout. Anda dapat melakukannya di XML dengan cara berikut:

<LinearLayout ...>

  <Button ... />

  <TextView ... />

  <androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view" ... />

</LinearLayout>

Setelah tampilan di-inflate, Anda dapat mereferensikan ComposeView dalam hierarki dan memanggil setContent().

Untuk mempelajari ComposeView lebih lanjut, lihat Interoperability API.

Membuat library komponen UI umum

Saat membuat fitur dengan Compose, Anda akan segera menyadari bahwa Anda akhirnya membuat library komponen. Membuat library komponen UI umum memungkinkan Anda memiliki satu sumber tepercaya untuk komponen ini di aplikasi Anda dan mendukung penggunaan kembali. Fitur yang Anda buat kemudian dapat bergantung pada library ini. Teknik ini sangat berguna jika Anda membuat sistem desain kustom di Compose.

Bergantung pada ukuran aplikasi Anda, library ini dapat berupa paket, modul, atau modul library terpisah. Untuk informasi lebih lanjut tentang cara mengatur modul dalam aplikasi, lihat Panduan modularisasi aplikasi Android.

Mengganti fitur yang ada dengan Compose

Selain menggunakan Compose untuk membuat fitur baru, Anda juga perlu memigrasikan fitur yang sudah ada di aplikasi secara bertahap untuk memanfaatkan Compose.

Membuat aplikasi khusus Compose dapat mempercepat pengembangan dan juga mengurangi ukuran APK dan waktu build aplikasi. Lihat Ergonomi Developer di Compose untuk mempelajari lebih lanjut.

Layar sederhana

Tempat pertama yang harus dilihat saat memigrasikan fitur yang ada ke Compose adalah layar sederhana. Layar sederhana dapat berupa layar sambutan, layar konfirmasi, atau layar setelan tempat data yang ditampilkan di UI relatif statis.

Ambil file XML berikut:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

 <TextView
   android:id="@+id/title_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/title"
     android:textAppearance="?attr/textAppearanceHeadline2" />

 <TextView
     android:id="@+id/subtitle_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/subtitle"
     android:textAppearance="?attr/textAppearanceHeadline6" />

 <TextView
     android:id="@+id/body_text"
     android:layout_width="wrap_content"
     android:layout_height="0dp"
     android:layout_weight="1"
     android:text="@string/body"
     android:textAppearance="?attr/textAppearanceBody1" />

 <Button
     android:id="@+id/confirm_button"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="@string/confirm"/>

</LinearLayout>

File XML dapat ditulis ulang di Compose dalam beberapa baris:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}MigrationStrategySnippets.kt

Layar campuran View dan Compose

Layar yang sudah berisi sedikit kode Compose merupakan kandidat lain yang baik untuk bermigrasi sepenuhnya ke Compose. Bergantung pada kompleksitas layar, Anda dapat memigrasikannya sepenuhnya ke Compose, atau melakukannya satu per satu. Jika layar dimulai dengan Compose di subhierarki dari hierarki UI, Anda akan terus memigrasikan elemen UI hingga seluruh layar berada di Compose. Pendekatan ini juga disebut pendekatan bottom-up.

**Gambar 4.** Pendekatan bottom-up untuk memigrasikan campuran UI View dan Compose ke Compose

Menghapus komponen Fragment dan Navigation

Setelah semua UI di aplikasi Anda berada di Compose, tidak ada gunanya menggunakan Fragment di aplikasi Anda. Setelah mencapai titik itu, Anda dapat menghapus Fragment sepenuhnya, dan sebagai gantinya, menggantinya dengan composable tingkat layar yang didorong oleh Navigation Compose.

Lihat Menavigasi dengan Compose untuk mempelajari lebih lanjut.

Langkah berikutnya

Jika ingin langsung menambahkan Compose ke aplikasi, lihat Menambahkan Jetpack Compose ke aplikasi Anda. Anda juga dapat melihat referensi berikut:

Codelab
- Bermigrasi ke Jetpack Compose: Pelajari cara memigrasikan bit aplikasi contoh Sunflower ke Compose dalam codelab ini.
Contoh
- Sunflower: Pelajari kode aplikasi contoh Sunflower secara mendalam, yaitu aplikasi yang berisi kode View dan Compose.
Postingan blog
- Interop Jetpack Compose: Menggunakan Compose di RecyclerView: Pelajari cara menggunakan Compose secara optimal dalam RecyclerView.