Android中基于RecyclerView实现QuickReturn模式的技术方案咨询

我之前正好实现过和eBay App一模一样的QuickReturn交互效果——RecyclerView上滑时顶部自定义视图快速滑出屏幕，只要一往下滑，它就立刻跟着弹回来，完全懂你想要的那种体验。不用纠结CoordinatorLayout默认的Toolbar示例，这里给你两种靠谱的实现方案，你可以根据自己的布局场景选择：

方案1：纯RecyclerView滚动监听实现（简单直接，无需CoordinatorLayout） #

这种方案不需要依赖额外的布局组件，直接通过监听RecyclerView的滚动事件来控制顶部视图的显示/隐藏，适合布局结构简单的场景。

步骤1：编写布局文件 #

把你的QuickReturn视图和RecyclerView放在同一个垂直方向的父布局里（比如LinearLayout或FrameLayout）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 你的自定义QuickReturn顶部视图 -->
    <View
        android:id="@+id/quick_return_view"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FF5722"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

步骤2：添加滚动监听逻辑 #

在代码中获取顶部视图的高度，然后监听RecyclerView的滚动，根据滚动方向控制视图的translationY属性：

val quickReturnView = findViewById<View>(R.id.quick_return_view)
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)

var quickReturnHeight = 0
// 等待视图测量完成后获取真实高度
quickReturnView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        quickReturnHeight = quickReturnView.height
        quickReturnView.viewTreeObserver.removeOnGlobalLayoutListener(this)
    }
})

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        val currentTranslation = quickReturnView.translationY

        if (dy > 0) {
            // 上滑时：将顶部视图向上平移，直到完全隐藏
            val newTranslation = currentTranslation - dy
            quickReturnView.translationY = max(-quickReturnHeight.toFloat(), newTranslation)
        } else if (dy < 0) {
            // 下滑时：立刻将顶部视图恢复到初始位置
            quickReturnView.translationY = 0f
        }
    }
})

方案2：自定义CoordinatorLayout.Behavior（扩展性更强） #

如果你已经在使用CoordinatorLayout，或者需要和其他Material组件（比如FAB、AppBarLayout）配合，自定义Behavior是更优雅的选择，它能更好地融入CoordinatorLayout的滚动协调体系。

步骤1：编写CoordinatorLayout布局 #

给你的QuickReturn视图指定自定义Behavior：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/quick_return_view"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FF5722"
        app:layout_behavior=".QuickReturnBehavior"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

步骤2：实现自定义Behavior #

创建一个继承自CoordinatorLayout.Behavior的类，监听RecyclerView的滚动事件：

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

    private var viewHeight = 0

    override fun onLayoutChild(parent: CoordinatorLayout, child: View, layoutDirection: Int): Boolean {
        // 布局完成后获取视图高度
        viewHeight = child.height
        return super.onLayoutChild(parent, child, layoutDirection)
    }

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: View,
        directTargetChild: View,
        target: View,
        axes: Int,
        type: Int
    ): Boolean {
        // 只监听垂直方向的滚动
        return axes and ViewCompat.SCROLL_AXIS_VERTICAL != 0
    }

    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 currentTranslation = child.translationY

        if (dyConsumed > 0) {
            // 上滑隐藏：限制平移范围，避免过度隐藏
            val newTranslation = currentTranslation - dyConsumed
            child.translationY = max(-viewHeight.toFloat(), newTranslation)
        } else if (dyConsumed < 0) {
            // 下滑立刻显示
            child.translationY = 0f
        }
    }
}

额外优化提示 #

• 如果你想让上滑隐藏的过程更平滑，可以用ValueAnimator来做动画过渡，而不是直接修改translationY；
• 注意处理RecyclerView滚动到顶部的边界情况，比如当列表已经在顶部时，不要让顶部视图被隐藏；
• 两种方案都可以根据需求调整隐藏/显示的触发阈值，比如上滑超过多少距离才开始隐藏。

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