如何实现带滚动交互的App布局？已试BottomSheet+CoordinatorLayout未果

嘿，我完全懂你这种卡壳的感觉——折腾了两天用BottomSheet+CoordinatorLayout没搞定，那种不流畅的突兀感确实闹心。你想转向自定义CoordinatorLayout Behavior绝对是找对了路子，这种高度定制的滚动交互，自定义Behavior就是最佳方案！

先明确咱们要实现的核心交互逻辑：

• Layout A：固定顶部，不参与滚动
• Layout C：默认显示在底部，向上滚动时随Layout D的出现逐渐淡出
• Layout D：默认隐藏在底部，向上滚动时滑入覆盖Layout C，完全显示后才允许Layout B滚动
• Layout B：中间可滚动内容，只有当Layout D完全覆盖Layout C后才开始滚动；向下滚动时先滚回顶部，再触发Layout D下滑、Layout C淡入

下面是具体实现步骤：

1. 搭建基础布局结构 #

首先用CoordinatorLayout作为根容器，依次放置四个布局，注意Layout C和Layout D都要设置android:layout_gravity="bottom"让它们锚定在底部：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <!-- Layout A: 固定顶部的AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:title="Layout A" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- Layout B: 中间可滚动内容 -->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/layout_b"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 替换成你的长内容，比如列表、文本等 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/long_scrollable_content"
            android:padding="16dp"
            android:textSize="18sp"/>

    </androidx.core.widget.NestedScrollView>

    <!-- Layout C: 默认显示的底部区域 -->
    <FrameLayout
        android:id="@+id/layout_c"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="@color/teal_200">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Layout C"
            android:textColor="@color/white"
            android:textSize="24sp"/>

    </FrameLayout>

    <!-- Layout D: 默认隐藏的底部区域，绑定自定义Behavior -->
    <FrameLayout
        android:id="@+id/layout_d"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="@color/orange"
        app:layout_behavior=".CustomBottomBehavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Layout D"
            android:textColor="@color/white"
            android:textSize="24sp"/>

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 编写自定义CoordinatorLayout Behavior #

核心逻辑都在这个Behavior里，它会监听滚动事件，分阶段控制Layout C、D的显示状态和Layout B的滚动权限：

class CustomBottomBehavior(context: Context, attrs: AttributeSet) : CoordinatorLayout.Behavior<View>(context, attrs) {

    private var layoutDHeight = 0
    private var currentScrollOffset = 0
    private var isInTransition = false

    // 初始化Layout D的位置，默认隐藏在底部
    override fun onLayoutChild(parent: CoordinatorLayout, child: View, layoutDirection: Int): Boolean {
        layoutDHeight = child.height
        child.translationY = layoutDHeight.toFloat()
        return super.onLayoutChild(parent, child, layoutDirection)
    }

    // 开启垂直滚动监听
    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    // 处理滚动事件，分阶段更新布局状态
    override fun onNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        target: View,
        dxConsumed: Int,
        dyConsumed: Int,
        dxUnconsumed: Int,
        dyUnconsumed: Int,
        type: Int,
        consumed: IntArray
    ) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type, consumed)

        val layoutC = coordinatorLayout.findViewById<View>(R.id.layout_c)
        val layoutB = coordinatorLayout.findViewById<NestedScrollView>(R.id.layout_b)

        currentScrollOffset += dyConsumed

        when {
            // 向上滚动逻辑
            dyConsumed > 0 -> {
                when {
                    // 阶段1：Layout D上滑，Layout C淡出，消耗滚动事件不让Layout B动
                    currentScrollOffset <= layoutDHeight && child.translationY > 0 -> {
                        val targetTranslationY = layoutDHeight - currentScrollOffset
                        child.translationY = targetTranslationY.toFloat()
                        // 计算Layout C的透明度：从1平滑降到0
                        layoutC.alpha = 1 - (currentScrollOffset.toFloat() / layoutDHeight)
                        // 消耗本次滚动，不让Layout B响应
                        consumed[1] = dyConsumed
                    }
                    // 阶段2：Layout D完全显示，放开Layout B的滚动权限
                    currentScrollOffset > layoutDHeight -> {
                        if (!isInTransition) {
                            layoutC.alpha = 0f
                            isInTransition = true
                        }
                        // 不消耗滚动，让Layout B正常滚动
                    }
                }
            }
            // 向下滚动逻辑
            dyConsumed < 0 -> {
                when {
                    // 阶段1：先让Layout B滚回顶部，再处理底部布局
                    layoutB.scrollY > 0 -> {
                        // 不消耗滚动，让Layout B先回到顶部
                    }
                    // 阶段2：Layout D下滑，Layout C淡入，消耗滚动事件
                    layoutB.scrollY == 0 && currentScrollOffset > 0 -> {
                        currentScrollOffset += dyConsumed
                        if (currentScrollOffset < 0) currentScrollOffset = 0
                        val targetTranslationY = layoutDHeight - currentScrollOffset
                        child.translationY = targetTranslationY.toFloat()
                        layoutC.alpha = 1 - (currentScrollOffset.toFloat() / layoutDHeight)
                        consumed[1] = dyConsumed
                        isInTransition = false
                    }
                }
            }
        }
    }

    // 处理快速滚动（fling），避免状态错乱
    override fun onNestedPreFling(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        target: View,
        velocityX: Float,
        velocityY: Float
    ): Boolean {
        val layoutB = coordinatorLayout.findViewById<NestedScrollView>(R.id.layout_b)
        // 如果Layout B在顶部，且处于过渡状态，消耗快速下滑事件，自己处理平滑过渡
        if (layoutB.scrollY == 0 && currentScrollOffset > 0 && velocityY < 0) {
            return true
        }
        return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY)
    }
}

3. 优化建议 #

• 可配置高度：可以给Layout D添加自定义属性，让高度在XML中可配置，不用硬编码200dp
• 平滑过渡补全：当滚动停止在过渡中间时，用ValueAnimator自动完成剩余的过渡动画，提升体验
• 滚动阈值：添加最小滚动距离阈值，避免轻微滚动就触发过渡逻辑
• 适配测试：在不同屏幕尺寸（尤其是折叠屏）上测试，确保布局和交互正常

这样实现的话，就能完全匹配你想要的平滑滚动过渡效果，比BottomSheet灵活太多啦！

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