Migrationsstrategie

Wenn Sie bereits eine ansichtsbasierte App haben, sollten Sie nicht das gesamte mit der Benutzeroberfläche. Auf dieser Seite erfahren Sie, wie Sie neue Compose-Komponenten zu Ihrem bestehenden App hinzu. Informationen zur Verwendung von „Schreiben“ in Ihrer App finden Sie unter „Schreiben“ einrichten für eine vorhandene App.

Jetpack Compose wurde von Anfang an mit der Interoperabilität von Ansichten entwickelt. Das bedeutet, dass Sie Ihre bestehende ansichtsbasierte App zu „Compose“ migrieren können während Sie gleichzeitig neue Funktionen entwickeln können. Für die Migration zu Compose empfehlen eine schrittweise Migration, bei der die Funktionen "Compose" und "Views" gleichzeitig in Ihrem -Codebasis, bis sich Ihre Anwendung vollständig in Compose befindet.

So migrieren Sie Ihre Anwendung zu Compose:

1. Mit der Funktion „Schreiben“ neue Bildschirme erstellen
2. Identifizieren Sie wiederverwendbare Elemente und eine Bibliothek gängiger UI-Komponenten.
3. Vorhandene Funktionen werden nacheinander ersetzt.

Neue Bildschirme mit der Funktion „Schreiben“ erstellen

Am besten verwendest du die Funktion „Schreiben“, um neue Funktionen zu erstellen, die den gesamten Bildschirm abdecken. die Akzeptanz von Compose verbessern können. Mit dieser Strategie können Sie und die Vorteile von „Schreiben“ nutzen und gleichzeitig Unternehmensanforderungen zu erfüllen.

Wenn Sie mit der Funktion "Schreiben" neue Bildschirme in Ihrer bestehenden App erstellen, unter den Einschränkungen Ihrer App-Architektur arbeiten. Wenn Sie Fragmente und Navigationskomponente erstellt haben, müssen Sie ein neues Fragment und seinen Inhalt in Compose haben.

Wenn Sie die Funktion „Schreiben“ in einem Fragment verwenden möchten, geben Sie ein ComposeView im onCreateView() für Ihr Fragment. ComposeView hat einen 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

Sie können die Funktion "Schreiben" auch in einem vorhandenen ansichtsbasierten Bildschirm verwenden, eines vorhandenen Bildschirms. Fügen Sie dazu ComposeView zum Sehen Sie sich die Hierarchie genau wie in jeder anderen Ansicht an.

Angenommen, Sie möchten einem LinearLayout eine untergeordnete Ansicht hinzufügen. Sie können Folgendes tun: 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 die ComposeView verweisen: und rufen Sie setContent() auf.

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

Bibliothek mit gängigen UI-Komponenten erstellen

Wenn Sie mit der Funktion „Schreiben“ neue Funktionen erstellen, werden Sie schnell feststellen, einer Komponentenbibliothek erstellen. Bibliothek mit gängigen UI-Komponenten erstellen ermöglicht es Ihnen, diese Komponenten in Ihrer App über eine zentrale Datenquelle Wiederverwendbarkeit fördern. Von Ihnen erstellte Funktionen können dann von dieser Bibliothek abhängen. Dieses Technik ist besonders nützlich, wenn Sie ein benutzerdefiniertes Designsystem in Schreiben:

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

Vorhandene Funktionen durch „Schreiben“ ersetzen

Neben der Verwendung von „Schreiben“ zur Entwicklung neuer Funktionen Migrieren Sie vorhandene Funktionen in Ihrer App, um die Funktion „Compose“ nutzen zu können.

Wenn Sie für Ihre App nur Text erstellen, können Sie die Entwicklung beschleunigen und Reduzieren Sie die APK-Größe und die Build-Dauer Ihrer App. Weitere Informationen finden Sie unter „Schreiben“ und „Ansicht“ im Vergleich finden Sie weitere Informationen.

Einfache Bildschirme

Wenn Sie bestehende Funktionen zu „Compose“ migrieren möchten, sollten Sie vor allem auf einfache Bildschirmen. Einfache Bildschirme können ein Begrüßungsbildschirm, ein Bestätigungsbildschirm oder ein Bildschirm, bei dem die in der Benutzeroberfläche 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 Texterstellungscode enthält, eignet sich ebenfalls gut. , um vollständig zu Compose zu migrieren. Je nach Komplexität des Bildschirms können Sie sie entweder komplett zu „Compose“ migrieren oder einzeln erstellen. Wenn die in einer Unterstruktur der UI-Hierarchie gestartet wurde, würden Sie fortfahren. Migration von UI-Elementen, bis sich der gesamte Bildschirm im Editorfenster befindet. Dieser Ansatz ist auch als Bottom-up-Ansatz bezeichnet.

Fragmente und Navigationskomponente entfernen

Sie können zu Navigation Compose migrieren, sobald Sie alle Ihre Fragmente und ersetzen Sie sie durch entsprechende zusammensetzbare Funktionen auf Bildschirmebene. Bildschirmebene Zusammensetzbare Funktionen können eine Mischung aus "Verfassen" und "Inhalt ansehen" enthalten, aber alle Navigationsziele müssen zusammensetzbar sein, damit „Navigation Compose“ aktiviert werden kann Migration. Bis dahin sollten Sie Komponente „Fragmentbasierte Navigation“ in der gemischten Komponente „Ansehen“ und „Schreiben“ Codebasis. Siehe Jetpack Navigation zu Navigation Compose migrieren für erhalten Sie weitere Informationen.

Weitere Informationen

In den folgenden zusätzlichen Ressourcen erfahren Sie mehr über die Migration Ihres eine bestehende ansichtsbasierte App auf „Compose“ verwenden:

• Codelab
  • Zu Jetpack Compose migrieren: Informationen zum Migrieren von Teilen von Sunflower die App „Compose“ in diesem Codelab nutzen.
• Blog posts
  • Sunflower zu Jetpack Compose migrieren: Weitere Informationen Sunflower wurde mit der auf dieser Seite beschriebenen Strategie zu Compose migriert.
  • Jetpack Compose Interop: Compose in einem RecyclerView verwenden: Hier erfahren Sie, wie Sie die Funktion „Schreiben“ effektiv in einem RecyclerView verwenden.

Nächste Schritte

Sie kennen nun die Strategie zur Migration Ihrer ansichtsbasierten App verwenden, finden Sie unter Interoperabilitäts-APIs weitere Informationen.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Die Funktion „Schreiben“ in Views verwenden
• Scrollen
• RecyclerView zur Lazy-Liste migrieren