Android利用ConstraintLayout实现漂亮的动画详解

前言

最近constrainlayout是android中比较火的一个东西。constrainlayout可以使view层级扁平化，提升性能，支持任意的边框，其目的就是修复之前layout的一些短板。其实constrainlayout还有一个大多数人没有注意到的特性：可以利用constrainlayout快速构建漂亮的动画效果。

方法

我这里假设已经你已经掌握了constrainlayout基本知识（比如：app:layout_constraintleft_toleftof等）。constrainlayout可以通过transitionmanager 在两组constraints之间执行动画（需要api>19或者使用support library），以下是一个demo。

simple demo

我们先写一个xml布局：

<!-- activity_main.xml -->
<android.support.constraint.constraintlayout ...>

 <imageview
 android:id="@+id/image"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintleft_toleftof="parent"
 app:layout_constraintright_torightof="parent"
 ... />

 <button ... />

</android.support.constraint.constraintlayout>

到目前为止，这只是一个普通的xml布局，我们再定义另一个布局：

<!-- activity_main_alt.xml -->
<android.support.constraint.constraintlayout ...>

 <imageview
 android:id="@+id/image"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintleft_toleftof="parent"
 app:layout_constraintright_torightof="parent"
 **app:layout_constrainttop_totopof="parent"
 app:layout_constraintbottom_tobottomof="parent"**
 ... />

 <button ... />

</android.support.constraint.constraintlayout>

这两个布局只有imageview的高度不同，为了执行动画，只需要在activity中写几行代码即可：

override fun oncreate(savedinstancestate: bundle?) {
 ...
 val constraintset1 = constraintset()
 constraintset1.clone(constraintlayout)
 val constraintset2 = constraintset()
 constraintset2.clone(this, r.layout.activity_main_alt)

 var changed = false
 findviewbyid(r.id.button).setonclicklistener {
 transitionmanager.begindelayedtransition(constraintlayout)
 val constraint = if (changed) constraintset1 else constraintset2
 constraint.applyto(constraintlayout)
 changed = !changed
 }
}

代码使用kotlin写的，即使没有学过，基本也没有什么障碍，不过还是很有必要学习一下的。

代码中我们使用transitionmanager在constrainlayout中启动了一个延时动画，transitionmanager在交换两种布局时会自动使用动画。

重复的xml layout

这种方式使用了两个xml布局，是否重复了呢，没有人喜欢重复的代码。

其实没有你想的那么糟糕，如果为了动画的目的定义多余的xml，可以省略所有的非布局属性（如textsize等属性）。constrainlayout会自动捕获所有layout的基本约束属性并抛弃其中的一些。

如果你还是想避免重复的代码，还可以在代码中动态修改约束属性：

override fun oncreate(savedinstancestate: bundle?) {
 ...
 val constraintset1 = constraintset()
 constraintset1.clone(constraintlayout)
 val constraintset2 = constraintset()
 constraintset2.clone(constraintlayout)
 constraintset2.centervertically(r.id.image, 0)

 var changed = false
 findviewbyid(r.id.button).setonclicklistener {
 transitionmanager.begindelayedtransition(constraintlayout)
 val constraint = if (changed) constraintset1 else constraintset2
 constraint.applyto(constraintlayout)
 changed = !changed
 }
}

使用transition 框架也可以实现这些动画

当然可以这样，我们可以通过使用transition框架或者使用属性设置也可以实现动画。然而，当需要的动画可通过使用特定的约束来实现时，constrainlayout的方法就很有效，否则就需要大量的代码来实现动画效果。

另一个使用场景是当很多元素需要动效时，看一个例子：

使用constrainlayout可以实现以上的效果，通过指定不同的xml，动画就会自动执行。

注意事项

1. 启动动画的方法：

transitionmanager.begindelayedtransition(constraintlayout)

2. 自定义动画

还可以自定义transition：

val transition = autotransition()
transition.duration = 1000
transitionmanager.begindelayedtransition(
 constraintlayout, transition)

3. 嵌套问题

constraintlayout只可以对其直接子view执行动画，这就意味着它不能很好地处理嵌套的viewgroup。在以上的例子中，cardview中的textview还需要手动处理动画，也许可以通过嵌套constrainlayout来实现，但是我并没有进行实验。

4. 非布局属性

constraintlayout只支持约束布局的动画，不支持其他属性（如坐标修改，文字修改等）。

5. 其他

如果动态修改constraintlayout中元素的基本布局属性（比如使用translationy），动画后并不会同步这个变更，也就是说动画执行后，之前修改的属性将会复原。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。