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布局：
<!-- l -->
<straint.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 ... />
</straint.ConstraintLayout>
到⽬前为⽌，这只是⼀个普通的xml布局，我们再定义另⼀个布局：
<!-- activity_l -->
<straint.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 ... />
</straint.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)
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)
android layout布局2. ⾃定义动画
还可以⾃定义Transition：
val transition = AutoTransition()
transition.duration = 1000
TransitionManager.beginDelayedTransition(
constraintLayout, transition)
3. 嵌套问题
ConstraintLayout只可以对其直接⼦View执⾏动画，这就意味着它不能很好地处理嵌套的ViewGroup。在以上的例⼦
中，CardView中的TextView还需要⼿动处理动画，也许可以通过嵌套ConstrainLayout来实现，但是我并没有进⾏实验。
4. ⾮布局属性
ConstraintLayout只⽀持约束布局的动画，不⽀持其他属性（如坐标修改，⽂字修改等）。
5. 其他
如果动态修改ConstraintLayout中元素的基本布局属性（⽐如使⽤translationY），动画后并不会同步这个变更，也就是说动画执⾏后，之前修改的属性将会复原。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流，
谢谢⼤家对的⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论