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.

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

1. Creare nuove schermate con Componi.
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.

Crea nuove schermate con Compose

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.

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 Scrivi in un frammento, restituisci un elemento ComposeView nel metodo di ciclo di vita onCreateView() del tuo 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.

Aggiunta di nuove funzionalità nelle schermate esistenti

Puoi anche utilizzare Scrivi 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à.

Creare una libreria di componenti UI comuni

Quando crei funzionalità con Compose, ti accorgi rapidamente di dover costruire una raccolta di componenti. La creazione di una libreria di componenti comuni dell'interfaccia utente consente di avere un'unica fonte attendibile per questi componenti nell'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 design personalizzato in Compose.

A seconda delle dimensioni dell'app, questa libreria può essere un pacchetto, un modulo o un modulo 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.

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 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 tipo Visualizzazione combinata 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 approccio dal basso verso l'alto.

Rimozione del componente Frammenti e navigazione

Puoi eseguire la migrazione a Navigazione navigazione dopo aver rimosso tutti i frammenti e sostituirli con i componibili corrispondenti a livello di schermo. Gli elementi componibili a livello di schermo possono contenere un insieme di contenuti di Compose e View, ma tutte le destinazioni di navigazione devono essere componibili per consentire la migrazione di Navigation Compose. Fino ad allora, dovresti continuare a utilizzare il componente di navigazione basato su frammenti nel codice base misto di View e Compose. Per maggiori informazioni, consulta Eseguire la migrazione di Navigazione Jetpack a Navigazione Compose.

Risorse aggiuntive

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

• Codelab
  • Migrazione a Jetpack Compose: scopri come eseguire la migrazione di bit 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.
  • Jetpack Compose Interop: utilizzo di Compose in un RecyclerView: Scopri come utilizzare a prestazioni elevate Compose 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 saperne di più.