Strategia di migrazione

Se hai un'app basata su View, 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à delle visualizzazioni. 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 le visualizzazioni coesistono nel tuo codebase finché l'app non è completamente in Compose.

Le fasi della migrazione di un'app basata su visualizzazioni a 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 intero schermo è 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.

Una nuova schermata scritta in Compose
Figura 2. Una nuova schermata scritta in Compose

Quando utilizzi Compose per creare nuove schermate nella tua app esistente, devi comunque rispettare i vincoli dell'architettura dell'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()
            }
        }
    }
}

Per saperne di più, consulta ComposeView nei frammenti.

Aggiungere nuove funzionalità nelle schermate esistenti

Una schermata esistente con visualizzazioni e Compose misti
Figura 3. Una schermata esistente con visualizzazioni miste e Compose

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 nel seguente modo:

<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>

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.

L'utilizzo esclusivo di Compose può accelerare lo sviluppo, nonché ridurre le dimensioni dell'APK e i tempi di build dell'app. Per scoprire di più, consulta Confronta le prestazioni di Compose e View.

Schermate semplici

I primi elementi da considerare quando esegui 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.

Considera 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>

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))
        }
    }
}

Schermate di visualizzazione mista e Compose

Una schermata che contiene già un po' di codice Compose è un altro buon candidato per la migrazione completa a Compose. A seconda della complessità della schermata, puoi eseguirne la migrazione completa a Compose o procedere un pezzo alla volta. Se la schermata è iniziata con 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.

Approccio bottom-up per la migrazione a Compose di una UI mista di visualizzazioni e Compose
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 sei in grado di rimuovere tutti i frammenti e sostituirli con i composabili corrispondenti a livello di schermata. Gli elementi componibili a livello di schermo 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 View e Compose misto. Per saperne di più, consulta Esegui la migrazione di Jetpack Navigation a Navigation Compose.

Risorse aggiuntive

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

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ù.