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 Compose alla tua app esistente. Per iniziare a utilizzare Compose nella tua app, consulta Configurare Compose per un'app esistente.

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

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

Per eseguire la migrazione dell'app a Compose, segui questi passaggi:

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

Creare nuove schermate con Compose

Utilizzare 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, soddisfacendo al contempo le esigenze aziendali della tua azienda.

Figura 2. Una nuova schermata scritta in Compose

Quando utilizzi Compose per creare nuove schermate nell'app esistente, lavori comunque nel rispetto dei vincoli dell'architettura dell'app. Se utilizzi i fragment e il componente Navigation, devi creare un nuovo fragment e inserire i relativi contenuti in Compose.

Per utilizzare Compose in un fragment, restituisci un ComposeView nel metodo del ciclo di vita onCreateView() del fragment. 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 nei fragmenti.

Aggiungere nuove funzionalità nelle schermate esistenti

Figura 3. Una schermata esistente con visualizzazioni e composizione miste

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 visualizzazione gerarchica, come qualsiasi altra visualizzazione.

Ad esempio, supponiamo che tu voglia aggiungere una visualizzazione secondaria 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 che la visualizzazione è stata aumentata, puoi fare riferimento in un secondo momento a ComposeView nella gerarchia e chiamare setContent().

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

Creare una libreria di componenti UI comuni

Man mano che crei funzionalità con Compose, ti renderai conto rapidamente di star creando una libreria di componenti. La creazione di una libreria di componenti UI comuni consente di avere un'unica fonte attendibile per questi componenti nella tua app e promuove la riutilizzabilità. 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 maggiori informazioni sull'organizzazione dei moduli nell'app, consulta la Guida alla modularizzazione delle app per Android.

Sostituisci le funzionalità esistenti con Scrivi

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

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

Nota: fai affidamento ai test della UI per assicurarti di non introdurre regressioni durante la migrazione. Consulta Testare le app su Android e Testare il layout di Compose per scoprire di più sui test dell'interfaccia utente.

Schermate semplici

I primi posti da esaminare durante 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 delle 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

Visualizzazione mista e schermate di scrittura

Un'altra buona opzione per la migrazione completa a Compose è una schermata che contiene già un po' di codice Compose. A seconda della complessità della schermata, puoi eseguire la migrazione interamente a Compose o farlo pezzo per pezzo. Se lo schermo è iniziato con Compose in un sottoalbero della gerarchia UI, continuerai a eseguire la migrazione degli elementi UI finché l'intero schermo non sarà in Compose. Questo approccio è chiamato anche approccio dal basso verso l'alto.

Figura 4. Approccio dal basso verso l'alto per la migrazione di un'interfaccia utente mista di Views e Compose a Compose

Rimozione dei componenti Fragment e Navigazione

Puoi eseguire la migrazione a Navigation Compose una volta che riesci a rimuovere tutti i tuoi frammenti e sostituirli con i composable a livello di schermata corrispondenti. I composable a livello di schermata possono contenere un mix di contenuti Compose e View, ma tutte le destinazioni di navigazione devono essere composable per consentire la migrazione di Navigation Compose. Fino ad allora, devi continuare a utilizzare il componente di navigazione basato su frammenti nella tua codebase mista di View e Compose. Per ulteriori informazioni, consulta la pagina Eseguire la migrazione di Jetpack Navigation a Navigation Compose.

Nota: l'utilizzo di Navigation Compose in un'app solo con Compose non è un prerequisito. Puoi continuare a utilizzare il componente di navigazione basata su frammenti, a condizione che mantieni i frammenti per ospitare i tuoi contenuti componibili.

Risorse aggiuntive

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

• Codelab
  • Migrazione a Jetpack Compose: scopri come eseguire la migrazione di parti dell'app Sunflower a Compose in questo codelab.
• Post del blog
  • Migrazione di Sunflower a Jetpack Compose: scopri come Sunflower è stato migrato a Compose utilizzando la strategia descritta in questa pagina.
  • Interop di Jetpack Compose: utilizzo di Compose in un 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 basata su View esistente, esplora le API di interoperabilità per saperne di più.