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 View-Interoperabilität 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 wir eine inkrementelle Migration, bei der Compose und Views in Ihrer Codebasis nebeneinander existieren, bis Ihre App vollständig auf Compose basiert.

Abbildung 1. Die Phasen der Migration einer ansichtsbasierten App zu „Schreiben“

So migrieren Sie Ihre Anwendung zu Compose:

1. Mit Compose neue Bildschirme erstellen
2. Identifizieren Sie wiederverwendbare Elemente und Bibliothek gängiger UI-Komponenten.
3. Vorhandene Funktionen werden nacheinander ersetzt.

Mit Compose neue Bildschirme 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.

Abbildung 2: Ein neuer Bildschirm in „Compose“

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

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

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. Die von Ihnen erstellten 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 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.

Hinweis :Verlassen Sie sich auf UI-Tests, um sicherzustellen, dass Sie während Migration. Weitere Informationen finden Sie unter Apps auf Android-Geräten testen und Layout von „Schreiben“ testen. um mehr über UI-Tests zu erfahren.

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 migrieren Sie sie entweder vollständig zu „Compose“ oder gehen Sie Schritt für Schritt vor. 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.

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. Bildschirmebene Zusammensetzbare Funktionen können eine Mischung aus „Erstellen“ und „Inhalt ansehen“ enthalten, aber alle Navigationsziele müssen zusammensetzbar sein, damit „Navigation Compose“ aktiviert werden kann Migration. 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.

Hinweis :Die Verwendung von „Navigation Compose“ in einer reinen Texteingabe-App ist keine Voraussetzung. Ich können Sie weiterhin die Komponente „Fragmentbasierte Navigation“ verwenden, Sie speichern Fragmente zum Hosten Ihrer zusammensetzbaren Inhalte.

Weitere Informationen

In den folgenden zusätzlichen Ressourcen erfahren Sie mehr über die Migration Ihres einer vorhandenen ansichtsbasierten App auf „Schreiben“:

• Codelab
  • Zu Jetpack Compose migrieren: In diesem Codelab erfahren Sie, wie Sie Teile der Sunflower App zu Compose migrieren.
• 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 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.