Android uses constraintlayout to realize beautiful animation details

preface

Recently, constrainlayout is a popular thing in Android. Constrainlayout can flatten the view hierarchy, improve performance, and support arbitrary borders. Its purpose is to repair some short boards in the previous layout. In fact, constrainlayout has another feature that most people don't notice: you can use constrainlayout to quickly build beautiful animation effects.

method

I assume here that you have mastered the basic knowledge of constrainlayout (such as app: layout_constraintleft_toleftof, etc.). Constrainlayout can perform animation between two sets of constraints through transition Manager (API > 19 or support library is required). The following is a demo.

Simple demo

Let's write an XML layout first:

So far, this is just an ordinary XML layout. Let's define another layout:

The two layouts differ only in the height of ImageView. In order to execute the animation, you only need to write a few lines of code in the activity:

The code is written by kotlin. Even if you haven't learned it, there are basically no obstacles, but it's still necessary to learn it.

In the code, we use the transition manager to start a delay animation in the constrainlayout. The transition manager will automatically use the animation when exchanging two layouts.

Duplicate XML layout

This method uses two XML layouts. Is it repeated? No one likes repeated code.

In fact, it's not as bad as you think. If you define redundant XML for animation purposes, you can omit all non layout attributes (such as textsize). Constrainlayout automatically captures the basic constraint properties of all layouts and discards some of them.

If you still want to avoid duplicate code, you can also dynamically modify constraint properties in the code:

These animations can also be implemented using the transition framework

Of course, we can achieve animation by using the transition framework or using attribute settings. However, when the required animation can be realized by using specific constraints, the method of constrainlayout is very effective, otherwise a lot of code is required to realize the animation effect.

Another usage scenario is when many elements need dynamic effects. Take an example:

The above effects can be achieved by using constrainlayout. By specifying different XML, the animation will be executed automatically.

matters needing attention

1. Method of starting Animation:

2. Custom animation

You can also customize the transition:

3. Nesting problem

Constraintlayout can only animate its immediate child views, which means it can't handle nested viewgroups well. In the above example, textview in cardview also needs to process animation manually. Maybe it can be realized by nesting constrainlayout, but I did not experiment.

4. Non layout attributes

Constraintlayout only supports the animation of constraint layout, and does not support other attributes (such as coordinate modification, text modification, etc.).

5. Others

If you dynamically modify the basic layout attributes of elements in constraintlayout (such as using translationy), the change will not be synchronized after the animation, that is, after the animation is executed, the previously modified attributes will be restored.

summary

The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.