Migrationsstrategie

Wenn Sie bereits eine ansichtenbasierte App haben, möchten Sie die gesamte Benutzeroberfläche möglicherweise nicht auf einmal neu schreiben. Auf dieser Seite erfahren Sie, wie Sie Ihrer vorhandenen App neue Compose-Komponenten hinzufügen. Weitere Informationen zur Verwendung von Compose in Ihrer App finden Sie unter Compose für eine vorhandene App einrichten.

Jetpack Compose wurde von Anfang an mit der Interoperabilität von Ansichten entwickelt. Mit dieser Funktion können Sie Ihre vorhandene datenbankbasierte App zu Compose migrieren und gleichzeitig neue Funktionen entwickeln. Für die Migration zu Compose empfehlen wir eine inkrementelle Migration, bei der Compose und Views in Ihrer Codebasis nebeneinander existieren, bis Ihre App vollständig auf Compose basiert.

Phasen der Migration einer ansichtsbasierten App zu Compose
Abbildung 1: Die Phasen der Migration einer datenbankbasierten App zu Compose

So migrieren Sie Ihre App zu Compose:

  1. Mit Compose neue Bildschirme erstellen
  2. Identifizieren Sie beim Erstellen von Funktionen wiederverwendbare Elemente und beginnen Sie mit dem Erstellen einer Bibliothek mit gängigen UI-Komponenten.
  3. Ersetzen Sie vorhandene Funktionen nacheinander.

Mit Compose neue Bildschirme erstellen

Wenn Sie Compose verwenden, um neue Funktionen zu erstellen, die einen ganzen Bildschirm umfassen, können Sie die Akzeptanz von Compose am besten steigern. Mit dieser Strategie können Sie Funktionen hinzufügen und die Vorteile von Compose nutzen, während Sie gleichzeitig die Geschäftsanforderungen Ihres Unternehmens erfüllen.

Ein neuer Bildschirm, der in Compose geschrieben wurde
Abbildung 2: Ein neuer Bildschirm, der in Compose erstellt wurde

Wenn Sie mit Compose neue Bildschirme in Ihrer vorhandenen App erstellen, unterliegen Sie weiterhin den Einschränkungen der Architektur Ihrer App. Wenn Sie Fragmente und die Navigationskomponente verwenden, müssen Sie ein neues Fragment erstellen und den Inhalt in Compose ablegen.

Wenn Sie Compose in einem Fragment verwenden möchten, geben Sie in der onCreateView()-Lebenszyklusmethode Ihres Fragments einen ComposeView zurück. ComposeView hat eine setContent()-Methode, mit der Sie eine kombinierbare 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 auf vorhandenen Bildschirmen hinzufügen

Ein vorhandener Bildschirm mit Ansichten und „Compose“
Abbildung 3: Ein vorhandener Bildschirm mit Ansichten und „Schreiben“

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

Angenommen, Sie möchten einer LinearLayout eine untergeordnete Ansicht hinzufügen. So gehts in XML:

<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 maximiert wurde, können Sie später in der Hierarchie auf ComposeView verweisen und setContent() aufrufen.

Weitere Informationen zu ComposeView finden Sie unter Interoperabilitäts-APIs.

Bibliothek mit gängigen UI-Komponenten erstellen

Wenn Sie mit Compose Funktionen erstellen, werden Sie schnell feststellen, dass Sie eine Bibliothek mit Komponenten erstellen. Wenn Sie eine Bibliothek mit gängigen UI-Komponenten erstellen, haben Sie eine zentrale Informationsquelle für diese Komponenten in Ihrer App und können sie wiederverwenden. Die von Ihnen erstellten Funktionen können dann von dieser Bibliothek abhängen. Diese Methode ist besonders nützlich, wenn Sie ein benutzerdefiniertes Designsystem in Compose erstellen.

Je nach Größe Ihrer App kann diese Bibliothek ein separates Paket, Modul oder Bibliotheksmodul sein. Weitere Informationen zum Organisieren von Modulen in Ihrer App finden Sie im Leitfaden zur Modularisierung von Android-Apps.

Vorhandene Funktionen durch Compose ersetzen

Sie sollten Compose nicht nur zum Erstellen neuer Funktionen verwenden, sondern auch vorhandene Funktionen in Ihrer App nach und nach migrieren, um Compose optimal zu nutzen.

Wenn Sie Ihre App nur mit Compose entwickeln, können Sie die Entwicklung beschleunigen und die APK-Größe und die Build-Zeiten Ihrer App reduzieren. Weitere Informationen finden Sie unter Leistung von Compose und View vergleichen.

Einfache Bildschirme

Bei der Migration vorhandener Funktionen zu Compose sollten Sie zuerst einfache Bildschirme prüfen. Einfache Bildschirme können ein Begrüßungsbildschirm, ein Bestätigungsbildschirm oder ein Einstellungsbildschirm sein, auf dem die auf der Benutzeroberfläche angezeigten Daten relativ statisch sind.

Hier ist eine Beispiel-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 umgeschrieben 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 Editoransicht

Ein Bildschirm, der bereits etwas Compose-Code enthält, ist ein weiterer guter Kandidat für die vollständige Migration zu Compose. Je nach Komplexität des Bildschirms können Sie ihn entweder vollständig oder nach und nach zu Compose migrieren. Wenn der Bildschirm mit Compose in einem untergeordneten Knoten der UI-Hierarchie begonnen hat, fahren Sie mit der Migration der UI-Elemente fort, bis sich der gesamte Bildschirm in Compose befindet. Dieser Ansatz wird auch als Bottom-Up-Ansatz bezeichnet.

Bottom-Up-Ansatz zum Migrieren einer gemischten Benutzeroberfläche mit Ansichten und Compose zu Compose
Abbildung 4. Bottom-Up-Ansatz zur Migration einer gemischten Benutzeroberfläche mit Ansichten und Compose zu Compose

Fragmente und Navigationskomponente entfernen

Sie können zu Navigation Compose migrieren, sobald Sie alle Fragmente entfernen und durch entsprechende Composables auf Bildschirmebene ersetzen können. Composeable-Elemente auf Bildschirmebene können eine Mischung aus Compose- und Ansichtsinhalten enthalten. Alle Navigationsziele müssen jedoch Composeable-Elemente sein, damit die Migration von Navigations-Compose-Elementen möglich ist. Bis dahin sollten Sie die fragmentbasierte Navigationskomponente in Ihrer Codebasis mit gemischten View- und Compose-Code weiterhin verwenden. Weitere Informationen finden Sie unter Jetpack Navigation zu Navigation Compose migrieren.

Weitere Informationen

Weitere Informationen zur Migration Ihrer vorhandenen ansichtenbasierten App zu Compose finden Sie in den folgenden Ressourcen:

Nächste Schritte

Nachdem Sie nun wissen, wie Sie Ihre vorhandene ansichtenbasierte App migrieren können, sollten Sie sich die Interoperabilitäts-APIs ansehen.