Key-Frame Animationen mit ConstraintLayout & ConstraintSet erstellen

Eine gute mobile App muss nicht nur zuverlässig funktionieren, sondern auch ein ansprechendes UI-Design und eine gute Benutzererfahrung bieten. Animationen können bei richtiger Verwendung dazu beitragen, die Aufmerksamkeit der Benutzer auf sich zu ziehen und die App von anderen abzuheben. Mit dem ConstraintLayout von Android lassen sich dabei auf sehr einfache Art und Weise kommplexe Animationen erstellen.

ConstraintLayout

Das ConstraintLayout wurde erstmals vor zwei Jahren von Google vorgestellt und hat seit rund einem Jahr die Beta-Phase hinter sich gelassen. Es ist vergleichbar mit dem RelativeLayout, bietet jedoch mehr Flexibilität. Damit lassen sich komplexe Layout Hierarchien in einer flachen Struktur abbilden. Dadurch wird die Zeit für das Rendern eines Layouts reduziert und eine bessere Performance erreicht.

Man kann es aber auch in Kombination mit ConstraintSet verwenden, um komplexe Animationen auf einfache Art und Weise umzusetzen. Die Grundidee ist, dass man ein Start-Layout und ein End-Layout (sogenannte Key-Frames) definiert. Anschliessend animiert der TransitionManager den Übergang vom ConstraintSet des Start-Layouts zum ConstraintSet des End-Layouts.

Das fertige Beispiel sieht wie folgt aus:

Walkthrough

Start-Layout erstellen

Als erstes erstellen wir das initiale Layout. Das Beispiel ist relativ simpel aufgebaut. Der Titel und Untertitel sind Links ausgerichtet und mit einem Margin von Oben versetzt. Der grösste Teil des Bildschirms wird von dem Bild eingenommen, welches oberhalb der Beschreibung platziert ist.

Ziel-Layout  erstellen

Beim Ziel-Layout sind die Texte ausgeblendet und das Bild nimmt den ganzen Platz ein. Der rechte Rand des Titels ist am linken Rand des Layouts ausgerichtet. Sprich wurde nach Links herausgeschoben. Die Beschreibung wurde ebenfalls nicht einfach ausgeblendet, sondern an den unteren Rand des Layouts ausgerichtet.

ConstraintSet erstellen

Nachdem wir nun beide Layouts erstellt haben, können wir das ConstraintSet für das Ziel-Layout erstellen. Dies kann mit nur zwei Zeilen Code gemacht werden:

val endConstraintSet = ConstraintSet()
endConstraintSet.clone(this, R.layout.activity_monkey_detail)

Das ConstraintSet beinhaltet lediglich die Constraints, Grössen und Margins des Layouts. Andere Attribute werden nicht beachtet und könnten demnach auch weggelassen und müssen somit nicht jeweils abgeglichen werden.

ConstraintSet auf Layout anwenden

Wollen wir die Animation nun ausführen, so müssen wir nur eine Transition mit dem TransitionManager starten und das ConstraintSet auf das Layout anwenden:

TransitionManager.beginDelayedTransition(constraintLayout)
endConstraintSet.applyTo(constraintLayout)

Mit diesen vier Zeilen Code haben wir bereits die ganze Animation implementiert.

Standardmässig wird die Animation linear interpoliert. Dies kann man jedoch sehr einfach anpassen, indem man einen anderen Interpolator verwendet. In meiner Demo-App habe ich z.B. FastOutSlowInInterpolator verwendet:

val transition = ChangeBounds()
transition.interpolator = FastOutSlowInInterpolator()
TransitionManager.beginDelayedTransition(constraintLayout, transition)

Zusammenfassung

Mit Hilfe von Key-Frame Animationen kann sehr einfach eine komplexe Animation implementieren. Man muss dazu nur das Start- und End-ConstraintSet definieren und lässt den TransitionManager die Arbeit machen. Bei einfacheren Animation muss man sich überlegen, ob man wirklich zwei Layouts anlegen will. Hier kann es allenfalls sinnvoller sein, die Animation im Code abzubilden.