Mit Material Motion für Android schöne Übergänge erstellen

1. Einführung

Material Design ist ein System zum Erstellen ansprechender digitaler Produkte. Wenn Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereint werden, können Produktteams ihr größtes Designpotenzial entfalten.

Material Components (MDC) helfen Entwicklern bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten. Es ist für Android, iOS, das Web und Flutter verfügbar.material.io/develop

Was ist das Motion-System von Material für Android?

Das Material Motion-System für Android ist eine Reihe von Übergangsmustern in der MDC-Android-Bibliothek, die Nutzern helfen können, eine App zu verstehen und darin zu navigieren. Weitere Informationen finden Sie in den Material Design-Richtlinien.

Die vier wichtigsten Muster für Materialübergänge sind:

• Container-Übergang:Übergänge zwischen UI-Elementen, die einen Container enthalten. Es wird eine sichtbare Verbindung zwischen zwei unterschiedlichen UI-Elementen hergestellt, indem ein Element nahtlos in ein anderes übergeht.
• Gemeinsame Achse:Übergänge zwischen UI-Elementen, die räumlich oder navigatorisch zueinander in einer Beziehung stehen; verwendet gemeinsame Übergänge auf der X-, Y- oder Z-Achse, um den Zusammenhang der Elemente zu verstärken.
• Durchblenden:Übergänge zwischen UI-Elementen, zwischen denen keine starke Verbindung besteht. Dabei wird ein sequenzielles Aus- und Einblenden mit einer Skalierung des eingehenden Elements verwendet.
• Überblenden:Wird für UI-Elemente verwendet, die innerhalb der Bildschirmgrenzen ein- oder ausgeblendet werden.

Die MDC-Android-Bibliothek bietet Übergangsklassen für diese Muster, die sowohl auf der AndroidX Transition-Bibliothek (androidx.transition) als auch auf dem Android Transition Framework (android.transition) basieren:

AndroidX

• Im com.google.android.material.transition-Paket verfügbar
• Unterstützt API-Level 14 und höher
• Unterstützt Fragmente und Ansichten, aber keine Aktivitäten oder Fenster
• Enthält zurückportierte Fehlerkorrekturen und einheitliches Verhalten über API-Levels hinweg

Framework

• Im com.google.android.material.transition.platform-Paket verfügbar
• Unterstützt API-Level 21 und höher
• Unterstützt Fragmente, Ansichten, Aktivitäten und Fenster
• Fehlerkorrekturen, die nicht rückportiert wurden und sich je nach API-Level unterschiedlich verhalten können

In diesem Codelab verwenden Sie die Material-Übergänge, die auf der AndroidX-Bibliothek basieren. Sie konzentrieren sich also hauptsächlich auf Fragmente und Ansichten.

Umfang

In diesem Codelab erfahren Sie, wie Sie mit Kotlin einige Übergänge in eine Beispiel-E-Mail-App für Android namens Reply einbauen. So wird gezeigt, wie Sie Übergänge aus der MDC-Android-Bibliothek verwenden können, um das Erscheinungsbild Ihrer App anzupassen.

Der Startcode für die Reply-App wird bereitgestellt. Sie werden die folgenden Material-Übergänge in die App einbauen, die im GIF des fertigen Codelabs unten zu sehen sind:

• Container Transform: Übergang von der E‑Mail-Liste zur E‑Mail-Detailseite
• Container Transform-Übergang von FAB zur Seite zum Verfassen von E‑Mails
• Gemeinsame Z-Achse: Übergang vom Suchsymbol zur Seite mit der Suchansicht
• Fade Through-Übergang zwischen Postfachseiten
• Container Transform: Übergang vom E‑Mail-Adressen-Chip zur Kartenansicht

In diesem Codelab verwenden Sie Übergänge, die vom MDC-Android-Motion-System bereitgestellt werden. Weitere Informationen zum Theming und zu den Komponentensystemen von MDC-Android finden Sie im Leitfaden für den Einstieg.

Voraussetzungen

• Grundkenntnisse in der Android-Entwicklung und in Kotlin
• Android Studio (hier herunterladen, falls noch nicht vorhanden)
• Ein Android-Emulator oder -Gerät (über Android Studio verfügbar)
• Der Beispielcode (siehe nächsten Schritt)

Wie würden Sie Ihre Erfahrung bei der Entwicklung von Android-Apps bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Entwicklungsumgebung einrichten

Android Studio starten

Wenn Sie Android Studio öffnen, sollte ein Fenster mit dem Titel „Welcome to Android Studio“ (Willkommen bei Android Studio) angezeigt werden. Wenn Sie Android Studio jedoch zum ersten Mal starten, führen Sie die Schritte des Android Studio-Einrichtungsassistenten mit den Standardwerten aus. Das Herunterladen und Installieren der erforderlichen Dateien kann einige Minuten dauern. Sie können diesen Schritt also im Hintergrund ausführen, während Sie mit dem nächsten Abschnitt fortfahren.

