Wenn Sie bereits eine ansichtsbasierte App haben, ist es unter Umständen nicht sinnvoll, die gesamte UI auf einmal neu zu schreiben. Auf dieser Seite erfahren Sie, wie Sie Ihrer vorhandenen Anwendung neue Compose-Komponenten hinzufügen. Informationen zur Verwendung von Compose in Ihrer Anwendung finden Sie unter Compose für eine vorhandene Anwendung einrichten.
Jetpack Compose wurde von Anfang an mit der Interoperabilität von Ansichten entwickelt. So können Sie Ihre vorhandene ansichtsbasierte Anwendung zu Compose migrieren und gleichzeitig neue Funktionen erstellen. Für die Migration zu Compose empfehlen wir eine schrittweise Migration, bei der Compose und View parallel in Ihrer Codebasis vorhanden sind, bis Ihre Anwendung vollständig in Compose enthalten ist.
So migrieren Sie Ihre Anwendung zu Compose:
- Mit der Funktion „Schreiben“ neue Bildschirme erstellen
- Ermitteln Sie beim Erstellen von Elementen wiederverwendbare Elemente und erstellen Sie eine Bibliothek mit gängigen UI-Komponenten.
- Vorhandene Funktionen werden nacheinander ersetzt.
Neue Bildschirme mit der Funktion „Schreiben“ erstellen
Mit Compose können Sie neue Funktionen erstellen, die einen ganzen Bildschirm umfassen. Dies ist die beste Möglichkeit, die Einführung von Compose zu fördern. Mit dieser Strategie können Sie Funktionen hinzufügen und die Vorteile von Compose nutzen und gleichzeitig den Geschäftsanforderungen Ihres Unternehmens gerecht werden.
Wenn Sie mit „Compose“ neue Bildschirme in Ihrer vorhandenen App erstellen, arbeiten Sie weiterhin unter den Einschränkungen Ihrer Anwendungsarchitektur. Wenn Sie Fragmente und die Navigationskomponente verwenden, müssen Sie ein neues Fragment erstellen und seinen Inhalt in „Compose“ einfügen.
Wenn Sie die Funktion „Schreiben“ in einem Fragment verwenden möchten, geben Sie in der onCreateView()
-Lebenszyklusmethode Ihres Fragments ein ComposeView
zurück. Für ComposeView
gibt es eine setContent()
-Methode, mit der Sie eine zusammensetzbare Funktion angeben können.
class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } }
Weitere Informationen finden Sie unter ComposeView in Fragments.
Neue Funktionen in vorhandenen Bildschirmen hinzufügen
Sie können die Funktion „Schreiben“ auch auf einem vorhandenen ansichtsbasierten Bildschirm verwenden, wenn die neue Funktion, die Sie hinzufügen, Teil eines vorhandenen Bildschirms ist. Fügen Sie dazu wie jede andere Ansicht ein ComposeView
zur Ansichtshierarchie hinzu.
Angenommen, Sie möchten einem LinearLayout
eine untergeordnete Ansicht hinzufügen. Dies können Sie in XML tun:
<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>
Sobald die Ansicht aufgebläht wurde, können Sie später auf ComposeView
in der Hierarchie verweisen und setContent()
aufrufen.
Weitere Informationen zu ComposeView
finden Sie unter Interoperabilitäts-APIs.
Bibliothek mit gängigen UI-Komponenten erstellen
Wenn Sie Elemente mit der Funktion „Compose“ erstellen, werden Sie schnell feststellen, dass Sie am Ende eine Komponentenbibliothek erstellen. Wenn Sie eine Bibliothek mit gängigen UI-Komponenten erstellen, können Sie diese Komponenten in Ihrer App auf eine einzige Datenquelle verweisen und die Wiederverwendbarkeit fördern. Von Ihnen erstellte Funktionen können dann von dieser Bibliothek abhängen. Diese Methode ist besonders nützlich, wenn Sie ein benutzerdefiniertes Designsystem in Composer erstellen.
Je nach Größe Ihrer App kann diese Bibliothek ein separates Paket, Modul oder Bibliotheksmodul sein. Weitere Informationen zum Organisieren von Modulen in deiner App findest du im Leitfaden zur Modularisierung von Android-Apps.
Vorhandene Funktionen durch „Schreiben“ ersetzen
Neben der Verwendung von Compose zum Erstellen neuer Features sollten Sie vorhandene Features Ihrer App schrittweise migrieren, um Compose zu nutzen.
Wenn Sie Ihre App nur im Modus „Compose“ erstellen, können Sie die Entwicklung beschleunigen und die APK-Größe sowie die Build-Dauer Ihrer App reduzieren. Weitere Informationen finden Sie unter Leistung beim Schreiben und Ansehen vergleichen.
Einfache Bildschirme
Bei der Migration vorhandener Features zu Compose sollten Sie vor allem auf einfachen Bildschirmen nachsehen. Einfache Bildschirme können ein Begrüßungsbildschirm, ein Bestätigungsbildschirm oder ein Einstellungsbildschirm sein, auf dem die in der UI angezeigten Daten relativ statisch sind.
Verwenden Sie die folgende XML-Datei:
<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>
Die XML-Datei kann in „Compose“ in wenigen Zeilen neu geschrieben werden:
@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)) } } }
Gemischte Ansicht und Erstellungsbildschirm
Ein Bildschirm, der bereits Code zum Schreiben enthält, eignet sich ebenfalls gut für die vollständige Migration zu Compose. Je nach Komplexität des Bildschirms können Sie ihn entweder vollständig zu „Schreiben“ migrieren oder dies Schritt für Schritt tun. Wenn der Bildschirm mit „Schreiben“ in einer Unterstruktur der UI-Hierarchie gestartet wurde, würden Sie die Migration von UI-Elementen fortsetzen, bis sich der gesamte Bildschirm im Editorfenster befindet. Dieser Ansatz wird auch als Bottom-up-Ansatz bezeichnet.
Fragmente und Navigationskomponente entfernen
Sie können zu Navigation Compose migrieren, sobald Sie alle Fragmente entfernt und durch entsprechende zusammensetzbare Funktionen auf Bildschirmebene ersetzt haben. Zusammensetzbare Funktionen auf Bildschirmebene können eine Mischung aus „Inhalt erstellen“ und „Inhalt ansehen“ enthalten. Alle Navigationsziele müssen jedoch zusammensetzbar sein, damit die Migration von „Navigationskomposition“ aktiviert werden kann. Bis dahin sollten Sie in der gemischten Codebasis „View“ und „Compose“ weiterhin die Komponente „Fragmentbasierte Navigation“ verwenden. Weitere Informationen finden Sie unter Jetpack Navigation zu Navigation Compose migrieren.
Zusätzliche Ressourcen
In den folgenden zusätzlichen Ressourcen erfahren Sie mehr über die Migration Ihrer vorhandenen ansichtsbasierten Anwendung zu Compose:
- Codelab
- Zu Jetpack Compose migrieren: In diesem Codelab erfahren Sie, wie Sie Teile der Beispielanwendung Sunflower zu Compose migrieren.
- Beispiel
- Sunflower: Sehen Sie sich den Code der Sunflower-Beispiel-App an, einer App, die sowohl Code zum Ansehen als auch Schreiben enthält.
- Blog posts
- Sunflower zu Jetpack Compose migrieren: Hier erfahren Sie, wie Sunflower mit der auf dieser Seite beschriebenen Strategie zu Compose migriert wurde.
- Jetpack Compose Interop: Compose in einem RecyclerView verwenden: Hier erfahren Sie, wie Sie „Compose“ in einem
RecyclerView
verwenden.
Nächste Schritte
Sie wissen jetzt, wie Sie Ihre vorhandene ansichtsbasierte Anwendung migrieren können. Sehen Sie sich nun die Interoperabilitäts-APIs an, um mehr zu erfahren.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Die Funktion „Schreiben“ in Views verwenden
- Scrollen
RecyclerView
zur Lazy-Liste migrieren