MotionLayout-Beispiele

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Verwenden von Animationen in Compose
Animations in Compose →

Dieses Dokument enthält Beispiele für die Verwendung von MotionLayout. Jedes Beispiel enthält ein Video, in dem die Bewegung demonstriert wird, sowie den entsprechenden Code für die Bewegungsszene und die Layouts.

Grundlegende Bewegung

Dieses Beispiel enthält eine einzelne Ansicht, die Sie durch Tippen und Ziehen horizontal verschieben können.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 1. Ansichten per Drag-and-drop verschieben

Benutzerdefiniertes Attribut: backgroundColor

Dieses Beispiel ähnelt dem Beispiel für einfache Bewegungen. Zusätzlich zur grundlegenden Bewegung ändert sich die Hintergrundfarbe der Ansicht, während sie sich bewegt.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 2. Ansichten werden verschoben, während sich die Hintergrundfarbe ändert.

ImageFilterView – Bildübergang

In diesem Beispiel wird gezeigt, wie der Sättigungswert eines ImageFilterView übergangsweise geändert wird.
Abbildung 3. Ziehen eines Bildes, während sich die Sättigung ändert

Keyframe-Position

In diesem Beispiel wird <KeyFrameSet> verwendet, um die Y-Position der Ansicht während der Bewegung zu ändern.
Abbildung 4. Ansichten ziehen und die Y-Position ändern

Keyframe-Interpolation

In diesem Beispiel bauen wir auf dem Beispiel für die Keyframe-Position auf und fügen der Ansichtsüberblendung Drehung und Skalierung hinzu.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 5: Ansichten ziehen und ihre Y-Position, Drehung und Skalierung ändern

Keyframe-Zyklus

In diesem Beispiel werden <KeyCycle>-Elemente hinzugefügt, um der Ansicht eine wellenartige Bewegung zu verleihen.
Abbildung 6: Eine Ansicht mit einer wellenförmigen Bewegung ziehen und dabei die Farbe ändern

CoordinatorLayout (1/2)

In diesem Beispiel wird einer vorhandenen AppBarLayout eine MotionLayout hinzugefügt, um der App-Leiste Bewegung zu verleihen. Dieses Beispiel wird in Einführung in MotionLayout (Teil III) weiter beschrieben.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 7. Inhalte scrollen, während sich die App-Leiste maximiert.

CoordinatorLayout (2/2)

In diesem Beispiel wird einer vorhandenen AppBarLayout eine MotionLayout hinzugefügt, um der App-Leiste Bewegung zu verleihen.
Abbildung 8. Beim Scrollen durch Inhalte wird die App-Leiste maximiert und der Text wird animiert in die App-Leiste hinein- und herausgezoomt.

DrawerLayout (1/2)

In diesem Beispiel wird gezeigt, wie du einer DrawerLayout Bewegung hinzufügen kannst. Dieses Beispiel wird im Artikel Einführung in MotionLayout (Teil III) weiter beschrieben.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 9. Maximieren von „DrawerLayout“

DrawerLayout (2/2)

In diesem Beispiel wird gezeigt, wie du einer DrawerLayout Bewegung hinzufügen kannst.
Abbildung 10. Erweitern des `DrawerLayout` mit animiertem Menütext

Seitenleiste

In diesem Beispiel wird gezeigt, wie ein Seitenbereich angezeigt wird, wenn Sie den Hauptinhaltsbereich nach rechts ziehen.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 11. Seitenleiste durch Ziehen des Hauptinhalts anzeigen

Parallaxe

In diesem Beispiel wird ein Parallaxe-Hintergrund gezeigt, bei dem sich verschiedene Hintergrundebenen unterschiedlich schnell bewegen.
Abbildung 12. Parallaxe-Effekt im Kopfzeilenbild.

ViewPager

In diesem Beispiel wird gezeigt, wie Sie beim Wischen zwischen ViewPager-Tabs Bewegung hinzufügen können. Dieses Beispiel wird in Einführung in MotionLayout (Teil III) weiter beschrieben.

  • Rufe das Layout-XML auf.
  • Rufen Sie die MotionScene-XML-Datei auf.
Abbildung 13. Parallaxeeffekt im Titelbild beim Wischen durch einen ViewPager.

ViewPager – Lottie

In diesem Beispiel wird gezeigt, wie Sie beim Wischen zwischen ViewPager-Tabs Bewegungen hinzufügen können.
Abbildung 14. Ein Bild mit einem Lottie-Effekt im Titelbild beim Wischen durch einen ViewPager.

Komplexe Bewegung (1/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um eine komplexe Bewegung zu veranschaulichen.
Abbildung 15. Effekte kombinieren, um komplexe Bewegungen zu erzeugen

Komplexe Bewegung (2/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um eine komplexe Bewegung zu veranschaulichen.
Abbildung 16. Effekte kombinieren, um komplexe Bewegungen zu erzeugen

Komplexe Bewegung (3/3)

In diesem Beispiel werden Elemente aus vorherigen Beispielen kombiniert, um eine komplexe Bewegung zu veranschaulichen.
Abbildung 17. Effekte kombinieren, um komplexe Bewegungen zu erzeugen

Fragmentübergang (1/2)

In diesem Beispiel wird gezeigt, wie du mit MotionLayout zwischen Fragmenten wechseln kannst.
Abbildung 18. Fragmentübergang.

Fragmentübergang (2/2)

In diesem Beispiel wird gezeigt, wie du mit MotionLayout zwischen Fragmenten wechseln kannst.
Abbildung 19. Fragmentübergang.

YouTube-ähnliche Bewegungen

In diesem Beispiel wird der Übergang zwischen einer kompakten Ansicht und einem Vollbildmodus mit zusätzlichen Inhalten veranschaulicht.
Abbildung 20. Die Übergänge zwischen den Fragmenten ähneln denen auf YouTube.

KeyTrigger

In diesem Beispiel wird gezeigt, wie eine schwebende Aktionsschaltfläche angezeigt und ausgeblendet wird, wenn der Übergang einen Fortschrittsgrenzwert überschreitet.
Abbildung 21. Unverankerte Aktionsschaltfläche ein- und ausblenden

Mehrere Bundesländer

In diesem Beispiel wird gezeigt, wie Sie anhand des Status bestimmen, welche Bewegung angewendet werden soll.
Abbildung 22. Je nach Bundesstaat unterschiedliche Anträge

Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.

Zuletzt aktualisiert: 2025-03-04 (UTC).