点击FAB时LinearLayout显隐，如何实现下方RecyclerView联动伸缩动画？

嘿，我来帮你搞定这个LinearLayout和RecyclerView粘连的展开/收起动画效果！要实现两者“无缝贴合、联动伸缩”的效果，核心是让布局约束和动画逻辑配合起来，下面分两种方案给你详细说明：

这种方式适合你已经有基础动画文件，想要自定义细节的场景：

1. 先调整布局结构 #

用ConstraintLayout来做父布局，让RecyclerView的顶部直接约束在可折叠LinearLayout的底部，这样布局会自动填充剩余空间：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 可折叠的LinearLayout -->
    <LinearLayout
        android:id="@+id/collapsible_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <!-- 这里放你要折叠的内容 -->
    </LinearLayout>

    <!-- 联动的RecyclerView -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/collapsible_layout"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 触发动画的FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_margin="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2. 编写动画逻辑 #

通过ValueAnimator动态修改LinearLayout的高度，RecyclerView会因为约束关系自动平滑伸缩：

private var isLayoutExpanded = false
private var collapsibleLayoutMaxHeight = 0 // 存储LinearLayout展开时的高度

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.your_activity_layout)

    val collapsibleLayout = findViewById<LinearLayout>(R.id.collapsible_layout)
    val fab = findViewById<FloatingActionButton>(R.id.fab)

    // 布局加载完成后获取LinearLayout的真实高度
    collapsibleLayout.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            collapsibleLayout.viewTreeObserver.removeOnGlobalLayoutListener(this)
            collapsibleLayoutMaxHeight = collapsibleLayout.height
            // 默认收起状态，先把高度设为0
            if (!isLayoutExpanded) {
                collapsibleLayout.layoutParams.height = 0
                collapsibleLayout.requestLayout()
            }
        }
    })

    // FAB点击事件触发动画
    fab.setOnClickListener {
        toggleCollapsibleLayout(collapsibleLayout)
        // 顺便切换FAB图标，提升交互体验
        fab.setImageResource(if (isLayoutExpanded) R.drawable.ic_collapse else R.drawable.ic_expand)
    }
}

private fun toggleCollapsibleLayout(layout: LinearLayout) {
    val targetHeight = if (isLayoutExpanded) 0 else collapsibleLayoutMaxHeight

    // 创建高度变化的动画
    val heightAnimator = ValueAnimator.ofInt(layout.height, targetHeight)
    heightAnimator.duration = 300 // 动画时长，可根据需求调整
    heightAnimator.addUpdateListener { animation ->
        val currentHeight = animation.animatedValue as Int
        layout.layoutParams.height = currentHeight
        layout.requestLayout()
    }
    heightAnimator.start()

    isLayoutExpanded = !isLayoutExpanded
}

如果不想写太多逻辑代码，ConstraintLayout的MotionLayout可以一键实现这种联动动画：

1. 修改布局为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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/motion_scene_collapse">

    <!-- 可折叠LinearLayout -->
    <LinearLayout
        android:id="@+id/collapsible_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent">
        <!-- 折叠内容 -->
    </LinearLayout>

    <!-- 联动RecyclerView -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/collapsible_layout"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- FAB按钮 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_margin="16dp"/>

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

2. 创建MotionScene配置文件 #

在res/xml目录下新建motion_scene_collapse.xml，定义收起/展开两种状态和过渡动画：

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

    <!-- 收起状态 -->
    <ConstraintSet android:id="@+id/collapsed_state">
        <Constraint android:id="@+id/collapsible_layout">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                motion:layout_constraintTop_toTopOf="parent"/>
        </Constraint>
        <Constraint android:id="@+id/recycler_view">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintBottom_toBottomOf="parent"/>
        </Constraint>
    </ConstraintSet>

    <!-- 展开状态 -->
    <ConstraintSet android:id="@+id/expanded_state">
        <Constraint android:id="@+id/collapsible_layout">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                motion:layout_constraintTop_toTopOf="parent"/>
        </Constraint>
        <Constraint android:id="@+id/recycler_view">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                motion:layout_constraintTop_toBottomOf="@id/collapsible_layout"
                motion:layout_constraintBottom_toBottomOf="parent"/>
        </Constraint>
    </ConstraintSet>

    <!-- 动画过渡规则 -->
    <Transition
        motion:constraintSetStart="@id/collapsed_state"
        motion:constraintSetEnd="@id/expanded_state"
        motion:duration="300">
        <OnClick motion:targetId="@+id/fab" motion:clickAction="toggle"/>
    </Transition>

</MotionScene>

两种方案都能实现你要的“粘连伸缩”效果：LinearLayout收起时，RecyclerView会平滑填充整个剩余屏幕；展开时，RecyclerView会跟着缩短，完美贴合LinearLayout底部。

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