Option 1: Codelab-Starter-App aus GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab von GitHub zu klonen:

git clone https://github.com/material-components/material-components-android-motion-codelab.git
cd material-components-android-motion-codelab

Weitere Informationen: Repository von GitHub klonen

Option 2:ZIP-Datei der Starter-Codelab-App herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-motion-codelab-develop.

Startcode in Android Studio laden

1. Wenn der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio angezeigt wird, klicken Sie auf Open an existing Android Studio project.

2. Wechseln Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie das Beispielverzeichnis aus, um das Projekt zu öffnen.
3. Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Die Aktivitätsanzeigen unten im Android Studio-Fenster geben Aufschluss über den Fortschritt.

Wenn Sie in Android Studio aufgefordert werden, die Android-Gradle-Plug-in-Version des Projekts zu aktualisieren, sollten Sie die Aufforderung ignorieren, da das Projekt möglicherweise nicht mit den neuesten Gradle-Versionen getestet wurde und durch das Aktualisieren Abstürze oder andere Kompilierungsprobleme auftreten können.

4. An dieser Stelle werden in Android Studio möglicherweise einige Build-Fehler angezeigt, weil das Android SDK oder Build-Tools wie das unten gezeigte fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren/aktualisieren und Ihr Projekt zu synchronisieren. Wenn weiterhin Probleme auftreten, folgen Sie der Anleitung zum Aktualisieren Ihrer Tools mit dem SDK Manager.

Projektabhängigkeiten prüfen

Das Projekt benötigt eine Abhängigkeit von der MDC-Android-Bibliothek. Die heruntergeladenen Beispielcodes sollten diese Abhängigkeit bereits enthalten. Sehen wir uns die Konfiguration aber noch einmal an, um sicherzugehen.

Rufen Sie die Datei build.gradle des Moduls app auf und prüfen Sie, ob der Block dependencies eine Abhängigkeit von MDC-Android enthält:

implementation 'com.google.android.material:material:1.2.0'

Start-App ausführen

1. Prüfen Sie, ob die Build-Konfiguration links neben der Geräteauswahl app ist.
2. Klicken Sie auf die grüne Schaltfläche Run / Play (Ausführen / Spielen), um die App zu erstellen und auszuführen.

3. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) bereits ein Android-Gerät in der Liste der verfügbaren Geräte aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Create New Virtual Device (Neues virtuelles Gerät erstellen).
4. Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone aus, z. B. Pixel 3, und klicken Sie dann auf Weiter.
5. Wählen Sie auf dem Bildschirm System Image (System-Image) eine aktuelle Android-Version aus, vorzugsweise das höchste API-Level. Wenn sie nicht installiert ist, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab.
6. Klicken Sie auf Weiter.
7. Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Fertigstellen.
8. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus.
9. Klicken Sie auf OK.
10. Android Studio erstellt die App, stellt sie bereit und öffnet sie automatisch auf dem Zielgerät.

Wenn beim Erstellen der App der Fehler INSTALL_FAILED_INVALID_APK auftritt, versuchen Sie, in Android Studio Build -> Clean Project (Projekt bereinigen) auszuführen.

Wenn Sie die Abhängigkeit nicht hinzufügen oder die App nicht erfolgreich ausführen konnten, beenden Sie den Vorgang und beheben Sie die Probleme in Ihrer Entwicklungsumgebung. Weitere Informationen zum Erstellen und Ausführen einer App finden Sie im Android Studio-Leitfaden.

Fertig! Der Startercode für die Startseite von Reply sollte in Ihrem Emulator ausgeführt werden. Sie sollten den Posteingang mit einer Liste von E‑Mails sehen.

Optional: Geräteanimationen verlangsamen

Da in diesem Codelab schnelle, aber ausgefeilte Übergänge verwendet werden, kann es hilfreich sein, die Animationen des Geräts zu verlangsamen, um einige der feineren Details der Übergänge während der Implementierung zu beobachten. Dies kann entweder mit adb-Shell-Befehlen oder einer Schnelleinstellungskachel erfolgen. Hinweis: Diese Methoden zum Verlangsamen von Geräteanimationen wirken sich auch auf Animationen auf dem Gerät außerhalb der Reply App aus.

Methode 1: ADB-Shell-Befehle

Wenn Sie die Animationen des Geräts um den Faktor 10 verlangsamen möchten, können Sie die folgenden Befehle über die Befehlszeile ausführen:

adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10

Führen Sie die folgenden Befehle aus, um die Animationsgeschwindigkeit des Geräts auf den Normalzustand zurückzusetzen:

adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1

Methode 2: Schnelleinstellungen-Kachel

Alternativ können Sie die Kachel für die Schnelleinstellungen einrichten, indem Sie zuerst die Entwicklereinstellungen auf Ihrem Gerät aktivieren, falls Sie das noch nicht getan haben:

1. Öffnen Sie auf dem Gerät die Einstellungen.
2. Scrollen Sie nach unten und klicken Sie auf „Über emuliertes Gerät“.
3. Scrollen Sie nach unten und klicken Sie schnell auf „Build-Nummer“, bis die Entwicklereinstellungen aktiviert sind.

