如何为约束布局上的嵌套视图设置动画? [英] How to animate the nested view on constraint layout?
问题描述
我有一个要求，其中视图需要位于底部的中心并根据其内容调整高度.因此在根 constraint layout 中创建了 constraint layout 来实现这一点.但现在我面临动画问题.我无法应用 constraintSet.
I have a requirement where the view needs to be at the center of bottom and adjust the height based on its content. So created constraint layout inside root constraint layout to acheive this. But now I am facing a problem with animation. I am not able to apply constraintSet.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BEE">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/error_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="40dp"
android:background="#FFF"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="@+id/error_try_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:textStyle="bold"
android:minWidth="180dp"
android:text="Try again"
android:textAlignment="center"
android:textColor="#000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/error_subtitle" />
<TextView
android:id="@+id/error_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:textStyle="bold"
android:text="We are unable to find the object"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="21sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/error_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="12dp"
android:text="Try to keep the camera steady"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="12sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/error_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
- 如果我需要使用
constraintSet如何重构我的布局(没有嵌套组)? - 还有其他方法可以实现吗?我觉得
constraintSet使用起来非常简单. - If I need to go with
constraintSethow to restructure my layout (without nested groups)? - Is there any other way we can achieve it? I feel like
constraintSetis much straight forward to use.
尝试调用此动画约束集，它将作为参数error_layout 传递嵌套约束.但结果没有变化:
Tried calling this animation constraint set which will pass nested constraint as param error_layout. But no changes on the result:
private void animateResult(ConstraintLayout constraint) {
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(this, R.layout.frameout_layout);
Transition transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1200);
TransitionManager.beginDelayedTransition(constraint, transition);
constraintSet.applyTo(constraint);
}
布局:
推荐答案
请记住，ConstraintSet Animation 与任何其他具有两个阶段的动画一样工作 - 动画开始和动画结束.所以，首先将视图约束设置为动画开始，这意味着隐藏在布局的底部.
Remember, ConstraintSet Animation works as any other animation with two stages - Animation Start and Animation End. So, First set the view constraint as Animation start which means hidden under bottom of the layout.
因此，将初始约束更改为:
So, Change the initial constraints as:
<!-- Here app:layout_constraintTop_toBottomOf will position the view under the layout/screen -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/error_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="40dp"
android:background="#fff"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
然后，将约束创建为
//rootLayout is the Id of the parent layout
val constraintSet = ConstraintSet()
constraintSet.clone(rootLayout)
constraintSet.clear(error_layout.id, ConstraintSet.TOP)
constraintSet.connect(error_layout.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
val transition: Transition = ChangeBounds()
transition.interpolator = AnticipateOvershootInterpolator(1.0f)
transition.duration = 1200
TransitionManager.beginDelayedTransition(rootLayout, transition)
constraintSet.applyTo(rootLayout)
然后，如果您想再次隐藏它.只需将 TOP 和 BOTTOM 替换为
Then, if you want to hide it again. Just replace the TOP and BOTTOM as
constraintSet.clear(error_layout.id, ConstraintSet.BOTTOM)
constraintSet.connect(error_layout.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
GIF 比编码花费的时间更多:p.
GIF took more time than coding :p.
EDIT - 要收听动画更新，尤其是按要求结束动画，您可以将 transition 上的侦听器设置为
EDIT - To listen to animation updates, especially Animation end as requested, what you can do is you can set a listener on transition as
transition.addListener(object : Transition.TransitionListener {
override fun onTransitionStart(transition: Transition) {
}
override fun onTransitionEnd(transition: Transition) {
}
override fun onTransitionCancel(transition: Transition) {
}
override fun onTransitionPause(transition: Transition) {
}
override fun onTransitionResume(transition: Transition) {
}
})
把它放在 beginDelayedTransition() 之前.
这篇关于如何为约束布局上的嵌套视图设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
