Migrationsstrategie

Wenn Sie bereits eine ansichtsbasierte App haben, möchten Sie möglicherweise nicht die gesamte UI auf einmal neu schreiben. Auf dieser Seite wird beschrieben, 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. Das bedeutet, dass Sie Ihre bestehende ansichtsbasierte Anwendung zu „Compose“ migrieren und gleichzeitig neue Funktionen erstellen können. Für die Migration zu Compose empfehlen wir eine schrittweise Migration, bei der Compose und Ansichten in Ihrer Codebasis gleichzeitig vorhanden sind, bis Ihre Anwendung vollständig in Compose ist.

Phasen der Migration einer auf Ansichten basierenden App zu „Compose“
Abbildung 1: Phasen der Migration einer ansichtsbasierten Anwendung zu „Compose“

So migrieren Sie Ihre Anwendung zu Compose:

  1. Mit der Funktion „Schreiben“ lassen sich neue Bildschirme erstellen.
  2. Identifizieren Sie beim Erstellen von Features wiederverwendbare Elemente und erstellen Sie eine Bibliothek mit gängigen UI-Komponenten.
  3. Vorhandene Funktionen auf Bildschirm für Bildschirm ersetzen.

Mit der Funktion „Schreiben“ neue Bildschirme erstellen

Die Akzeptanz von Compose lässt sich am besten steigern, wenn Sie neue Funktionen erstellen, die einen ganzen Bildschirm umfassen. Mit dieser Strategie können Sie Features hinzufügen, die Vorteile von Compose nutzen und gleichzeitig die Geschäftsanforderungen Ihres Unternehmens erfüllen.

Ein neuer Bildschirm in „Compose“
Abbildung 2: Ein neuer Bildschirm in „Compose“

Auch wenn Sie mit der Funktion „Compose“ neue Bildschirme in Ihrer vorhandenen Anwendung erstellen, unterliegen Sie den Einschränkungen der Anwendungsarchitektur. Wenn Sie Fragmente und die Navigationskomponente verwenden, müssen Sie ein neues Fragment erstellen, dessen Inhalt in „Compose“ enthalten sein soll.

Wenn Sie „Compose“ in einem Fragment verwenden möchten, geben Sie in der Lebenszyklusmethode onCreateView() des Fragments ein ComposeView zurück. Für ComposeView gibt es eine setContent()-Methode, mit der Sie eine zusammensetzbare Funktion bereitstellen 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

Ein vorhandener Bildschirm mit gemischten Ansichten und Textvorschlägen
Abbildung 3: Ein vorhandener Bildschirm mit gemischten Ansichten und Textvorschlägen

Sie können die Funktion „Schreiben“ auch in einem vorhandenen ansichtsbasierten Bildschirm verwenden, wenn die neue Funktion, die Sie hinzufügen, Teil eines vorhandenen Bildschirms ist. Fügen Sie dazu der Ansichtshierarchie ein ComposeView hinzu, wie bei jeder anderen Ansicht.

Angenommen, Sie möchten eine Kinderansicht zu einem LinearLayout hinzufügen. Dazu können Sie wie folgt in XML vorgehen:

<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

Nachdem die Ansicht aufgebläht wurde, können Sie später auf das 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 Funktionen 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 eine zentrale Datenquelle für diese Komponenten in Ihrer Anwendung haben und die Wiederverwendbarkeit fördern. Von Ihnen erstellte Features 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 Erstellung neuer Funktionen mit Compose sollten Sie vorhandene Features in Ihrer Anwendung nach und nach migrieren, um die Vorteile von Compose nutzen zu können.

Wenn Sie Ihre App nur für das Schreiben verwenden, können Sie die Entwicklung beschleunigen und gleichzeitig die APK-Größe und Build-Dauer der App reduzieren. Weitere Informationen finden Sie unter Leistung beim Verfassen und Ansehen vergleichen.

Einfache Bildschirme

Wenn Sie vorhandene Funktionen zu Compose migrieren, sollten Sie zuerst auf einfache Bildschirme achten. Einfache Bildschirme können ein Begrüßungsbildschirm, ein Bestätigungsbildschirm oder ein Einstellungsbildschirm sein, bei dem die auf der Benutzeroberfläche angezeigten Daten relativ statisch sind.

Erstellen 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 lässt sich in wenigen Zeilen unter „Compose“ neu schreiben:

@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 zu Compose enthält, eignet sich ebenfalls gut für die Migration vollständig zu Compose. Je nach Komplexität des Bildschirms können Sie diesen entweder vollständig zu Compose migrieren oder dies Schritt für Schritt tun. Wenn der Bildschirm in einer Unterstruktur der UI-Hierarchie mit „Compose“ begonnen hat, werden Sie so lange UI-Elemente migrieren, bis sich der gesamte Bildschirm in „Compose“ befindet. Dieser Ansatz wird auch als Bottom-up-Ansatz bezeichnet.

Bottom-up-Ansatz zum Migrieren einer gemischten Ansichten und einer Benutzeroberfläche für die Erstellung zum Schreiben
Abbildung 4: Bottom-up-Ansatz zum Migrieren einer gemischten Ansichten und einer Schreib-UI zum Erstellen einer Nachricht

Fragmente und Navigationskomponente entfernen

Sie können zu Navigation Compose migrieren, sobald Sie alle Ihre Fragmente entfernen und durch entsprechende zusammensetzbare Funktionen auf Bildschirmebene ersetzen können. Zusammensetzbare Funktionen auf Bildschirmebene können eine Mischung aus „Schreiben“ und „Inhalte ansehen“ enthalten, allerdings müssen alle Navigationsziele zusammensetzbare Funktionen sein, damit die Migration der Funktion „Schreibassistent“ aktiviert werden kann. Bis dahin sollten Sie die Fragmentbasierte Navigationskomponente in der gemischten Codebasis „View“ und „Compose“ weiter verwenden. Weitere Informationen finden Sie unter Jetpack Navigation zu Navigation Compose migrieren.

Weitere Informationen

In den folgenden zusätzlichen Ressourcen erfahren Sie mehr über die Migration Ihrer vorhandenen ansichtsbasierten Anwendung zu Compose:

Nächste Schritte

Sie wissen jetzt, wie Sie Ihre vorhandene anzeigenbasierte Anwendung migrieren können. Machen Sie sich nun mit den Interoperabilitäts-APIs vertraut, um mehr zu erfahren.