Führen Sie als Nächstes in den Geräteeinstellungen die folgenden Schritte aus, um die Kachel für die Schnelleinstellungen zu aktivieren:

1. Klicken Sie oben auf dem Bildschirm auf das Suchsymbol oder die Suchleiste.
2. Geben Sie „Kacheln“ in das Suchfeld ein.
3. Klicken Sie auf die Zeile „Kacheln für Schnelleinstellungen für Entwickler“.
4. Klicken Sie auf den Schalter „Fensteranimationsfaktor“.

Ziehen Sie während des Codelabs die Systembenachrichtigungsleiste vom oberen Displayrand nach unten und verwenden Sie das Symbol , um zwischen langsamen und normalen Animationen zu wechseln.

Die obige Anleitung zum Einrichten der Kachel für die Schnelleinstellungen kann je nach Gerät und API-Level leicht abweichen oder nicht verfügbar sein.

3. Mit dem Beispiel-App-Code vertraut machen

Sehen wir uns den Code an. Wir haben eine App bereitgestellt, die die Bibliothek Jetpack Navigation component verwendet, um innerhalb einer einzelnen Aktivität, MainActivity, zwischen verschiedenen Fragmenten zu wechseln:

• HomeFragment:Hier wird eine Liste mit E‑Mails angezeigt.
• EmailFragment:Zeigt eine einzelne vollständige E‑Mail an.
• ComposeFragment:Ermöglicht das Verfassen einer neuen E‑Mail.
• SearchFragment:Zeigt eine Suchansicht an.

Weitere Informationen zu den in diesem Codelab verwendeten Konzepten finden Sie in den folgenden Anleitungen und Übungen:

• Erste Schritte mit Material Components für Android
• Advanced Android 01.1: Fragments
• Grundlagen von Android und Kotlin 03.2: Navigationspfade definieren
• Grundlagen von Android und Kotlin 02.4: Grundlagen der Datenbindung

navigation_graph.xml

Öffnen Sie zuerst navigation_graph.xml im Verzeichnis app -> src -> main -> res -> navigation, um zu sehen, wie der Navigationsgraph der App eingerichtet ist:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/navigation_graph"
   app:startDestination="@id/homeFragment">

   <fragment
       android:id="@+id/homeFragment"
       android:name="com.materialstudies.reply.ui.home.HomeFragment"
       android:label="HomeFragment">
       <argument...>
       <action
           android:id="@+id/action_homeFragment_to_emailFragment"
           app:destination="@id/emailFragment" />
   </fragment>
   <fragment
       android:id="@+id/emailFragment"
       android:name="com.materialstudies.reply.ui.email.EmailFragment"
       android:label="EmailFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/composeFragment"
       android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
       android:label="ComposeFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/searchFragment"
       android:name="com.materialstudies.reply.ui.search.SearchFragment"
       android:label="SearchFragment" />
   <action
       android:id="@+id/action_global_homeFragment"
       app:destination="@+id/homeFragment"
       app:launchSingleTop="true"
       app:popUpTo="@+id/navigation_graph"
       app:popUpToInclusive="true"/>
   <action
       android:id="@+id/action_global_composeFragment"
       app:destination="@+id/composeFragment" />
   <action
       android:id="@+id/action_global_searchFragment"
       app:destination="@+id/searchFragment" />
</navigation>

Beachten Sie, dass alle oben genannten Fragmente vorhanden sind und das Standard-Startfragment über app:startDestination="@id/homeFragment" auf HomeFragment festgelegt ist. Diese XML-Definition des Fragmentzielgraphen sowie die Aktionen sind die Grundlage für den generierten Kotlin-Navigationscode, der beim Einrichten von Übergängen verwendet wird.

activity_main.xml

Sehen Sie sich als Nächstes das activity_main.xml-Layout im Verzeichnis app -> src -> main -> res -> layout an. Sie sehen NavHostFragment, das mit dem Navigationsdiagramm oben konfiguriert ist:

<fragment
   android:id="@+id/nav_host_fragment"
   android:name="androidx.navigation.fragment.NavHostFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:defaultNavHost="true"
   app:navGraph="@navigation/navigation_graph"/>

Diese NavHostFragment füllt den Bildschirm aus und verarbeitet alle Navigationsänderungen im Vollbildmodus in der App. Die BottomAppBar und ihr verankertes FloatingActionButton, ebenfalls in activity_main.xml, werden über dem aktuellen Fragment platziert, das von der NavHostFragment angezeigt wird. Sie werden daher je nach Fragmentziel durch den bereitgestellten Beispiel-App-Code ein- oder ausgeblendet.

Außerdem ist BottomNavDrawerFragment in activity_main.xml eine Schublade unten, die ein Menü für die Navigation zwischen den verschiedenen E-Mail-Postfächern enthält. Sie wird bedingt über die Schaltfläche BottomAppBar „Antworten“ angezeigt.

