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 dell'app a Compose:
- Creare nuove schermate con Componi.
- Durante la creazione delle funzionalità, identifica gli elementi riutilizzabili e inizia a creare una libreria di componenti dell'interfaccia utente comuni.
- 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.
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 includerne i 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()
}
}
}
}
Per scoprire di più, consulta ComposeView in Fragments.
Aggiungere 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>
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 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 il riutilizzo. 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 per 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>
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))
}
}
}
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 approccio dal basso verso l'alto.
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 Scrittura e Visualizzazione, ma tutte le destinazioni di navigazione devono essere composabili per abilitare la migrazione di Scrittura di navigazione. 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 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 saperne di più.
Consigliati per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Utilizzare Scrittura nelle visualizzazioni
- Scorrimento
- Eseguire la migrazione di
RecyclerViewin un elenco lazy