Jetpack Compose unterstützt die Interoperabilität mit Views. Sie können Compose in Views und Views in Compose verwenden. So kann Compose in vorhandenen View-basierten Apps verwendet werden, ohne dass alle Views sofort migriert werden müssen.
Migrationsschritte
- Plan erstellen:Erstellen Sie einen robusten Plan für die Migration, der Schritt für Schritt vorgeht. Wir empfehlen, einen priorisierten Backlog mit Migrationsaufgaben zu erstellen.
- XML-Kandidaten für die Migration identifizieren :Beginnen Sie mit den kleinsten Komponenten, die Blattknoten in der Hierarchie sind, und erweitern Sie den Migrationsplan von unten nach oben auf immer höhere Komponenten in der Hierarchie. Gute Kandidaten für die erste Migration sind klein, zustandslos und haben weniger Abhängigkeiten.
- Hierarchie analysieren:Nachdem Sie die zu migrierende XML-Ansicht identifiziert haben, analysieren Sie ihre XML-Layoutstruktur und -Implementierung.
- Ausgangszustand erfassen:Führen Sie einen Screenshot-Test aus, um den Ausgangszustand der ausgewählten XML-Ansicht zu erfassen.
- Voraussetzung: Compose-Abhängigkeiten einrichten: Prüfen Sie, ob für das Projekt Compose-Abhängigkeiten und der Compiler eingerichtet sind. Falls nicht, folgen Sie der Anleitung unter Compose-Abhängigkeiten und Compiler einrichten.
- Voraussetzung: Compose-Theming einrichten: Prüfen Sie, ob das Compose-Theming im Projekt bereits eingerichtet ist. Ist dies nicht der Fall, folgen Sie der Anleitung unter „Compose-Theming“. Behalten Sie das ursprüngliche XML-Theming bei, während die App interop ist. XML-Theme zu Compose migrieren enthält Informationen zu Mustern für die Migration von XML-Themes zu Compose.
- XML-Ansicht zu Compose migrieren:Beginnen Sie mit der Konvertierung des XML-Codes zu Compose, wenden Sie das entsprechende Theming an und fügen Sie Compose-Vorschauen für migrierte Composables hinzu. Weitere Informationen zu gängigen Migrationsszenarien finden Sie in den zusätzlichen Ressourcen. Wenn Sie beispielsweise zu Lazy APIs in Compose migrieren möchten, folgen Sie der Anleitung unter RecyclerView zu Compose migrieren.
- Verwendungen ersetzen:Ersetzen Sie die bisherigen Verwendungen der XML-Ansicht durch die neue Compose-Komponente. Wenn Sie Compose in Views hinzufügen möchten, folgen Sie der Anleitung unter Compose in Views. Wenn Sie Ansichten in Compose hinzufügen möchten, folgen Sie der Anleitung unter Ansichten in Compose.
- Migration validieren:Prüfen Sie, ob der im Screenshot-Test erfasste Anfangszustand mit der Compose-Vorschau des migrierten Composables übereinstimmt. Wenn sie nicht übereinstimmen, wiederholen Sie den Vorgang für die neue zusammensetzbare Benutzeroberfläche und verbessern Sie sie, damit sie mit dem ursprünglichen Zustand übereinstimmt. Erstellen Sie neue Compose-UI-Tests für die neue Composable-Funktion.
- XML entfernen:Wenn die neu migrierte zusammensetzbare Funktion der ursprünglichen XML-Benutzeroberfläche entspricht, entfernen Sie den veralteten XML-View-Code und die zugehörigen Tests.
Häufige Migrationsszenarien
Prüfen Sie, ob die Erweiterungen dp und sp in Composables verwendet werden (16.dp, 20.sp).
Wenn tools:text in der XML-Ansicht vorhanden ist, verwenden Sie es in einer separaten @Preview-Composable.
Konvertierung von Attributen in Modifikatoren
Die meisten XML-Attribute werden Teil der modifier-Kette oder Parameter der zusammensetzbaren Funktion.
| XML-Attribut | Entsprechende Funktion für „Textvorschläge“ |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Standardverhalten, normalerweise ist kein Modifikator erforderlich) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Äußerer Abstand) |
android:gravity="center" |
contentAlignment = Alignment.Center (Feld) oder horizontalAlignment / verticalArrangement (Spalte/Zeile) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
In if (visible) { ... }-Block einfügen |
Stile migrieren (styles.xml)
XML-Stile kombinieren oft mehrere Attribute, um einen Stil zu erstellen. In Compose wird dies durch Erstellen einer Composable-Variante mit einem bestimmten Stil erreicht.
Stellen Sie separate @Composable-Funktionen bereit, die nach dem Stil und der Basiskomponente benannt sind, um den Unterschied in der Gestaltung und den Anwendungsfällen für diese Komponenten zu verdeutlichen.
- Muster:Wenn ein XML-Element einen benutzerdefinierten Stil verwendet (z.B.
style="@style/MyPrimaryButton") sollten Sie nicht versuchen, den Stil inline zu replizieren. Schlagen Sie stattdessen vor, eine bestimmte zusammensetzbare Funktion zu erstellen. - Beispiel:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Schreiben:
MyPrimaryButton(onClick = { ... })
- XML:
- Häufig verwendete Attributgruppen:Wenn in einem Stil häufig verwendete Modifizierer (z. B. „padding“ und „height“) festgelegt werden, extrahieren Sie sie in eine lesbare Erweiterungseigenschaft oder eine gemeinsam verwendete Modifizierervariable.