1. Einführung
Material Design ist ein System zum Erstellen ausdrucksstarker und ansprechender digitaler Produkte. Indem sie Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereinen, können Produktteams ihr größtes Designpotenzial ausschöpfen.
Material Components (MDC) unterstützen Entwickler bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt. Es enthält Dutzende schöne und funktionale UI-Komponenten und ist für Android, iOS, das Web und Flutter.material.io/develop verfügbar. |
Was ist das Bewegungssystem von Material für Android?
Das Material-Bewegungssystem für Android besteht aus einer Reihe von Übergangsmustern innerhalb der MDC-Android-Bibliothek, die Nutzern helfen können, eine App zu verstehen und zu navigieren. Dies wird in den Material Design-Richtlinien beschrieben.
Die vier wichtigsten Materialübergangsmuster sind folgende:
- Container Transform: Übergänge zwischen UI-Elementen, die einen Container enthalten. schafft eine sichtbare Verbindung zwischen zwei verschiedenen UI-Elementen, indem ein Element nahtlos in ein anderes übergeht.
- Gemeinsam genutzte Achse:Übergänge zwischen UI-Elementen, die eine räumliche oder Navigationsbeziehung haben. verwendet eine gemeinsame Transformation auf der x-, y- oder z-Achse, um die Beziehung zwischen Elementen zu verstärken.
- Überblenden:Übergänge zwischen UI-Elementen, die keine starke Beziehung zueinander haben; ein sequentielles Aus- und Einblenden mit einer Skalierung des eingehenden Elements.
- Ausblenden: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 auf der AndroidX Transition Library (androidx.transition) und dem Android Transition Framework (android.transition) aufbaut:
AndroidX
- Verfügbar im
com.google.android.material.transition-Paket - Unterstützt API-Level 14 oder höher
- Unterstützt Fragmente und Ansichten, aber keine Aktivitäten oder Windows
- Enthält zurückportierte Fehlerkorrekturen und konsistentes Verhalten auf allen API-Levels
Framework
- Verfügbar im
com.google.android.material.transition.platform-Paket - Unterstützt API-Level 21 oder höher
- Unterstützt Fragmente, Ansichten, Aktivitäten und Windows
- Fehlerkorrekturen, die nicht zurückportiert wurden und sich auf API-Ebenen unterscheiden 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.
Inhalt
In diesem Codelab erfahren Sie, wie Sie mithilfe von Kotlin einige Übergänge in eine Android-E-Mail-App namens Reply erstellen und zeigen, wie Sie mit Übergängen aus der MDC-Android-Bibliothek das Design Ihrer App anpassen können.
Der Startcode für die Antwort-App wird zur Verfügung gestellt und du integrierst die folgenden Materialübergänge in die App, die im fertigen Codelab im GIF unten zu sehen sind:
- Umstellung von Container Transform von der E-Mail-Liste auf die Seite mit E-Mail-Details
- Umstellung von Container Transform von der UAS-Seite zur Seite zum Schreiben von E-Mails
- Übergang von gemeinsam genutzter Z-Achse vom Suchsymbol zur Seite für die Suchansicht
- Überblenden mit dem Übergang zwischen den Postfachseiten
- Umstellung von Container Transform vom Chip für E-Mail-Adressen auf die Kartenansicht
Voraussetzungen
- Grundkenntnisse in Android-Entwicklung und Kotlin
- Android Studio (hier herunterladen, falls Sie es noch nicht haben)
- Ein Android-Emulator oder -Gerät (verfügbar über Android Studio)
- Beispielcode (siehe nächster Schritt)
Wie würdest du deine Erfahrung mit der Entwicklung von Android-Apps bewerten?
<ph type="x-smartling-placeholder">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 im Android Studio-Einrichtungsassistenten mit den Standardwerten aus. Es kann einige Minuten dauern, bis die erforderlichen Dateien heruntergeladen und installiert wurden. Sie können diesen Schritt also im Hintergrund ausführen, während Sie mit dem nächsten Abschnitt fortfahren.
Option 1: Start-Codelab-App von GitHub klonen
Führen Sie die folgenden Befehle aus, um dieses Codelab aus GitHub zu klonen:
git clone https://github.com/material-components/material-components-android-motion-codelab.git cd material-components-android-motion-codelab
Option 2: Lade die Start-Codelab-App als ZIP-Datei herunter.
Die Start-App befindet sich im Verzeichnis material-components-android-motion-codelab-develop.
Startcode in Android Studio laden
- Sobald der Einrichtungsassistent fertig ist und das Fenster Willkommen bei Android Studio angezeigt wird, klicken Sie auf Vorhandenes Android Studio-Projekt öffnen.
- Wechseln Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie das Beispielverzeichnis aus, um das Projekt zu öffnen.
- Warten Sie einen Moment, bis das Projekt in Android Studio erstellt und synchronisiert wurde. Dies können Sie an den Aktivitätsanzeigen unten im Android Studio-Fenster erkennen.
- An dieser Stelle kann Android Studio einige Build-Fehler ausgeben, weil das Android SDK oder die Build-Tools (siehe unten) fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren bzw. zu aktualisieren und Ihr Projekt zu synchronisieren. Sollten weiterhin Probleme auftreten, folgen Sie der Anleitung zum Aktualisieren Ihrer Tools mit dem SDK-Manager.
Projektabhängigkeiten prüfen
Das Projekt erfordert eine Abhängigkeit von der MDC-Android-Bibliothek. Im Beispielcode, den Sie heruntergeladen haben, sollte diese Abhängigkeit bereits aufgeführt sein. Sehen wir uns die Konfiguration an, um sicherzugehen.
Gehen Sie zur Datei build.gradle des Moduls app und achten Sie darauf, dass der Block dependencies eine Abhängigkeit von MDC-Android enthält:
implementation 'com.google.android.material:material:1.2.0'
Starter-App ausführen
- Achten Sie darauf, dass die Build-Konfiguration links neben dem Gerät
applautet. - Klicken Sie auf die grüne Schaltfläche Run / Play, um die App zu erstellen und auszuführen.
- Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) unter den verfügbaren Geräten bereits ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Neues virtuelles Gerät erstellen.
- Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone wie Pixel 3 aus und klicken Sie auf Weiter.
- Wählen Sie auf dem Bildschirm System-Image die aktuelle Android-Version aus, vorzugsweise die höchste API-Ebene. Falls sie nicht installiert ist, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab.
- Klicken Sie auf Weiter.
- Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Finish (Fertigstellen).
- Wählen Sie im Dialogfeld für das Bereitstellungsziel ein Android-Gerät aus.
- Klicken Sie auf OK.
- Android Studio erstellt die App, stellt sie bereit und öffnet sie automatisch auf dem Zielgerät.
Fertig! Der Starter-Code für die Reply-Startseite sollte in deinem Emulator ausgeführt werden. Der Posteingang sollte eine Liste mit E-Mails enthalten.
Optional: Geräteanimationen verlangsamen
Da dieses Codelab schnelle, aber ausgefeilte Übergänge beinhaltet, kann es hilfreich sein, die Animationen des Geräts zu verlangsamen, um bei der Implementierung einige der feineren Details der Übergänge zu beobachten. Dies kann entweder mit adb-Shell-Befehlen oder einer Kachel für Schnelleinstellungen erreicht werden. Beachte, dass diese Methoden zum Verlangsamen von Geräteanimationen sich auch auf Animationen auf dem Gerät außerhalb der Antwort-App auswirken.
Methode 1: ADB-Shell-Befehle
Um die Animationen des Geräts um das 10-Fache zu verlangsamen, können Sie folgende 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 die normale Geschwindigkeit 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: Kachel „Schnelleinstellungen“
Alternativ kannst du zum Einrichten der Schnelleinstellungskachel zuerst die Entwicklereinstellungen auf deinem Gerät aktivieren, falls du das noch nicht getan hast:
- Öffnen Sie die Einstellungen des Geräts. App
- Scrolle nach unten und klicke auf „Informationen zum emulierten Gerät“.
- Scrollen Sie nach unten und klicken Sie schnell auf "Build-Nummer". bis die Entwicklereinstellungen aktiviert sind
Gehen Sie nun in den Einstellungen des Geräts wie folgt vor: App zum Aktivieren der Schnelleinstellungen-Kachel:
- Klicken Sie oben auf dem Bildschirm auf das Suchsymbol oder die Suchleiste.
- Geben Sie „Kacheln“ ein. im Suchfeld
- Klicke auf „Entwicklerkacheln für Schnelleinstellungen“. Zeile
- Klicken Sie auf die Skala der Fensteranimation. Schalter
Ziehen Sie schließlich im Codelab die Systembenachrichtigungsleiste vom oberen Bildschirmrand nach unten und verwenden Sie das 
-Symbol, um zwischen Animationen mit langsamer und normaler Geschwindigkeit zu wechseln.
3. Mit dem Beispielcode der App vertraut machen
Sehen wir uns den Code an. Wir stellen Ihnen eine App zur Verfügung, die die Komponente „Jetpack Navigation“ verwendet, um zwischen verschiedenen Fragmenten innerhalb einer einzigen Aktivität, MainActivity zu navigieren:
- HomeFragment:Eine Liste von E-Mail-Adressen wird angezeigt.
- EmailFragment:Zeigt eine einzelne, vollständige E-Mail an.
- ComposeFragment ermöglicht das Schreiben einer neuen E-Mail.
- SearchFragment:Zeigt eine Suchansicht an
navigation_graph.xml
Wenn Sie wissen möchten, wie das Navigationsdiagramm der App aufgebaut ist, öffnen Sie navigation_graph.xml im Verzeichnis app -> src -> main -> res -> navigation:
<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, wie alle oben genannten Fragmente vorhanden sind, wobei das Standard-Startfragment über app:startDestination="@id/homeFragment" auf HomeFragment gesetzt ist. Diese XML-Definition der Fragment-Zielgrafik sowie der Aktionen legen den generierten Kotlin-Navigationscode fest, dem Sie beim Hooking von Übergängen begegnen.
activity_main.xml
Sehen Sie sich als Nächstes das Layout activity_main.xml im Verzeichnis app -> src -> main -> res -> layout an. Sie sehen die NavHostFragment, die 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"/>
NavHostFragment füllt den Bildschirm aus und verarbeitet alle Änderungen an der Fragmentnavigation im Vollbildmodus in der App. Die BottomAppBar und die verankerte FloatingActionButton, die sich ebenfalls in activity_main.xml befinden, werden über dem aktuellen Fragment gelegt, das von NavHostFragment angezeigt wird. Sie werden daher je nach Ziel des Fragments durch den bereitgestellten Beispielcode der App ein- oder ausgeblendet.
Außerdem ist die BottomNavDrawerFragment in activity_main.xml eine untere Leiste mit einem Menü zur Navigation zwischen den verschiedenen E-Mail-Postfächern, das über die BottomAppBar-Schaltfläche „Logo antworten“ angezeigt wird.
Hauptaktivität.kt
Um ein Beispiel für eine Navigationsaktion zu sehen, öffnen Sie 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 Wechsel zur Suchansichtsseite navigieren können. In diesem Codelab befassen Sie sich mit der MainActivity von Reply und mit vier Hauptfragmenten zur Einrichtung von Material-Übergängen, die zusammen mit den verschiedenen Navigationsaktionen in der App funktionieren.
Nachdem Sie nun mit dem Startcode vertraut sind, können wir unsere erste Umstellung implementieren.
4. Container Transform-Umstellung von der E-Mail-Liste auf die E-Mail-Detailseite hinzufügen
Zuerst fügen Sie einen Übergang hinzu, wenn Sie auf eine E-Mail klicken. Für diese Navigationsänderung eignet sich das Containertransformationsmuster gut, da es für Übergänge zwischen UI-Elementen vorgesehen ist, die einen Container enthalten. Dieses Muster erzeugt eine sichtbare Verbindung zwischen zwei UI-Elementen.
Bevor Sie Code hinzufügen, versuchen Sie, die Antwort-App auszuführen und auf eine E-Mail zu klicken. Es sollte ein einfacher Jump Cut sein, d. h., der Bildschirm wird ohne Übergang ersetzt:
Fügen Sie zuerst ein transitionName-Attribut auf der MaterialCardView 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 Name des Übergangs nimmt eine Stringressource mit einem Parameter an. Sie müssen die ID jeder E-Mail-Adresse verwenden, damit jede transitionName in unserem EmailFragment eindeutig ist.
Nachdem Sie nun den Übergangsnamen für Ihr E-Mail-Listenelement festgelegt haben, können Sie im Layout der E-Mail-Details die gleichen Schritte durchführen. Legen Sie in fragment_email.xml den transitionName des MaterialCardView auf die folgende Stringressource fest:
fragment_email.xml
android:transitionName="@string/email_card_detail_transition_name"
Ersetzen Sie in HomeFragment.kt den Code in onEmailClicked durch das folgende Snippet, um die Zuordnung von der Startansicht (Element in der E-Mail-Liste) und von der Endansicht (Bildschirm mit E-Mail-Details) aus 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)
Nachdem Sie die Sanitärleitungen konfiguriert haben, können Sie eine Containertransformation erstellen. Legen Sie in der EmailFragment-Methode onCreate die sharedElementEnterTransition auf eine neue Instanz eines MaterialContainerTransform fest. Dabei wird die com.google.android.material.transition-Version im Gegensatz zur com.google.android.material.transition.platform-Version importiert. Fügen Sie dazu das folgende Snippet hinzu:
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))
}
Versuchen Sie nun, die App noch einmal auszuführen.
Es sieht jetzt alles super aus! Wenn Sie auf eine E-Mail in der E-Mail-Liste klicken, sollte das Listenelement bei einer Containertransformation zu einer Detailseite im Vollbildmodus erweitert werden. Beachten Sie jedoch, dass durch das Drücken von „Zurück“ die E-Mail nicht wieder in der Liste ausgeblendet wird. Außerdem verschwindet die E-Mail-Liste unmittelbar zu Beginn der Umstellung mit dem grauen Fensterhintergrund. Wir sind also noch nicht fertig.
Fügen Sie der Methode onViewCreated in HomeFragment.kt die folgenden zwei Zeilen hinzu, um den Rückgabeübergang zu korrigieren:
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“ klicken, wird die E-Mail wieder in der Liste minimiert. Sehr gut! Wir sollten die Animation weiter verbessern.
Das Problem, dass die E-Mail-Liste verschwindet, besteht darin, dass das aktuelle Fragment sofort entfernt und durch das neue eingehende Fragment ersetzt wird, wenn Sie mithilfe der Navigationskomponente zu einem neuen Fragment navigieren. Damit die E-Mail-Liste auch nach dem Ersetzen sichtbar bleibt, können Sie einen Exit-Übergang zu HomeFragment hinzufügen.
Fügen Sie der HomeFragment-Methode onEmailClicked das folgende Snippet hinzu, damit die Liste der E-Mails beim Verlassen und beim erneuten Öffnen leicht horizontal und wieder herunterskaliert 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()
}
Um sicherzustellen, dass der Übergang MaterialElevationScale auf den Startbildschirm als Ganzes und nicht auf die einzelnen Ansichten in der Hierarchie angewendet wird, markieren Sie RecyclerView in fragment_home.xml als Übergangsgruppe.
fragment_home.xml
android:transitionGroup="true"
In dieser Phase sollten Sie über eine voll funktionsfähige Containertransformation verfügen. Wenn Sie auf eine E-Mail-Adresse klicken, wird das Listenelement maximiert und ein Detailbildschirm geöffnet, während die Liste der E-Mail-Adressen zurückgeht. Wenn Sie auf „Zurück“ drücken, wird der Bildschirm mit den E-Mail-Details wieder zu einem Listenelement minimiert, während die Liste der E-Mails hochskaliert wird.
5. Container Transform-Umstellung von FAB zum Schreiben von E-Mails hinzufügen
Fahren wir mit der Containertransformation fort und fügen Sie einen Übergang von der unverankerten Aktionsschaltfläche zu ComposeFragment hinzu, um die UAS auf eine neue E-Mail zu erweitern, die vom Nutzer geschrieben werden soll. Führen Sie zuerst die App noch einmal aus und klicken Sie auf die UAS. Sie sehen dann, dass es beim Starten des Bildschirms zum Verfassen von E-Mails keine Umstellung gibt.
Wir verwenden zwar dieselbe Übergangsklasse, aber die Konfiguration dieser Instanz wird anders sein, da sich die UAS in MainActivity befindet und die ComposeFragment im Navigationshostcontainer MainActivity platziert wird.
Fügen Sie in ComposeFragment.kt der Methode onViewCreated das folgende Snippet hinzu. Achten Sie dabei darauf, die androidx.transition-Version von Slide zu importieren.
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)
}
Neben den Parametern, die zur Konfiguration der vorherigen Containertransformation verwendet wurden, werden hier auch startView und endView manuell festgelegt. Anstatt transitionName-Attribute zu verwenden, um dem Android Transition-System mitzuteilen, welche Ansichten umgewandelt werden sollen, können Sie diese bei Bedarf manuell angeben.
Führen Sie die App jetzt noch einmal aus. Sie sollten sehen, wie sich die UAS in den Erstellungsbildschirm umwandelt (siehe GIF am Ende dieses Schritts).
Ähnlich wie im vorherigen Schritt müssen Sie HomeFragment einen Übergang hinzufügen, damit er nicht verschwindet, nachdem er entfernt und durch ComposeFragment ersetzt wurde.
Kopieren Sie das Snippet unten in die Methode navigateToCompose in MainActivity, bevor Sie NavController navigate aufrufen.
Hauptaktivität.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()
}
}
Das war's für diesen Schritt! Der Wechsel vom UAS-Bildschirm zum Erstellen sollte wie folgt aussehen:
6. Übergang von Suchsymbol zur Suchansichtsseite hinzufügen
In diesem Schritt fügen wir einen Übergang vom Suchsymbol zur Suchansicht im Vollbildmodus hinzu. Da kein persistenter Container an dieser Navigationsänderung beteiligt ist, können wir einen Übergang mit gemeinsam genutzter Z-Achse verwenden, um die räumliche Beziehung zwischen den beiden Bildschirmen zu verstärken und anzuzeigen, dass Sie in der App-Hierarchie eine Ebene nach oben verschieben.
Bevor Sie zusätzlichen Code hinzufügen, versuchen Sie, die App auszuführen und unten rechts auf dem Bildschirm auf das Suchsymbol zu tippen. Daraufhin sollte der Bildschirm für die Suchansicht ohne Übergang angezeigt werden.
Suchen Sie zuerst die Methode navigateToSearch in MainActivity und fügen Sie das folgende Code-Snippet vor dem NavController navigate-Methodenaufruf ein, um den Exit des aktuellen Fragments einzurichten und die Übergänge der Z-Achse von MaterialSharedAxis noch einmal einzugeben.
Hauptaktivität.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 der Methode onCreate in SearchFragment das folgende Code-Snippet hinzu. Damit werden die Ein- und Rückgänge vom Typ MaterialSharedAxis konfiguriert.
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()
}
Um sicherzustellen, dass der Übergang MaterialSharedAxis auf den Suchbildschirm als Ganzes und nicht auf die einzelnen Ansichten in der Hierarchie angewendet wird, markieren Sie LinearLayout in fragment_search.xml als Übergangsgruppe.
fragment_search.xml
android:transitionGroup="true"
Fertig! Versuchen Sie nun, die App erneut auszuführen und auf das Suchsymbol zu tippen. Die Start- und Suchansicht sollten gleichzeitig entlang der Z-Achse tief ausgeblendet und skaliert werden, um einen nahtlosen Effekt zwischen den beiden Bildschirmen zu erzeugen.
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 betonen möchten, verwenden wir einen Fade-Through-Effekt, um einen einfachen Austausch durchzuführen. zwischen E-Mail-Listen wechseln.
Bevor Sie zusätzlichen Code hinzufügen, versuchen Sie, die App auszuführen, auf das Antwort-Logo in der unteren App-Leiste zu tippen und das Postfach zu wechseln. Die Liste der E-Mail-Adressen sollte sich ohne Übergang ändern.
Suchen Sie zuerst die Methode navigateToHome in MainActivity und fügen Sie das folgende Code-Snippet vor dem NavController navigate-Methodenaufruf ein, um den Exit-MaterialFadeThrough-Übergang des aktuellen Fragments einzurichten.
Hauptaktivität.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()
}
Führen Sie die App noch einmal aus. Wenn Sie die untere Navigationsleiste öffnen und die Posteingänge wechseln, sollte die aktuelle Liste der E-Mails ausgeblendet und hochskaliert werden, während die neue Liste ausgeblendet und herunterskaliert wird. Sehr gut!
8. Container Transform-Umstellung vom Chip für E-Mail-Adressen zur Kartenansicht hinzufügen
In diesem Schritt fügen Sie einen Übergang hinzu, der einen Chip in eine Pop-up-Karte umwandelt. Mit einer Containertransformation wird der Nutzer darüber informiert, dass sich die im Pop-up durchgeführte Aktion auf den Chip auswirkt, von dem das Pop-up stammt.
Bevor Sie Code hinzufügen, führen Sie die Antwort-App aus, klicken Sie auf eine E-Mail und dann auf „Antworten“. FAB. Versuchen Sie dann, auf den Kontaktchip eines Empfängers zu klicken. Der Chip sollte sofort ausgeblendet werden und eine Karte mit den E-Mail-Adressen dieses Kontakts sollte ohne Animationen erscheinen.
Für diesen Schritt arbeiten Sie in ComposeFragment. Im ComposeFragment-Layout wurden bereits Empfänger-Chips (standardmäßig sichtbar) und eine Empfängerkarte (standardmäßig unsichtbar) hinzugefügt. Ein Empfänger-Chip und diese Karte sind die beiden Ansichten, zwischen denen Sie eine Containertransformation erstellen.
Öffnen Sie zuerst ComposeFragment und suchen Sie nach der Methode expandChip. Diese Methode wird aufgerufen, wenn auf die angegebene chip geklickt wird. Fügen Sie das folgende Code-Snippet oberhalb der Zeilen ein, die die Sichtbarkeit von recipientCardView und chip tauschen. Dadurch wird die über beginDelayedTransition registrierte Containertransformation ausgelöst.
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)
Wenn Sie die App jetzt ausführen, sollte sich der Chip in eine Karte mit E-Mail-Adressen für den Empfänger verwandeln. Als Nächstes konfigurieren wir den Rückgabeübergang, um die Karte wieder im Chip zu minimieren.
Fügen Sie in der Methode collapseChip in ComposeFragment das folgende Code-Snippet hinzu, um die Karte wieder im 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, wird er zu einer Karte maximiert. Wenn Sie auf die Karte klicken, wird sie wieder minimiert. Sehr gut!
9. Fertig
Mit weniger als 100 Zeilen Kotlin-Code und grundlegendem XML-Markup hat die MDC-Android-Bibliothek dir dabei geholfen, wunderschöne Übergänge in einer vorhandenen App zu erstellen, die den Material Design-Richtlinien entspricht und auf allen Android-Geräten einheitlich aussieht und funktioniert.
Weiteres Vorgehen
Weitere Informationen zum Material-Bewegungssystem findest du in der Spezifikation und in der vollständigen Entwicklerdokumentation. Versuche auch, deiner App einige Material-Übergänge hinzuzufügen.
Vielen Dank, dass du Material Motion ausprobiert hast. Wir hoffen, dieses Codelab hat Ihnen gefallen.