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 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 View-Interoperabilität 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.

So migrieren Sie Ihre App zu Compose:

1. Mit der Funktion „Schreiben“ 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

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, während Sie gleichzeitig die Geschäftsanforderungen Ihres Unternehmens erfüllen.

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 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 auf vorhandenen Bildschirmen hinzufügen

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

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 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 deiner App findest du 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 einer Unterstruktur der UI-Hierarchie gestartet wurde, würden Sie die Migration von UI-Elementen fortsetzen, bis sich der gesamte Bildschirm in „Compose“ 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 entfernen und durch entsprechende Composables auf Bildschirmebene ersetzen können. 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 vom Typ „Navigationskomposition“ aktiviert werden kann. 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

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 Sunflower App zu Compose migrieren.
• Blogbeiträge
  • Sunflower zu Jetpack Compose migrieren: Hier erfahren Sie, wie Sunflower mithilfe der auf dieser Seite beschriebenen Strategie zu Compose migriert wurde.
  • Jetpack Compose Interop: Compose in a RecyclerView: Informationen zum effizienten Verwenden von Compose in einem RecyclerView.

Nächste Schritte

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