Strategia di migrazione

Se hai già un'app basata sulle visualizzazioni, potresti non voler riscrivere l'intera UI in una volta sola. Questa pagina ti consente di aggiungere nuovi componenti di Compose nell'app esistente. Per iniziare a utilizzare Compose nell'app, consulta Configurare Compose per un'app esistente.

Jetpack Compose è stato progettato con l'interoperabilità di View fin dall'inizio. Questa funzionalità ti consente di eseguire la migrazione a Compose dell'app esistente basata sulle visualizzazioni, pur continuando a creare nuove funzionalità. Per eseguire la migrazione a Compose, consigliamo una migrazione incrementale in cui Compose e Views coesistono nel tuo codebase finché 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 Compose.
2. Mentre crei le caratteristiche, identifica gli elementi riutilizzabili e inizia a creare una libreria dei componenti comuni dell'interfaccia utente.
3. Sostituisci le funzionalità esistenti una schermata alla volta.

Creare nuove schermate con Compose

Utilizzare Compose per creare nuove funzionalità che comprendono un intero schermo è il modo migliore per aumentare 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 Scrivi per creare nuove schermate nell'app esistente, devi continuare a lavorare secondo i vincoli dell'architettura dell'app. Se utilizzi i frammenti e il componente di navigazione, devi creare un nuovo frammento e i suoi contenuti in Compose.

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

Aggiungi nuove funzionalità nelle schermate esistenti

Figura 3. Una schermata esistente con visualizzazioni e Compose miste

Puoi utilizzare Scrivi anche in una schermata esistente basata sulle visualizzazioni se la nuova funzionalità che stai aggiungendo fa parte di una schermata esistente. Per farlo, aggiungi un elemento ComposeView alla gerarchia delle viste, come qualsiasi altra vista.

Ad esempio, supponi di voler aggiungere una visualizzazione secondaria a 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>
migration_strategy_existing_screens.xml

Una volta che la visualizzazione è stata gonfiata, puoi fare riferimento a ComposeView nella gerarchia e chiamare setContent().

Per saperne di più su ComposeView, dai un'occhiata alle API interoperabilità.

Crea una libreria dei componenti comuni dell'interfaccia utente

Man mano che crei funzionalità con Compose, ti renderai presto conto che finisci per creare una libreria di componenti. La creazione di una libreria di componenti comuni dell'interfaccia utente consente di avere un'unica fonte attendibile per questi componenti dell'app e promuoverne il riutilizzo. 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 della libreria separato. Per ulteriori informazioni sull'organizzazione dei moduli nella tua app, consulta la guida alla modularizzazione delle app Android.

Sostituisci le funzionalità esistenti con Compose

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

L'utilizzo dell'app solo per Compose consente di accelerare lo sviluppo, nonché di ridurre le dimensioni dell'APK e i tempi di creazione dell'app. Consulta la pagina Confrontare le prestazioni di Compose e View per saperne di più.

Nota: fai affidamento sui test dell'UI per assicurarti di non introdurre regressioni durante la migrazione. Vedi Testare le app su Android e Test del layout di Compose per scoprire di più sui test dell'UI.

Schermate semplici

I primi aspetti da esaminare durante la migrazione delle funzionalità esistenti a Compose sono semplici schermate. 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

Schermate Visualizzazione e Scrivi mista

Una schermata che contiene già una porzione di codice di Compose è un'altra buona candidata per eseguire la migrazione completa a Compose. A seconda della complessità dello schermo, puoi eseguire la migrazione completa su Compose, oppure eseguirlo singolarmente. Se la schermata iniziava con Compose in un sottoalbero della gerarchia dell'interfaccia utente, continuerai a eseguire la migrazione degli elementi dell'interfaccia utente fino a quando l'intera schermata non si trova in Compose. Questo approccio è chiamato anche basso verso l'alto.

Figura 4. Approccio dal basso verso l'alto della migrazione di un'interfaccia utente mista Visualizzazioni e Compose

Rimozione di frammenti e componente di navigazione

Puoi eseguire la migrazione a Scrittura di navigazione dopo aver rimosso tutti i frammenti e sostituirli con gli elementi componibili corrispondenti a livello di schermo. Gli elementi componibili a livello di schermo possono contenere un mix di contenuti di Scrivi e Visualizza contenuti, ma tutte le destinazioni di navigazione devono essere componibili per abilitare la migrazione di Scrittura Navigazione. Fino ad allora, devi continuare a utilizzare il componente di navigazione basato su frammenti nel codebase misto View e Compose. Per ulteriori informazioni, consulta Eseguire la migrazione da Jetpack Navigation a Navigation Compose.

Nota: l'utilizzo di Navigation Compose in un'app solo per Compose 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 dell'app esistente basata su visualizzazioni a Compose:

• Codelab
  • Migrazione a Jetpack Compose: scopri come eseguire la migrazione dei bit dell'app di esempio Sunflower in Compose in questo codelab.
• Esempio
  • Sunflower: approfondisci il codice dell'app di esempio Sunflower, un'app contenente sia codici di visualizzazione che di scrittura.
• Post del blog
  • Migrazione di Sunflower a Jetpack Compose: scopri come Sunflower è stata migrata a Compose utilizzando la strategia descritta in questa pagina.
  • Jetpack Compose Interop: utilizza Compose in un RecyclerView: scopri come utilizzare in modo efficiente Compose in un RecyclerView.

Passaggi successivi

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