Migrationsstrategie

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

Jetpack Compose wurde von Anfang an für die Interoperabilität mit Ansichten entwickelt. Dank dieser Funktion können Sie Ihre vorhandene View-basierte 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 in Compose geschrieben ist.

Abbildung 1: Die Phasen der Migration einer View-basierten App zu Compose

So migrieren Sie Ihre App zu Compose:

1. Neue Bildschirme mit Compose erstellen
2. Identifizieren Sie beim Erstellen von Funktionen wiederverwendbare Elemente und erstellen Sie eine Bibliothek mit gängigen UI-Komponenten.
3. Ersetzen Sie vorhandene Funktionen Bildschirm für Bildschirm.

Neue Bildschirme mit Compose erstellen

Wenn Sie mit Compose neue Funktionen erstellen, die einen ganzen Bildschirm umfassen, ist das die beste Möglichkeit, die Einführung von Compose voranzutreiben. Mit dieser Strategie können Sie Funktionen hinzufügen und die Vorteile von Compose nutzen, während Sie gleichzeitig die geschäftlichen Anforderungen Ihres Unternehmens erfüllen.

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

Wenn Sie mit Compose neue Bildschirme in Ihrer vorhandenen App erstellen, arbeiten Sie weiterhin im Rahmen der Einschränkungen der Architektur Ihrer App. Wenn Sie Fragmente und die Navigationskomponente verwenden, müssen Sie ein neues Fragment erstellen und dessen Inhalte in Compose einfügen.

Wenn Sie Compose in einem Fragment verwenden möchten, geben Sie in der Lebenszyklusmethode onCreateView() des Fragments ein ComposeView zurück. ComposeView hat 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 Fragmenten.

Neue Funktionen auf vorhandenen Bildschirmen hinzufügen

Abbildung 3: Ein vorhandener Bildschirm mit einer Mischung aus Ansichten und Compose

Sie können Compose auch in einem vorhandenen View-basierten Bildschirm verwenden, wenn die neue Funktion, die Sie hinzufügen, 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. In XML können Sie dies so 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

Nachdem die Ansicht aufgebläht 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 Funktionen mit Compose 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 Technik 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

Zusätzlich zur Verwendung von Compose zum Erstellen neuer Funktionen sollten Sie vorhandene Funktionen in Ihrer App schrittweise migrieren, um die Vorteile von Compose zu nutzen.

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

Hinweis: Führen Sie UI-Tests durch, um sicherzustellen, dass während der Migration keine Regressionen auftreten. Weitere Informationen zu UI-Tests finden Sie unter Apps auf Android testen und Compose-Layout testen.

Einfache Bildschirme

Die ersten Stellen, die Sie bei der Migration vorhandener Funktionen zu Compose berücksichtigen sollten, sind einfache Bildschirme. Einfache Bildschirme können ein Begrüßungsbildschirm, ein Bestätigungsbildschirm oder ein Einstellungsbildschirm sein, auf dem die in der Benutzeroberfläche angezeigten Daten relativ statisch sind.

Beispiel für eine 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 mit 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 Compose-Bildschirme

Ein Bildschirm, der bereits ein wenig 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 zu Compose migrieren oder Stück für Stück. Wenn der Bildschirm mit Compose in einem Unterbaum der UI-Hierarchie begonnen hat, migrieren Sie weitere UI-Elemente, bis der gesamte Bildschirm in Compose ist. Dieser Ansatz wird auch als Bottom-up-Ansatz bezeichnet.

Abbildung 4: Bottom-up-Ansatz zur Migration einer gemischten Views- und Compose-UI 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. Composables auf Bildschirmebene können eine Mischung aus Compose- und View-Inhalten enthalten. Alle Navigationsziele müssen jedoch Composables sein, um die Migration zu Navigation Compose zu ermöglichen. Bis dahin sollten Sie in Ihrer gemischten View- und Compose-Codebasis weiterhin die fragmentbasierte Navigationskomponente verwenden. Weitere Informationen finden Sie unter Jetpack Navigation zu Navigation Compose migrieren.

Hinweis: Sie können weiterhin Fragmente verwenden, um zusammensetzbare Inhalte mit einer fragmentbasierten Navigationskomponente zu hosten. Das empfohlene Endziel für eine Compose-First-Architektur ist jedoch, Fragmente vollständig durch zusammensetzbare Funktionen auf Bildschirmebene zu ersetzen, die von Navigation Compose verwaltet werden.

Zusätzliche Ressourcen

In den folgenden zusätzlichen Ressourcen finden Sie weitere Informationen zur Migration Ihrer vorhandenen ansichtsbasierten App zu Compose:

• Codelab
  • Migration zu Jetpack Compose: In diesem Codelab erfahren Sie, wie Sie Teile der Sunflower-App zu Compose migrieren.
• Blog posts
  • Sunflower zu Jetpack Compose migrieren: Hier erfährst du, wie Sunflower mit der auf dieser Seite beschriebenen Strategie zu Compose migriert wurde.
  • Jetpack Compose Interop: Compose in einer RecyclerView verwenden: Hier erfahren Sie, wie Sie Compose in einer RecyclerView leistungsstark verwenden.

Nächste Schritte

Nachdem Sie nun die Strategie für die Migration Ihrer vorhandenen ansichtsbasierten App kennen, können Sie sich die Interoperabilitäts-APIs ansehen, um mehr zu erfahren.