这篇文章将为大家详细讲解有关如何在Android中利用ConstraintLayout实现一个动画效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
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),动画后并不会同步这个变更,也就是说动画执行后,之前修改的属性将会复原。
关于如何在Android中利用ConstraintLayout实现一个动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。