Android 如何实现指定样式的重叠RecyclerView布局效果？

该效果可以稳定实现，你此前用ItemDecoration、StackView无法达到预期，核心原因是这两种方案都无法灵活控制子View的堆叠顺序、滚动联动和缩放偏移规则，最优实现方案是自定义RecyclerView.LayoutManager。

具体实现步骤 #

• 自定义LayoutManager，重写onLayoutChildren方法，布局子View时统一计算每个Item的偏移量和缩放比例，实现下层Item边缘露出的效果
• 重写getChildDrawingOrder方法，调整子View绘制顺序，确保最上层的Item最后绘制，不会被下层Item遮挡
• 根据滚动方向重写对应的滚动方法（横向滚动重写scrollHorizontallyBy、纵向滚动重写scrollVerticallyBy），实现滚动时所有Item的联动效果
• 可通过构造参数暴露重叠偏移量、缩放比例等配置项，方便调整效果

核心代码示例 #

class OverlapLayoutManager(
    // 相邻Item的重叠像素值，数值越大重叠区域越多
    private val overlapOffset: Int = 80,
    // 下层Item的缩放比例，数值越小下层Item缩得越小
    private val itemScaleFactor: Float = 0.9f
) : RecyclerView.LayoutManager(), RecyclerView.SmoothScroller.ScrollVectorProvider {

    override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
        return RecyclerView.LayoutParams(
            RecyclerView.LayoutParams.WRAP_CONTENT,
            RecyclerView.LayoutParams.WRAP_CONTENT
        )
    }

    override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
        if (itemCount == 0) {
            removeAndRecycleAllViews(recycler)
            return
        }
        detachAndScrapAttachedViews(recycler)
        var currentLayoutOffset = 0
        for (position in 0 until itemCount) {
            val itemView = recycler.getViewForPosition(position)
            addView(itemView)
            measureChildWithMargins(itemView, 0, 0)
            val itemWidth = getDecoratedMeasuredWidth(itemView)
            val itemHeight = getDecoratedMeasuredHeight(itemView)
            // 按位置计算缩放比例，越靠后的Item缩放值越小
            val scale = Math.pow(itemScaleFactor.toDouble(), (itemCount - 1 - position).toDouble()).toFloat()
            itemView.scaleX = scale
            itemView.scaleY = scale
            // 布局Item，计算偏移量
            layoutDecoratedWithMargins(
                itemView,
                currentLayoutOffset,
                0,
                currentLayoutOffset + itemWidth,
                itemHeight
            )
            currentLayoutOffset += (itemWidth * scale - overlapOffset).toInt()
        }
        // 开启自定义绘制顺序
        childrenDrawingOrderEnabled = true
    }

    override fun getChildDrawingOrder(childCount: Int, index: Int): Int {
        // 反转绘制顺序，位置越靠后的Item绘制层级越高
        return childCount - 1 - index
    }

    // 横向滚动逻辑，如需要纵向滚动可替换为对应方法
    override fun scrollHorizontallyBy(dx: Int, recycler: RecyclerView.Recycler, state: RecyclerView.State): Int {
        offsetChildrenHorizontal(-dx)
        return dx
    }

    override fun canScrollHorizontally(): Boolean = true

    override fun computeScrollVectorForPosition(targetPosition: Int): PointF? {
        return PointF((targetPosition - findFirstVisiblePosition()).toFloat(), 0f)
    }

    private fun findFirstVisiblePosition(): Int {
        if (childCount == 0) return 0
        return getPosition(getChildAt(0)!!)
    }
}

使用方式 #

直接给RecyclerView设置该LayoutManager即可：

recyclerView.layoutManager = OverlapLayoutManager(
    overlapOffset = 100,
    itemScaleFactor = 0.92f
)

你可以根据自己的需求调整overlapOffset和itemScaleFactor的数值，达到预期的重叠效果。

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