MainActivity.kt

Ein Beispiel für die Verwendung einer Navigationsaktion finden Sie in der Datei MainActivity.kt im Verzeichnis app -> src -> main -> java -> com.materialstudies.reply.ui. Suchen Sie die Funktion navigateToSearch(), die so aussehen sollte:

private fun navigateToSearch() {
   val directions = SearchFragmentDirections.actionGlobalSearchFragment()
   findNavController(R.id.nav_host_fragment).navigate(directions)
}

Hier sehen Sie, wie Sie ohne benutzerdefinierten Übergang zur Seite mit der Suchansicht navigieren können. In diesem Codelab sehen Sie sich die MainActivity und vier Hauptfragmente von Reply an, um Material-Übergänge einzurichten, die mit den verschiedenen Navigationsaktionen in der App zusammenarbeiten.

Nachdem Sie sich mit dem Startcode vertraut gemacht haben, implementieren wir unsere erste Übergangsanimation.

4. Container-Übergangsmuster von der E‑Mail-Liste zur E‑Mail-Detailseite hinzufügen

Zuerst fügen Sie eine Übergangsanimation hinzu, die ausgelöst wird, wenn Sie auf eine E‑Mail klicken. Für diese Navigationsänderung eignet sich das Container-Übergangsmuster gut, da es für Übergänge zwischen UI-Elementen konzipiert wurde, die einen Container enthalten. Dieses Muster erzeugt eine sichtbare Verbindung zwischen zwei UI-Elementen.

Bevor Sie Code hinzufügen, sollten Sie die Reply App ausführen und auf eine E‑Mail klicken. Es sollte ein einfacher Jump-Cut erfolgen, d. h. der Bildschirm wird ohne Übergang ersetzt:

Eine Container-Transformation in der MDC-Android-Bibliothek wird als MaterialContainerTransform bezeichnet. Standardmäßig funktioniert diese Transition-Unterklasse als Übergang für gemeinsame Elemente. Das bedeutet, dass das Android-Übergangssystem zwei Ansichten in verschiedenen Layouts erkennen kann, wenn sie mit einem transitionName gekennzeichnet sind.

Fügen Sie zuerst ein transitionName-Attribut für das MaterialCardView-Element in email_item_layout.xml hinzu, wie im folgenden Snippet gezeigt:

email_item_layout.xml

android:transitionName="@{@string/email_card_transition_name(email.id)}"

Der Übergangsname verwendet eine String-Ressource mit einem Parameter. Sie müssen die ID jeder E-Mail verwenden, damit jede transitionName in unserem EmailFragment eindeutig ist.

Das Mindest-SDK-Level für Reply ist 24. Das bedeutet, dass wir das in API-Level 21 eingeführte Attribut android:transitionName direkt verwenden können. Wenn Ihre App API-Level unter 21 unterstützt, verwenden Sie die ViewCompat#setTransitionName-Methode, wenn Sie den Übergangsnamen der Ansicht festlegen.

Nachdem Sie den Übergangsnamen für das E‑Mail-Listenelement festgelegt haben, tun wir dasselbe für das E‑Mail-Detail-Layout. Legen Sie in fragment_email.xml die transitionName von MaterialCardView auf die folgende String-Ressource fest:

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

Wenn Sie die Übergangsnamen für die Startansicht (MaterialCardView in email_item_layout.xml) und die Endansicht (MaterialCardView in fragment_email.xml) festlegen, werden dem Android-Übergangssystem die beiden Ansichten mit gemeinsam genutzten Elementen mitgeteilt, die an diesem Übergang beteiligt sind.

Ersetzen Sie in HomeFragment.kt den Code in onEmailClicked durch den folgenden Snippet, um die Zuordnung von der Startansicht (E‑Mail-Listenelement) zur Endansicht (E‑Mail-Detailansicht) zu erstellen:

HomeFragment.kt

val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)

Der wichtigste Teil des oben genannten Snippets ist FragmentNavigatorExtras. Das Android Transition-System ruft den im ersten Parameter (cardView) festgelegten Übergangsnamen ab und erstellt eine Zuordnung zwischen diesem Übergangsnamen und dem als zweiter Parameter (emailCardDetailTransitionName) übergebenen Übergangsnamenstring. So weiß das System, welche Ansichten als „Start“- und „Ende“-Ansichten für die Transformation in der MaterialContainerTransform-Instanz verwendet werden sollen.

Nachdem Sie die Infrastruktur konfiguriert haben, können Sie eine Container-Transformation erstellen. Legen Sie in der Methode EmailFragment onCreate sharedElementEnterTransition auf eine neue Instanz von MaterialContainerTransform fest, indem Sie das folgende Snippet hinzufügen (dabei wird die Version com.google.android.material.transition anstelle der Version com.google.android.material.transition.platform importiert):

EmailFragment.kt

sharedElementEnterTransition = MaterialContainerTransform().apply {
   drawingViewId = R.id.nav_host_fragment
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}

Hier sind einige Punkte zu beachten:

