Android Studio enthält einen visuellen Designeditor für den Layouttyp MotionLayout, mit dem sich Animationen einfacher erstellen und als Vorschau ansehen lassen.
Der Motion Editor bietet eine einfache Oberfläche zum Bearbeiten von Elementen aus der MotionLayout-Bibliothek, die als Grundlage für Animationen in Android-Apps dient. Ohne Android Studio müssen zum Erstellen und Ändern dieser Elemente die Einschränkungen in XML-Ressourcendateien manuell bearbeitet werden. Der Motion Editor kann diesen XML-Code jedoch für Sie generieren, der Start- und Endzustände, Keyframes, Übergänge und Zeitachsen unterstützt.
So verwenden Sie den Motion Editor:
- ConstraintLayout erstellen
- Klicken Sie im Layout-Editor mit der rechten Maustaste auf die Vorschau.
- Klicken Sie wie unten gezeigt auf In MotionLayout konvertieren.
Nachdem Android Studio Ihr ConstraintLayout in ein MotionLayout konvertiert hat, wird dem Verzeichnis, das Ihre XML-Datei enthält, auch eine Bewegungsszenendatei (eine .xml-Datei mit _scene an den Layoutdateinamen) hinzugefügt.
Das MotionLayout-Element wird dann zu Ihrem Stammlayout und wird in der Benutzeroberfläche des Motion-Editors angezeigt. Das Layout enthält bereits eine Start-ConstraintSet, eine Ende-ConstraintSet und einen Übergang von Anfang zum Ende.
In der Übersichtsgrafik können Sie einen ConstraintSet oder Transition sowie Komponenten im Auswahlbereich auswählen.
Anschließend können Sie die Einschränkungen und Attribute der Start- oder End-ConstraintSet auf die gleiche Weise bearbeiten wie eine ConstraintLayout.
Wenn Sie dem Diagramm weitere Elemente hinzufügen möchten, können Sie über die entsprechenden Symbole schnell eine ConstraintSet-, Transition- oder OnClick/OnSwipe-Geste hinzufügen.
Klicken Sie zum Hinzufügen eines Keyframes zuerst auf den Übergangspfeil:
Klicken Sie dann im Zeitachsenbereich Umstellung auf die obere rechte Ecke und wählen Sie KeyPosition aus:
Dadurch wird ein Dialogfeld geöffnet, in dem Sie Attribute für den Keyframe festlegen können.
Sie können der Umstellung im Attributbereich auch die Handler OnClick und OnSwipe hinzufügen.
Dadurch wird ein Dialogfeld geöffnet, in dem Sie Klickattribute wie Zielkomponenten und Ziehrichtung festlegen können.
Der Motion Editor unterstützt die Vorschau von Animationen auf der Designoberfläche. Wenn eine Animation ausgewählt ist, klicken Sie über der Zeitachse auf Wiedergabe
, um sie in der Vorschau anzusehen.
