Migrationsstrategie

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.

Abbildung 1. Die Phasen der Migration einer ansichtsbasierten App zu „Compose“

So migrieren Sie Ihre Anwendung zu Compose:

1. Mit der Funktion „Schreiben“ neue Bildschirme erstellen
2. Ermitteln Sie beim Erstellen von Elementen wiederverwendbare Elemente und erstellen Sie eine Bibliothek mit gängigen UI-Komponenten.
3. 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.

Abbildung 2: Neuer Bildschirm in „Compose“

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()
            }
        }
    }
}
MigrationStrategySnippets.kt

Weitere Informationen finden Sie unter ComposeView in Fragments.

Neue Funktionen in vorhandenen Bildschirmen hinzufügen

Abbildung 3: Einen vorhandenen Bildschirm mit gemischten Ansichten und dem Editorfenster

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>
migration_strategy_existing_screens.xml

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.

Hinweis: Sorgen Sie mithilfe von UI-Tests dafür, dass während der Migration keine Regressionen eingeleitet werden. Weitere Informationen zu UI-Tests finden Sie unter Apps unter Android testen und Layout von „Compose“ testen.

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>
migration_strategy_xml_example.xml

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))
        }
    }
}
MigrationStrategySnippets.kt

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.

Abbildung 4: Bottom-up-Ansatz zur Migration einer gemischten UI für Ansichten und Schreiben zu Compose

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.

Hinweis :Die Verwendung von „Navigation Compose“ in einer reinen Schreib-App ist keine Voraussetzung. Sie können die Komponente für die fragmentierte Navigation weiterhin verwenden, solange Sie Fragmente zum Hosten Ihrer zusammensetzbaren Inhalte behalten.

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.