Strategia di migrazione

Se hai un'app basata su View esistente, potresti non voler riscrivere l'intera UI in una sola volta. Questa pagina ti aiuta ad aggiungere nuovi componenti di Compose alla tua app esistente. Per iniziare a utilizzare Compose nella tua app, consulta Configura Compose per un'app esistente.

Jetpack Compose è stato progettato fin dall'inizio con l'interoperabilità con View. Questa funzionalità ti consente di eseguire la migrazione della tua app basata su View esistente a Compose, pur continuando a creare nuove funzionalità. Per eseguire la migrazione a Compose, ti consigliamo una migrazione incrementale in cui Compose e Views coesistono nel tuo codebase finché l'app non è completamente in Compose.

Figura 1. Le fasi della migrazione a Compose di un'app basata su visualizzazioni

Per eseguire la migrazione della tua app a Compose, segui questi passaggi:

1. Crea nuove schermate con Compose.
2. Mentre crei le funzionalità, identifica gli elementi riutilizzabili e inizia a creare una libreria di componenti UI comuni.
3. Sostituisci le funzionalità esistenti una schermata alla volta.

Crea nuove schermate con Compose

L'utilizzo di Compose per creare nuove funzionalità che comprendono un'intera schermata è il modo migliore per promuovere l'adozione di Compose. Con questa strategia, puoi aggiungere funzionalità e sfruttare i vantaggi di Compose, continuando a soddisfare le esigenze aziendali della tua azienda.

Figura 2. Una nuova schermata scritta in Compose

Quando utilizzi Compose per creare nuove schermate nella tua app esistente, lavori comunque nel rispetto dei vincoli dell'architettura della tua app. Se utilizzi i frammenti e il componente di navigazione, devi creare un nuovo frammento e inserire i relativi contenuti in Compose.

Per utilizzare Compose in un frammento, restituisci un ComposeView nel metodo del ciclo di vita onCreateView() del frammento. ComposeView ha un metodo setContent() in cui puoi fornire una funzione componibile.

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

Per saperne di più, consulta ComposeView in Fragments.

Aggiungi nuove funzionalità alle schermate esistenti

Figura 3. Una schermata esistente con visualizzazioni e Compose misti

Puoi anche utilizzare Compose in una schermata esistente basata su View se la nuova funzionalità che stai aggiungendo fa parte di una schermata esistente. Per farlo, aggiungi un ComposeView alla gerarchia di oggetti View, proprio come qualsiasi altro oggetto View.

Ad esempio, supponiamo che tu voglia aggiungere una vista bambino a un LinearLayout. Puoi farlo in XML come segue:

<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/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

Una volta eseguito l'inflate della visualizzazione, puoi fare riferimento a ComposeView nella gerarchia e chiamare setContent().

Per scoprire di più su ComposeView, consulta API di interoperabilità.

Crea una libreria di componenti UI comuni

Man mano che crei funzionalità con Compose, ti renderai conto rapidamente che stai creando una libreria di componenti. La creazione di una libreria di componenti UI comuni ti consente di avere una Single Source Of Truth per questi componenti nella tua app e di promuovere la riusabilità. Le funzionalità che crei possono quindi dipendere da questa libreria. Questa tecnica è particolarmente utile se stai creando un sistema di progettazione personalizzato in Compose.

A seconda delle dimensioni dell'app, questa libreria potrebbe essere un pacchetto, un modulo o un modulo di libreria separato. Per ulteriori informazioni sull'organizzazione dei moduli nella tua app, consulta la Guida alla modularizzazione delle app per Android.

Sostituisci le funzionalità esistenti con Compose

Oltre a utilizzare Compose per creare nuove funzionalità, ti consigliamo di eseguire gradualmente la migrazione delle funzionalità esistenti nella tua app per sfruttare Compose.

Se la tua app è solo Compose, puoi accelerare lo sviluppo e anche ridurre le dimensioni dell'APK e i tempi di build dell'app. Per scoprire di più, consulta Confronta le prestazioni di Compose e View.

Nota: affidati ai test della UI per assicurarti di non introdurre regressioni durante la migrazione. Per scoprire di più sui test della UI, consulta Testare le app su Android e Testare il layout di Compose.

Schermate semplici

I primi elementi da considerare quando si esegue la migrazione delle funzionalità esistenti a Compose sono le schermate semplici. Le schermate semplici possono essere una schermata di benvenuto, una schermata di conferma o una schermata di impostazioni in cui i dati visualizzati nell'interfaccia utente sono relativamente statici.

Prendi il seguente file XML:

<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>
migration_strategy_xml_example.xml

Il file XML può essere riscritto in Compose in poche righe:

@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

Schermate di visualizzazione mista e Compose

Un altro buon candidato per la migrazione completa a Compose è una schermata che contiene già un po' di codice Compose. A seconda della complessità della schermata, puoi eseguirne la migrazione completa a Compose o procedere un pezzo alla volta. Se la schermata ha iniziato a utilizzare Compose in un sottoalbero della gerarchia della UI, continuerai a eseguire la migrazione degli elementi UI finché l'intera schermata non sarà in Compose. Questo approccio è chiamato anche approccio bottom-up.

Figura 4. Approccio bottom-up per la migrazione di una UI mista di Views e Compose a Compose

Rimozione di frammenti e del componente di navigazione

Puoi eseguire la migrazione a Navigation Compose una volta che puoi rimuovere tutti i tuoi frammenti e sostituirli con i composabili corrispondenti a livello di schermata. Gli elementi componibili a livello di schermata possono contenere un mix di contenuti di Compose e View, ma tutte le destinazioni di navigazione devono essere elementi componibili per consentire la migrazione di Navigation Compose. Fino ad allora, devi continuare a utilizzare il componente di navigazione basato su frammenti nel tuo codebase misto di View e Compose. Per saperne di più, consulta Esegui la migrazione di Jetpack Navigation a Navigation Compose.

Nota: anche se puoi continuare a utilizzare i frammenti per ospitare contenuti componibili con un componente di navigazione basato su frammenti, l'obiettivo finale consigliato per un'architettura Compose-first è sostituire completamente i frammenti con elementi componibili a livello di schermo gestiti da Navigation Compose.

Risorse aggiuntive

Consulta le seguenti risorse aggiuntive per scoprire di più sulla migrazione della tua app esistente basata su View a Compose:

• Codelab
  • Migrazione a Jetpack Compose: scopri come eseguire la migrazione di parti dell'app Sunflower a Compose in questo codelab.
• Blog post
  • Migrazione di Sunflower a Jetpack Compose: scopri come Sunflower è stato migrato a Compose utilizzando la strategia descritta in questa pagina.
  • Interoperabilità di Jetpack Compose: utilizzo di Compose in una RecyclerView: scopri come utilizzare Compose in modo efficiente in un RecyclerView.

Passaggi successivi

Ora che conosci la strategia che puoi adottare per eseguire la migrazione della tua app esistente basata su View, esplora le API di interoperabilità per scoprire di più.