MotionLayout-Beispiele

Dieses Dokument enthält Beispiele zur Verwendung von MotionLayout. Jedes Beispiel enthält ein Video zur Veranschaulichung der Bewegung sowie den entsprechenden Code für die Bewegungsszene und die Layouts.

Einfache Bewegung

Dieses Beispiel enthält eine einzelne Ansicht, die Sie berühren und ziehen können, um sie horizontal zu verschieben.

Abbildung 1. Eine Ansicht wird verschoben.

Benutzerdefiniertes Attribut – backgroundColor

Dieses Beispiel ähnelt dem Beispiel für grundlegende Bewegung. Zusätzlich zur Grundbewegung ändert sich auch die Hintergrundfarbe der Ansicht, wenn sich die Ansicht bewegt.

Abbildung 2. Eine Ansicht wird verschoben, während sich ihre Hintergrundfarbe ändert.

ImageFilterView – Bildübergang

Dieses Beispiel zeigt, wie der Sättigungswert eines ImageFilterView-Objekts übergangen wird.

Abbildung 3. Ziehen eines Bildes, während sich seine Sättigung ändert.

Keyframe-Position

In diesem Beispiel wird <KeyFrameSet> verwendet, um die Y-Position der Ansicht während einer Bewegung zu ändern.

Abbildung 4. Eine Ansicht wird gezogen und ihre Y-Position geändert.

Keyframe-Interpolation

Dieses Beispiel baut auf dem Beispiel Keyframe-Position auf, wobei dem Ansichtsübergang Rotation und Skalierung hinzugefügt werden.

Abbildung 5: Sie ziehen eine Ansicht und ändern ihre Y-Position, Drehung und Skalierung.

Keyframe-Zyklus

In diesem Beispiel werden <KeyCycle>-Elemente hinzugefügt, um der Ansicht eine wellenförmige Bewegung hinzuzufügen.

Abbildung 6: Ziehen einer Ansicht mit einer wellenförmigen Bewegung, während die Farbe geändert wird.

CoordinatorLayout (1/2)

In diesem Beispiel wird ein MotionLayout zu einem vorhandenen AppBarLayout hinzugefügt, um der App-Leiste Bewegung hinzuzufügen. Dieses Beispiel wird in Einführung in MotionLayout (Teil III) näher beschrieben.

Abbildung 7. Scrollen, während die App-Leiste maximiert wird.

CoordinatorLayout (2/2)

In diesem Beispiel wird ein MotionLayout zu einem vorhandenen AppBarLayout hinzugefügt, um der App-Leiste Bewegung hinzuzufügen.

Abbildung 8. Scrollen, während die App-Leiste maximiert wird und Text in der App-Leiste bzw. aus der App-Leiste animiert wird.

DrawerLayout (1/2)

In diesem Beispiel wird gezeigt, wie du einem DrawerLayout Bewegungselemente hinzufügst. Dieses Beispiel wird unter Einführung in MotionLayout (Teil III) weiter beschrieben.

Abbildung 9. „DrawerLayout“ wird erweitert.

DrawerLayout (2/2)

In diesem Beispiel wird gezeigt, wie du einem DrawerLayout Bewegungselemente hinzufügst.

Abbildung 10. „DrawerLayout“ wird mit animiertem Menütext erweitert.

Seitenleiste

In diesem Beispiel wird gezeigt, wie eine Seitenleiste angezeigt wird, wenn der Hauptinhaltsbereich nach rechts gezogen wird.

Abbildung 11. Seitenleiste durch Ziehen des Hauptinhalts einblenden.

Parallaxe

Dieses Beispiel zeigt einen Parallaxe-Hintergrund, auf dem sich verschiedene Hintergrundebenen mit unterschiedlicher Geschwindigkeit bewegen.

Abbildung 12. Parallaxeneffekt im Kopfzeilenbild.

ViewPager

In diesem Beispiel wird gezeigt, wie du Bewegung hinzufügen kannst, wenn du zwischen ViewPager-Tabs wischst. Dieses Beispiel wird in Einführung in MotionLayout (Teil III) näher beschrieben.

Abbildung 13. Parallaxeneffekt im Kopfzeilenbild beim Wischen über einen ViewPager.

ViewPager – Lottie

In diesem Beispiel wird gezeigt, wie du Bewegung hinzufügen kannst, wenn du zwischen ViewPager-Tabs wischst.

Abbildung 14. Ein Bild, das einen Lottie-Effekt im Kopfzeilenbild zeigt, während Sie über einen ViewPager wischen.

Komplexe Bewegung (1/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um komplexe Bewegungen darzustellen.

Abbildung 15: Kombinieren von Effekten, um komplexe Bewegungen zu erzeugen.

Komplexe Bewegung (2/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um komplexe Bewegungen darzustellen.

Abbildung 16. Kombinieren von Effekten, um komplexe Bewegungen zu erzeugen.

Komplexe Bewegung (3/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um komplexe Bewegungen darzustellen.

Abbildung 17. Kombinieren von Effekten, um komplexe Bewegungen zu erzeugen.

Fragmentübergang (1/2)

In diesem Beispiel wird gezeigt, wie Sie mit MotionLayout zwischen Fragmenten wechseln können.

Abbildung 18. Fragmentübergang.

Fragmentübergang (2/2)

In diesem Beispiel wird gezeigt, wie Sie mit MotionLayout zwischen Fragmenten wechseln können.

Abbildung 19. Fragmentübergang.

YouTube-ähnliche Bewegung

In diesem Beispiel wird der Wechsel zwischen einer kompakten Ansicht und einem Vollbild mit zusätzlichen Inhalten veranschaulicht.

Abbildung 20. Fragmente gehen ähnlich wie bei YouTube über.

Schlüsseltrigger

In diesem Beispiel wird gezeigt, wie eine unverankerte Aktionsschaltfläche ein- und ausgeblendet wird, wenn der Übergang einen Schwellenwert überschreitet.

Abbildung 21. Unverankerte Aktionsschaltfläche ein- und ausblenden

Mehrere Bundesstaaten

In diesem Beispiel wird gezeigt, wie mithilfe des Zustands bestimmt wird, welche Bewegung angewendet werden soll.

Abbildung 22. Unterschiedliche Bewegungen je nach Zustand.