• Der Einfachheit halber wird nur sharedElementEnterTransition festgelegt, nicht sharedElementReturnTransition. Standardmäßig kehrt das Android Transition-System die Enter-Transition beim Zurücknavigieren automatisch um, wenn keine Return-Transition festgelegt ist.
• Mit drawingViewId wird festgelegt, wo in der Ansichtshierarchie der animierende Container platziert wird. So können Sie den Übergang unter oder über anderen Elementen in Ihrer Benutzeroberfläche anzeigen. Im Fall von „Reply“ wird die Container-Transformation auf derselben Ebene wie der Fragment-Container ausgeführt, damit sie unter der unteren App-Leiste und dem Floating Action Button gezeichnet wird.
• scrimColor ist eine Eigenschaft von MaterialContainerTransform, mit der die Farbe eines durchscheinenden Schattens gesteuert wird, der hinter dem animierten Container gezeichnet wird. Standardmäßig ist dies auf 32% Schwarz eingestellt. Hier ist sie auf „transparent“ gesetzt, sodass kein Scrim gezeichnet wird. Das liegt daran, dass Sie in einem späteren Schritt der Liste der E-Mails einen Übergang zum Beenden hinzufügen, der gut zum Container-Transform passt.
• Schließlich legen wir die Containerfarben von MaterialContainerTransform auf colorSurface fest. Wenn MaterialContainerTransform zwischen zwei Ansichten animiert wird, werden drei „Container“ auf das Canvas gezeichnet: 1) ein Hintergrundcontainer, 2) ein Container für die Startansicht und 3) ein Container für die Endansicht. Alle drei Container können mit einer Füllfarbe versehen werden und sind standardmäßig transparent. Das Festlegen dieser Hintergrundfüllfarben kann nützlich sein, wenn in der Start- oder Endansicht selbst kein Hintergrund gezeichnet wird, sodass während der Animation andere Elemente darunter zu sehen sind. Da alle Container in diesem Beispiel auf colorSurface festgelegt werden sollten, können wir die Hilfsmethode setAllContainerColors verwenden, um visuelle Probleme zu vermeiden.

Versuchen Sie nun, die App noch einmal auszuführen.

Es sieht schon richtig gut aus! Wenn Sie in der E‑Mail-Liste auf eine E‑Mail klicken, sollte das Listenelement durch eine Container-Transformation in eine Vollbild-Detailseite umgewandelt werden. Wenn Sie jedoch auf „Zurück“ tippen, wird die E‑Mail nicht wieder in der Liste minimiert. Außerdem verschwindet die E‑Mail-Liste sofort zu Beginn des Übergangs und der graue Fensterhintergrund wird angezeigt. Wir sind also noch nicht fertig.

Das erste Problem, dass das Minimieren nicht funktioniert, tritt in der Regel auf, weil die Liste der E-Mails noch nicht in RecyclerView eingefügt wurde, wenn das Android Transition-System versucht, die Rückwärts-Transition auszuführen. Wir brauchen eine Möglichkeit, zu warten, bis unsere HomeFragment unsere Liste erstellt hat, bevor wir mit den Übergängen beginnen.

Das Android-Übergangssystem bietet genau dafür Methoden: postponeEnterTransition und startPostponedEnterTransition. Wenn postponeEnterTransition aufgerufen wird, werden alle Einblendungsübergänge, die ausgeführt werden sollen, bis zu einem schließenden Aufruf von startPostponedEnterTransition zurückgehalten. So können wir unsere Übergänge bis nach dem Befüllen von RecyclerView mit E-Mails planen und der Übergang kann die von Ihnen konfigurierten Zuordnungen finden.

Um den Übergang bei der Rückgabe zu korrigieren, fügen Sie der onViewCreated-Methode in HomeFragment.kt die folgenden zwei Zeilen hinzu:

HomeFragment.kt

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }

Versuchen Sie, die App noch einmal auszuführen. Wenn Sie nach dem Öffnen einer E‑Mail auf „Zurück“ tippen, wird die E‑Mail wieder in der Liste minimiert. Sehr gut! Lass uns die Animation noch weiter verbessern.

Das Problem, dass die E‑Mail-Liste verschwindet, liegt daran, dass beim Navigieren zu einem neuen Fragment mit der Navigationskomponente das aktuelle Fragment sofort entfernt und durch das neue, eingehende Fragment ersetzt wird. Damit die E‑Mail-Liste auch nach dem Ersetzen sichtbar bleibt, können Sie HomeFragment eine Übergangsanimation hinzufügen.

MDC-Android bietet dafür zwei Übergänge: Hold und MaterialElevationScale. Beim Übergang Hold bleibt das Ziel an seiner aktuellen Position, während bei MaterialElevationScale eine dezente Skalierungsanimation ausgeführt wird.

Fügen Sie das folgende Snippet der Methode HomeFragment onEmailClicked hinzu, damit die Liste der E‑Mail-Adressen beim Verlassen und erneuten Aufrufen der Seite dezent ein- und ausgeblendet wird:

