Jetpack Compose supporta l'interoperabilità con Views: puoi utilizzare Compose in Views e Views in Compose. Ciò consente l'adozione di Compose nelle app esistenti basate su View senza dover eseguire immediatamente la migrazione di tutte le View.
Passaggi per la migrazione
- Crea un piano: crea un piano solido e dettagliato per eseguire la migrazione. Ti consigliamo un backlog prioritario di attività di migrazione.
- Identifica il candidato XML per la migrazione :identifica e inizia dai componenti più piccoli che sono nodi foglia nella gerarchia ed espandi il piano di migrazione dal basso verso l'alto fino ai componenti progressivamente più elevati nella gerarchia. I candidati ideali per la migrazione iniziale sono piccoli, stateless e hanno meno dipendenze.
- Analizza la gerarchia:una volta identificata la visualizzazione XML da migrare, analizza la struttura e l'implementazione del layout XML.
- Acquisire lo stato iniziale: esegui un test dello screenshot per acquisire lo stato iniziale della visualizzazione XML selezionata.
- Prerequisito: configura le dipendenze di Compose. Verifica se il progetto ha configurato le dipendenze di Compose e il compilatore. In caso contrario, segui la procedura Configurare le dipendenze e il compilatore di Compose.
- Prerequisito: configura i temi di Compose. Verifica se nel progetto è già stata configurata la gestione dei temi di Compose. In caso contrario, segui la composizione dei temi. Mantieni il tema XML originale mentre l'app è interop Esegui la migrazione del tema XML a Compose per comprendere i pattern di come dichiarare e fino a quando il progetto non viene completamente migrato a Compose.
- Migra la visualizzazione XML a Compose:inizia la conversione del codice XML in Compose, applica il tema appropriato e aggiungi le anteprime di Compose per i composable migrati. Per gli scenari di migrazione comuni, consulta le risorse aggiuntive. Ad esempio, per eseguire la migrazione alle API Lazy in Compose, segui i passaggi descritti in Eseguire la migrazione di RecyclerView a Compose.
- Sostituisci utilizzi:sostituisci gli utilizzi precedenti della visualizzazione XML per utilizzare il nuovo componente Compose. Per aggiungere Crea nelle visualizzazioni, segui i passaggi descritti in Crea nelle visualizzazioni. Per aggiungere le visualizzazioni in Crea, segui i passaggi descritti in Visualizzazioni in Crea.
- Convalida la migrazione: verifica che lo stato iniziale acquisito nel test dello screenshot sia uguale all'anteprima di Compose del composable migrato. Se non corrispondono, itera sulla nuova UI componibile e migliorala per allinearla allo stato iniziale. Crea nuovi test della UI di Compose per il nuovo componibile.
- Rimozione di XML:una volta che il nuovo componente componibile corrisponde all'interfaccia utente XML iniziale, rimuovi il codice XML View obsoleto e i relativi test.
Scenari di migrazione comuni
Verifica che le estensioni dp e sp vengano utilizzate (16.dp, 20.sp) nei composable.
Se tools:text è presente nella visualizzazione XML, utilizzalo in un elemento componibile @Preview separato.
Conversione dell'attributo in modificatore
La maggior parte degli attributi XML diventa parte della catena modifier o dei parametri della
funzione componibile.
| Attributo XML | Equivalente di Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(comportamento predefinito, in genere non è necessario alcun modificatore) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Spazio interno) |
android:gravity="center" |
contentAlignment = Alignment.Center (casella) o horizontalAlignment / verticalArrangement (colonna/riga) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Wrap in if (visible) { ... } block |
Migrazione degli stili (styles.xml)
Gli stili XML spesso combinano più attributi per creare uno stile. In Compose, questa operazione viene eseguita creando una variante componibile con uno stile specifico.
Fornisci funzioni @Composable separate denominate in base allo stile e al componente di base, per indicare la differenza di stile e casi d'uso per questi componenti.
- Pattern: se un elemento XML utilizza uno stile personalizzato
(ad es.
style="@style/MyPrimaryButton"), non provare a replicare lo stile in linea. Suggerisci invece di creare un composable specifico. - Esempio:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Scrivi:
MyPrimaryButton(onClick = { ... })
- XML:
- Gruppi di attributi comuni:se uno stile imposta modificatori comuni (come spaziatura interna + altezza), estraili in una proprietà di estensione leggibile o in una variabile modificatore condivisa.