Migrationsstrategie

Wenn Sie bereits eine datenbankbasierte App haben, möchten Sie die gesamte Benutzeroberfläche möglicherweise nicht auf einmal neu schreiben. 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. 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 eine schrittweise Migration, bei der die Funktionen "Compose" und "Views" gleichzeitig in Ihrem -Codebasis, bis sich Ihre Anwendung vollständig in Compose befindet.

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

So migrieren Sie Ihre App 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.

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 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 ein ComposeView im onCreateView() für Ihr Fragment. 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

Abbildung 3: Ein vorhandener Bildschirm mit gemischten Optionen für „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 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

Nachdem die Ansicht maximiert wurde, können Sie später auf die 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. 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 sein. Weitere Informationen zum Organisieren von Modulen in Ihrer App finden Sie im Leitfaden zur Modularisierung von Android-Apps.

Vorhandene Funktionen durch „Schreiben“ 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 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.

Hinweis: Mithilfe von UI-Tests können Sie sicherstellen, dass bei der Migration keine Rückschritte auftreten. 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

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.

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 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 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 wird auch als Bottom-Up-Ansatz bezeichnet.

Abbildung 4. Bottom-up-Ansatz zur Migration einer gemischten Ansicht und des Editors-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. 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.

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

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: Informationen zum Migrieren von Teilen von Sunflower die App „Compose“ in diesem Codelab nutzen.
• 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.