HomeFragment.kt

exitTransition = MaterialElevationScale(false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Ein Fragment wird neu eingegeben, wenn es wieder sichtbar wird, nachdem das aktuelle Fragment aus dem Backstack entfernt wurde. Bei HomeFragment passiert das, wenn Sie von EmailFragment aus auf „Zurück“ drücken. Hier wird unsere Liste von E‑Mails beim Zurückkehren zur Liste dezent skaliert.

Damit die MaterialElevationScale-Übergänge auf den gesamten Startbildschirm angewendet werden und nicht auf die einzelnen Ansichten in der Hierarchie, markieren Sie als Nächstes die RecyclerView in fragment_home.xml als Übergangsgruppe.

fragment_home.xml

android:transitionGroup="true"

Das Mindest-SDK-Level für Reply ist 24. Das bedeutet, dass wir das in API-Level 21 eingeführte Attribut android:transitionGroup direkt verwenden können. Wenn Ihre App API-Level 21 oder niedriger unterstützt, verwenden Sie die Methode ViewGroupCompat#setTransitionGroup, um die Übergangsgruppe der Ansicht festzulegen.

An diesem Punkt sollten Sie eine voll funktionsfähige Container-Transformation haben. Wenn Sie auf eine E‑Mail klicken, wird das Listenelement zu einem Detailbildschirm maximiert und die Liste der E‑Mails wird zurückgezogen. Wenn Sie auf „Zurück“ tippen, wird der Bildschirm mit den E‑Mail-Details wieder in ein Listenelement minimiert und gleichzeitig in der Liste der E‑Mails vergrößert.

5. Container-Transform-Übergang von FAB zur Seite zum Verfassen von E‑Mails hinzufügen

Fahren wir mit der Container-Transformation fort und fügen wir einen Übergang von der Floating Action Button zu ComposeFragment hinzu. Dabei wird die FAB zu einer neuen E-Mail erweitert, die vom Nutzer verfasst werden soll. Führen Sie die App zuerst noch einmal aus und klicken Sie auf den schwebenden Aktionsbutton, um zu sehen, dass beim Starten des Bildschirms zum Verfassen von E-Mails kein Übergang erfolgt.

Klicken Sie dazu nach dem Starten der App auf das Aktionsschaltfläche, während Sie die E‑Mail-Liste im Blick haben. Wenn Sie während des aktuellen App-Laufs bereits eine E‑Mail geöffnet haben, sehen Sie möglicherweise einen teilweisen Übergangseffekt, der auf einem veralteten Übergang beim Beenden oder erneuten Aufrufen beruht. Das ist besonders wahrscheinlich, wenn Sie die App mit der Hot-Reload-Funktion von Android Studio ausgeführt haben. Das Problem sollte behoben sein, wenn Sie alle Abläufe in diesem Codelab durchlaufen haben.

Wir verwenden zwar dieselbe Übergangsklasse, die Konfiguration dieser Instanz ist jedoch anders, da sich unser FAB in MainActivity und unser ComposeFragment im Navigations-Host-Container MainActivity befindet.

Füge in ComposeFragment.kt das folgende Snippet zur Methode onViewCreated hinzu und achte darauf, dass die androidx.transition-Version von Slide importiert wird.

ComposeFragment.kt

enterTransition = MaterialContainerTransform().apply {
   startView = requireActivity().findViewById(R.id.fab)
   endView = emailCardView
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   containerColor = requireContext().themeColor(R.attr.colorSurface)
   startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
   endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
   addTarget(R.id.email_card_view)
}

Zusätzlich zu den Parametern, die zum Konfigurieren der vorherigen Container-Transformation verwendet wurden, werden startView und endView hier manuell festgelegt. Anstatt transitionName-Attribute zu verwenden, um dem Android-Übergangssystem mitzuteilen, welche Ansichten transformiert werden sollen, können Sie diese bei Bedarf manuell angeben.

Führen Sie die App noch einmal aus. Der FAB sollte sich nun in den Compose-Bildschirm verwandeln (siehe GIF am Ende dieses Schritts).

Ähnlich wie im vorherigen Schritt müssen Sie HomeFragment eine Übergangsanimation hinzufügen, damit es nicht verschwindet, nachdem es entfernt und durch ComposeFragment ersetzt wurde.

Kopieren Sie das folgende Snippet in die Methode navigateToCompose in MainActivity vor dem Aufruf NavController navigate.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialElevationScale(false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialElevationScale(true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Die Dauer unseres MaterialElevationScale entspricht der Dauer von MaterialContainerTransform. So wird sichergestellt, dass das HomeFragment für die gleiche Zeit angezeigt wird, die für die Ausführung der Container-Transformation benötigt wird. Es verschwindet, sobald die Container-Transformation abgeschlossen ist.

Das war's für diesen Schritt. Der Übergang vom FAB zum Compose-Bildschirm sollte so aussehen:

6. Übergang mit gemeinsamer Z-Achse vom Suchsymbol zur Suchansichtsseite hinzufügen

In diesem Schritt fügen wir einen Übergang vom Suchsymbol zur Vollbild-Suchansicht hinzu. Da bei dieser Navigationsänderung kein persistenter Container beteiligt ist, können wir einen Übergang mit gemeinsamer Z-Achse verwenden, um die räumliche Beziehung zwischen den beiden Bildschirmen zu verdeutlichen und anzuzeigen, dass in der Hierarchie der App eine Ebene nach oben verschoben wird.

Bevor Sie zusätzlichen Code hinzufügen, sollten Sie die App ausführen und unten rechts auf dem Bildschirm auf das Suchsymbol tippen. Dadurch sollte der Bildschirm für die Suche ohne Übergang angezeigt werden.

Suchen Sie zuerst die Methode navigateToSearch in MainActivity und fügen Sie das folgende Code-Snippet vor dem Methodenaufruf NavController navigate ein, um die Z-Achsen-Übergänge MaterialSharedAxis für das aktuelle Fragment festzulegen.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Fügen Sie als Nächstes das folgende Code-Snippet der Methode onCreate in SearchFragment hinzu, um die MaterialSharedAxis-Übergänge für das Ein- und Ausblenden zu konfigurieren.

SearchFragment.kt

enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Es ist wichtig zu beachten, wie sich diese beiden Fragmente in Bezug auf den booleschen Konstruktorparameter MaterialSharedAxis forward bewegen. Wenn das aktuelle Fragment MainActivity beendet wird, wird SearchFragment aufgerufen. Deshalb ist im aktuellen Fragment MainActivity der Exit-Übergang vorwärts und im Fragment SearchFragment der Enter-Übergang ebenfalls vorwärts. So wird dafür gesorgt, dass sich beide Fragmente in dieselbe Richtung bewegen, wenn diese Übergangspaare ausgeführt werden.

In der Rückwärtsrichtung ist es genau umgekehrt. Wenn SearchFragment beendet wird, wird das aktuelle Fragment MainActivity gestartet. Aus diesem Grund ist SearchFragment so konfiguriert, dass es in der Rückwärtsrichtung zurückgegeben wird, und das aktuelle Fragment MainActivity ist so konfiguriert, dass es in der Rückwärtsrichtung wieder eingegeben wird.

Damit die MaterialSharedAxis-Übergangsanimation auf den gesamten Suchbildschirm angewendet wird und nicht auf die einzelnen Ansichten in der Hierarchie, markieren Sie LinearLayout in fragment_search.xml als Übergangsgruppe.

fragment_search.xml

android:transitionGroup="true"

Das Mindest-SDK-Level für Reply ist 24. Das bedeutet, dass wir das in API-Level 21 eingeführte Attribut android:transitionGroup direkt verwenden können. Wenn Ihre App API-Level 21 oder niedriger unterstützt, verwenden Sie die Methode ViewGroupCompat#setTransitionGroup, um die Übergangsgruppe der Ansicht festzulegen.

Geschafft! Versuchen Sie nun, die App noch einmal auszuführen und auf das Suchsymbol zu tippen. Die Startseite und die Suchansicht sollten gleichzeitig ein- und ausgeblendet und entlang der Z-Achse skaliert werden, um einen nahtlosen Übergang zwischen den beiden Bildschirmen zu schaffen.

7. „Fade Through“-Übergang zwischen Postfachseiten hinzufügen

In diesem Schritt fügen wir einen Übergang zwischen verschiedenen Postfächern hinzu. Da wir keine räumliche oder hierarchische Beziehung hervorheben möchten, verwenden wir eine Überblendung, um einen einfachen „Tausch“ zwischen Listen von E-Mails durchzuführen.

Bevor Sie zusätzlichen Code hinzufügen, führen Sie die App aus, tippen Sie in der unteren App-Leiste auf das Antwortlogo und wechseln Sie das Postfach. Die Liste der E-Mail-Adressen sollte ohne Übergang geändert werden.

Suchen Sie zuerst die Methode navigateToHome in MainActivity und fügen Sie das folgende Code-Snippet vor dem NavController-Methodenaufruf navigate ein, um den Übergang MaterialFadeThrough für das aktuelle Fragment festzulegen.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialFadeThrough().apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Öffnen Sie als Nächstes HomeFragment. Legen Sie in onCreate den enterTransition des Fragments auf eine neue Instanz von MaterialFadeThrough fest.

HomeFragment.kt

enterTransition = MaterialFadeThrough().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Die oben beschriebene Einrichtung unterscheidet sich aufgrund der Funktionsweise von Postfächern geringfügig von den vorherigen Schritten. Ein Postfach ist einfach ein HomeFragment plus ein Argument, das dem Fragment mitteilt, welche Liste von E‑Mails angezeigt werden soll. Das bedeutet zusammen mit der Tatsache, dass HomeFragment in unserem Navigationsdiagramm auf singleTop=true festgelegt ist, dass Sie immer vorwärts zu neuen Postfächern navigieren und sich nicht mit Rückgabe- oder erneuten Übergängen (Übergängen, die ausgeführt werden, wenn ein Fragment entfernt wird) befassen müssen. Daher müssen Sie sich nur um die HomeFragment-Ein- und Ausblendungen kümmern.

Dies ist ein Beispiel für ein Architekturszenario, das sich auf die Konfiguration von Übergängen auswirkt. Ähnliche Überlegungen müssen Sie auch anstellen, wenn Sie Übergänge in Ihre eigenen Apps einfügen.

Führen Sie die App noch einmal aus. Wenn Sie die untere Navigationsleiste öffnen und das Postfach wechseln, sollte die aktuelle Liste der E‑Mails ausgeblendet und verkleinert werden, während die neue Liste eingeblendet und vergrößert wird. Sehr gut!

8. Container-Transform-Übergang vom E‑Mail-Adressenchip zur Kartenansicht hinzufügen

In diesem Schritt fügen Sie einen Übergang hinzu, der einen Chip in eine Pop-up-Karte umwandelt. Hier wird eine Container-Transformation verwendet, um den Nutzer darüber zu informieren, dass sich die im Pop-up ausgeführte Aktion auf den Chip auswirkt, von dem das Pop-up stammt.

Bevor Sie Code hinzufügen, führen Sie die Reply App aus, klicken Sie auf eine E‑Mail, klicken Sie auf den FAB „Antworten“ und dann auf den Kontakt-Chip eines Empfängers. Der Chip sollte sofort verschwinden und eine Karte mit E-Mail-Adressen für diesen Kontakt sollte ohne Animationen eingeblendet werden.

In diesem Schritt arbeiten Sie in ComposeFragment. Im ComposeFragment-Layout sind bereits Empfänger-Chips (standardmäßig sichtbar) und eine Empfängerkarte (standardmäßig unsichtbar) enthalten. Ein Empfänger-Chip und diese Karte sind die beiden Ansichten, zwischen denen Sie eine Container-Transformation erstellen.

Öffnen Sie zuerst ComposeFragment und suchen Sie nach der Methode expandChip. Diese Methode wird aufgerufen, wenn auf das bereitgestellte chip geklickt wird. Fügen Sie das folgende Code-Snippet über den Zeilen ein, in denen die Sichtbarkeit von recipientCardView und chip getauscht wird. Dadurch wird die Container-Transformation ausgelöst, die über beginDelayedTransition registriert wurde.

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = chip
   endView = binding.recipientCardView
   scrimColor = Color.TRANSPARENT
   endElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(binding.recipientCardView)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

Ein wichtiger Teil der Konfigurationen der oben genannten Transformation ist der Aufruf von addTarget. Standardmäßig wird die angegebene Übergangsanimation von TransitionManager für alle Ansichten ausgeführt, die sich ändern. Wenn Sie ein Ziel festlegen, wird die Container-Transformation nur für die angegebene Zielansicht ausgeführt.

Wenn Sie die App jetzt ausführen, sollte der Chip in eine Karte mit E-Mail-Adressen für den Empfänger umgewandelt werden. Als Nächstes konfigurieren wir den Rückgabeübergang, um die Karte wieder in den Chip zu reduzieren.

Fügen Sie in der Methode collapseChip in ComposeFragment das folgende Code-Snippet hinzu, um die Karte wieder in den Chip zu minimieren.

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = binding.recipientCardView
   endView = chip
   scrimColor = Color.TRANSPARENT
   startElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(chip)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

Führen Sie die App noch einmal aus. Wenn Sie auf den Chip klicken, sollte er zu einer Karte maximiert werden. Wenn Sie auf die Karte klicken, sollte sie wieder zu einem Chip minimiert werden. Sehr gut!

9. Fertig

Mit weniger als 100 Zeilen Kotlin-Code und etwas grundlegendem XML-Markup haben Sie mit der MDC-Android-Bibliothek ansprechende Übergänge in einer vorhandenen App erstellt, die den Material Design-Richtlinien entspricht und auf allen Android-Geräten einheitlich aussieht und sich einheitlich verhält.

Die fertige App für das Bewegungssystem für Antwortmaterial ist verfügbar, indem Sie das fertige Codelab herunterladen oder den complete-Branch mit Git auschecken: git checkout complete.

Alle Codeänderungen aus diesem Codelab finden Sie in diesem Diff-Vergleich für den complete-Branch.

Weiteres Vorgehen

Weitere Informationen zum Material-Motion-System finden Sie in der Spezifikation und der vollständigen Entwicklerdokumentation. Probieren Sie aus, Ihrer App einige Material-Übergänge hinzuzufügen.

Vielen Dank, dass Sie Material Motion ausprobiert haben. Wir hoffen, dieses Codelab hat Ihnen gefallen.

Ich konnte dieses Codelab in angemessener Zeit und mit angemessenem Aufwand durcharbeiten.

Stimme vollkommen zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte das Material Motion-System auch in Zukunft verwenden.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu