如何用AndroidX MotionLayout实现类YouTube底部播放栏？

问题总结 #

你在实现过程中遇到两个核心问题：

1. 动画直接从0跳转到100，无平滑过渡
2. 调整后内部UI动画正常，但FragmentContainerView无法折叠，始终全屏，无法复刻BottomSheetBehavior的效果

解决方案 #

1. 修复动画跳变问题

动画跳变通常是因为MotionScene中未定义过渡的插值逻辑或关键帧缺失，需确保：

• 为过渡添加合适的插值器（比如线性或减速插值）
• 为目标视图设置多阶段关键帧，而非仅定义开始/结束状态

示例MotionScene过渡配置：

<Transition
    app:constraintSetStart="@id/collapsed"
    app:constraintSetEnd="@id/expanded"
    app:duration="500"
    app:motionInterpolator="decelerate">
    <!-- 可选：添加中间关键帧细化过渡效果 -->
    <KeyFrameSet>
        <KeyAttribute
            app:framePosition="0"
            app:alpha="0.8"/>
        <KeyAttribute
            app:framePosition="100"
            app:alpha="1.0"/>
    </KeyFrameSet>
</Transition>

2. 解决FragmentContainerView无法折叠的问题

核心是确保MotionLayout作为根容器，且为FragmentContainerView明确定义折叠/展开状态的约束，同时配合Fragment内部布局的高度限制：

步骤1：Activity根布局设为MotionLayout

<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_motion_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/playback_motion_scene">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/playback_fragment_container"
        android:name="com.yourpackage.PlaybackFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

步骤2：在MotionScene中定义折叠/展开约束集

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- 折叠状态：固定底部高度 -->
    <ConstraintSet android:id="@id/collapsed">
        <Constraint
            android:id="@id/playback_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </ConstraintSet>

    <!-- 展开状态：全屏 -->
    <ConstraintSet android:id="@id/expanded">
        <Constraint
            android:id="@id/playback_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </ConstraintSet>

    <!-- 滑动过渡配置 -->
    <Transition
        app:constraintSetStart="@id/collapsed"
        app:constraintSetEnd="@id/expanded"
        app:duration="500"
        app:motionInterpolator="decelerate">
        <OnSwipe
            app:dragDirection="dragUp"
            app:touchAnchorId="@id/playback_fragment_container"
            app:touchAnchorSide="top"/>
    </Transition>
</MotionScene>

步骤3：Fragment内部布局设置最小高度

确保Fragment根布局有折叠状态的最小高度，避免内容被截断：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="64dp"
    android:orientation="vertical">

    <!-- 底部播放栏（折叠时显示） -->
    <RelativeLayout
        android:id="@+id/playback_bar"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:background="#1a1a1a">
        <!-- 播放控件 -->
    </RelativeLayout>

    <!-- 展开后的内容区域 -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <!-- 内容 -->
    </ScrollView>

</LinearLayout>

3. 兼容性问题处理

如果以上配置仍无效，尝试：

• 升级ConstraintLayout到最新稳定版本（如2.1.4或更高）
• 移除FragmentContainerView上的android:fitsSystemWindows="true"，或同步MotionLayout的系统窗口适配设置
• 在Fragment的onViewCreated中手动触发初始折叠状态：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val rootMotionLayout = requireActivity().findViewById<MotionLayout>(R.id.root_motion_layout)
    rootMotionLayout.transitionToState(R.id.collapsed)
}

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