Android嵌套ConstraintLayout动画异常问题求助

这个问题我之前也碰到过，核心是ConstraintLayout的动画时序冲突——当子布局从GONE切到VISIBLE时，它的布局测量/绘制流程还没走完，此时直接修改内部TextView的约束会打乱布局计算，导致文本截断、背景闪烁这类异常。下面给你几个靠谱的解决思路，亲测有效：

思路1：用AutoTransition统一管理动画时序 #

ConstraintLayout的TransitionManager配合AutoTransition可以自动处理View的可见性变化（淡入淡出）和布局约束变化，避免手动拆分动画导致的冲突。

代码实现 #

先看布局结构（示例）：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/trigger_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:text="触发动画"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/child_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:visibility="gone"
        android:background="#eee"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试文本"
            app:layout_constraintVertical_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

然后是逻辑代码：

val triggerBtn = findViewById<Button>(R.id.trigger_btn)
val rootLayout = findViewById<ConstraintLayout>(R.id.root_layout)
val childLayout = findViewById<ConstraintLayout>(R.id.child_layout)
val tvContent = findViewById<TextView>(R.id.tv_content)

// 记录TextView的初始和目标bias
val initialBias = 0.5f
val targetBias = 0.2f
var isExpanded = false

triggerBtn.setOnClickListener {
    if (!isExpanded) {
        // 组合淡入+约束动画
        val transitionSet = TransitionSet().apply {
            addTransition(Fade(Fade.IN)) // 子布局淡入
            addTransition(ChangeBounds()) // 约束变化动画
            duration = 450 // 统一动画时长
        }

        TransitionManager.beginDelayedTransition(rootLayout, transitionSet)
        // 先设置子布局可见
        childLayout.visibility = View.VISIBLE
        // 再修改TextView的bias
        val constraintSet = ConstraintSet()
        constraintSet.clone(childLayout)
        constraintSet.setVerticalBias(R.id.tv_content, targetBias)
        constraintSet.applyTo(childLayout)
        isExpanded = true
    } else {
        // 反向动画：先恢复TextView位置，再隐藏子布局
        val transitionSet = TransitionSet().apply {
            addTransition(ChangeBounds())
            addTransition(Fade(Fade.OUT))
            duration = 450
        }

        TransitionManager.beginDelayedTransition(rootLayout, transitionSet)
        val constraintSet = ConstraintSet()
        constraintSet.clone(childLayout)
        constraintSet.setVerticalBias(R.id.tv_content, initialBias)
        constraintSet.applyTo(childLayout)
        childLayout.visibility = View.GONE
        isExpanded = false
    }
}

思路2：监听子布局绘制时机，精准触发内部动画 #

如果必须拆分动画，不要用固定延迟，而是通过ViewTreeObserver.OnPreDrawListener监听子布局的首次绘制完成时机，此时再启动TextView的约束动画，能完美避免布局计算冲突。

核心代码片段 #

triggerBtn.setOnClickListener {
    if (childLayout.visibility == View.GONE) {
        // 第一步：启动子布局淡入动画
        TransitionManager.beginDelayedTransition(rootLayout, AutoTransition().apply {
            duration = 450
        })
        childLayout.visibility = View.VISIBLE

        // 监听子布局首次绘制完成，再启动TextView动画
        childLayout.viewTreeObserver.addOnPreDrawListener(object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                childLayout.viewTreeObserver.removeOnPreDrawListener(this)
                // 启动TextView的约束动画
                TransitionManager.beginDelayedTransition(childLayout)
                val constraintSet = ConstraintSet()
                constraintSet.clone(childLayout)
                constraintSet.setVerticalBias(R.id.tv_content, targetBias)
                constraintSet.applyTo(childLayout)
                isExpanded = true
                return true
            }
        })
    } else {
        // 反向逻辑：先恢复TextView位置，再隐藏子布局
        TransitionManager.beginDelayedTransition(childLayout)
        val constraintSet = ConstraintSet()
        constraintSet.clone(childLayout)
        constraintSet.setVerticalBias(R.id.tv_content, initialBias)
        constraintSet.applyTo(childLayout)

        // 等待TextView动画完成后隐藏子布局
        tvContent.postOnAnimation {
            TransitionManager.beginDelayedTransition(rootLayout, AutoTransition().apply {
                duration = 450
            })
            childLayout.visibility = View.GONE
            isExpanded = false
        }
    }
}

关键注意点 #

• 不要同时对根布局和子布局启动独立的ConstraintSet动画，因为ConstraintLayout的过渡动画依赖当前布局状态，并行操作会导致状态冲突。
• 避免使用固定延迟（比如1ms/50ms），不同设备的布局绘制时长差异很大，固定延迟无法适配所有场景，OnPreDrawListener是更可靠的方式。
• 如果需要更精细的动画控制，可以自定义Transition组合淡入、平移等效果，确保所有动画的时序统一。

内容的提问来源于stack exchange，提问作者yennsarah