Android MotionLayout：如何处理初始GONE视图的动画问题

问题场景 #

• XML布局中目标视图初始可见性为GONE
• 接口请求响应完成后将视图设置为VISIBLE
• 点击按钮触发滑动动画时无法正常工作

原布局代码 #

主布局XML #

<androidx.constraintlayout.motion.widget.MotionLayout
   android:id="@+id/mlSpecContainer"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layoutDescription="@xml/view_motion">

   <!-- Header (Always visible) -->
   <ConstraintLayout
       android:id="@+id/headerLayout"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:visibility="visible"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent">

       <!-- Header content -->
   </ConstraintLayout>

   <!-- Content (Initially GONE) -->
   <ConstraintLayout
       android:id="@+id/contentLayout"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:visibility="gone"
       app:layout_constraintTop_toBottomOf="@id/headerLayout"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent">

       <!-- Content that should be animated -->
   </ConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>

MotionScene文件（view_motion.xml） #

<MotionScene>
    <Transition
        motion:constraintSetStart="@+id/expanded"
        motion:constraintSetEnd="@+id/collapsed"
        motion:duration="300">
        
        <OnClick
            motion:targetId="@id/button"
            motion:clickAction="toggle"/>
    </Transition>

    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@+id/contentLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintTop_toBottomOf="@id/headerLayout"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:translationY="0dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@+id/contentLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            motion:layout_constraintTop_toBottomOf="@id/headerLayout"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:translationY="-1000dp"/>
    </ConstraintSet> 
</MotionScene>

问题原因 #

MotionLayout初始化阶段会忽略GONE状态的视图，不会为其创建动画所需的约束记录与动画参数。即使后续将视图设置为VISIBLE，MotionLayout也不会自动重新识别该视图的约束配置，导致点击触发动画时无响应。

解决方案 #

方案1：初始设置为INVISIBLE替代GONE #

将目标视图初始可见性改为INVISIBLE，这样MotionLayout初始化时会识别该视图并生成动画所需的配置，数据加载完成后无需额外操作（或保持VISIBLE状态），动画即可正常触发。

修改后的contentLayout代码：

<!-- Content (Initially INVISIBLE) -->
<ConstraintLayout
    android:id="@+id/contentLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    app:layout_constraintTop_toBottomOf="@id/headerLayout"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <!-- Content that should be animated -->
</ConstraintLayout>

方案2：设置VISIBLE后强制MotionLayout重新加载 #

如果必须保留初始GONE状态，在将视图设置为VISIBLE后，调用MotionLayout的reload()方法，强制其重新加载MotionScene与约束配置，识别目标视图并初始化动画参数。

Kotlin代码示例：

// 接口请求完成后执行
contentLayout.visibility = View.VISIBLE
mlSpecContainer.reload()

方案3：在MotionScene中明确指定视图可见性 #

在两个ConstraintSet中都添加android:visibility="visible"，确保MotionLayout切换状态时强制视图保持可见。同时保持初始布局的GONE状态，数据加载后设置VISIBLE即可触发正常动画。

修改后的MotionScene代码：

<MotionScene>
    <Transition
        motion:constraintSetStart="@+id/expanded"
        motion:constraintSetEnd="@+id/collapsed"
        motion:duration="300">
        
        <OnClick
            motion:targetId="@id/button"
            motion:clickAction="toggle"/>
    </Transition>

    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@+id/contentLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:visibility="visible"
            motion:layout_constraintTop_toBottomOf="@id/headerLayout"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:translationY="0dp"/>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@+id/contentLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:visibility="visible"
            motion:layout_constraintTop_toBottomOf="@id/headerLayout"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:translationY="-1000dp"/>
    </ConstraintSet> 
</MotionScene>

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