Strategia di migrazione

Se hai già un'app basata su visualizzazioni, potresti non voler riscriverne l'intera UI contemporaneamente. Questa pagina ti aiuta ad aggiungere nuovi componenti di 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à delle visualizzazioni. Questa funzionalità ti consente di eseguire la migrazione della tua app basata su visualizzazione esistente a Compose mantenendo la possibilità di creare nuove funzionalità. Per eseguire la migrazione a Compose, consigliamo una migrazione incrementale in cui Compose e Views coesistano nel codebase fino a quando l'app non sarà completamente in Compose.

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

Per eseguire la migrazione dell'app a Compose:

1. Crea nuove schermate con Scrivi.
2. Durante la creazione delle funzionalità, identifica gli elementi riutilizzabili e inizia a creare una libreria di componenti dell'interfaccia utente comuni.
3. Sostituisci le funzionalità esistenti una schermata alla volta.

Creare nuove schermate con Componi

Utilizzare Componi per creare nuove funzionalità che abbracciano un'intera schermata è il modo migliore per promuovere l'adozione di Componi. Con questa strategia, puoi aggiungere funzionalità e usufruire dei vantaggi di Compose, soddisfacendo al contempo le esigenze commerciali della tua azienda.

Figura 2. Una nuova schermata scritta in Compose

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

Per utilizzare Compose in un frammento, restituisci un ComposeView nel metodo di 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 scoprire di più, consulta ComposeView in Fragments.

Aggiungere nuove funzionalità nelle schermate esistenti

Figura 3. Una schermata esistente con visualizzazioni e Scrivi combinate

Puoi utilizzare Scrivi anche in una schermata basata su visualizzazione esistente se la nuova funzionalità che stai aggiungendo fa parte di una schermata esistente. Per farlo, aggiungi un ComposeView alla gerarchia delle visualizzazioni, come faresti con 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 espansa la visualizzazione, puoi fare riferimento a ComposeView nella gerarchia e chiamare setContent() in un secondo momento.

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

Crea una libreria di componenti dell'interfaccia utente comuni

Quando crei funzionalità con Compose, ti accorgi rapidamente di dover costruire una raccolta di componenti. La creazione di una raccolta di componenti dell'interfaccia utente comuni consente di avere un'unica fonte attendibile per questi componenti nella tua app e di promuovere la riutilizzabilità. Le funzionalità che crei possono quindi dipendere da questa libreria. Questa tecnica è particolarmente utile se stai creando un sistema di design personalizzato in Compose.

A seconda delle dimensioni dell'app, questa libreria potrebbe essere un pacchetto, un modulo o un modulo della libreria separato. Per ulteriori informazioni sull'organizzazione dei moduli nell'app, consulta la guida alla modularizzazione delle app Android.

Sostituire le funzionalità esistenti con Componi

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

Avere un'app solo Compose può accelerare lo sviluppo e anche 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: affidati ai test dell'interfaccia utente per assicurarti di non introdurre regressioni durante la migrazione. Per scoprire di più sui test dell'interfaccia utente, consulta Testare le app su Android e Testare il layout di Compose.

Schermate semplici

Le prime sezioni da controllare 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 di impostazione 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 Componi 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 Scrivi

Un'altra buona candidata 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 in Compose o farlo pezzo per pezzo. Se la schermata è iniziata con Compose in un sottoalbero della gerarchia dell'interfaccia utente, continua a eseguire la migrazione degli elementi dell'interfaccia utente finché l'intera schermata non è in Compose. Questo approccio è anche chiamato dal basso verso l'alto.

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

Rimozione di frammenti e componente di navigazione

Puoi eseguire la migrazione a Navigation Compose quando riesci a rimuovere tutti i frammenti e a sostituirli con composabili a livello di schermata corrispondenti. I composabili a livello di schermata possono contenere una combinazione di contenuti di Componi e Visualizza, ma tutte le destinazioni di navigazione devono essere composabili per abilitare la migrazione di Componi navigazione. Fino ad allora, dovresti continuare a utilizzare il componente di navigazione basato su frammenti nel codebase misto di View e Compose. Per maggiori informazioni, consulta Eseguire la migrazione di Navigazione Jetpack a Navigazione Compose.

Nota: l'utilizzo di Componi navigazione in un'app solo di Componi non è un prerequisito. Puoi continuare a utilizzare il componente di navigazione basato su frammenti, a condizione di mantenere 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 visualizzazioni 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 è stata eseguita la migrazione di Sunflower a Compose utilizzando la strategia descritta in questa pagina.
  • Interoperabilità 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 visualizzazioni esistente, esplora le API di interoperabilità per scoprire di più.