如何自行实现示例图中居中显示的RecyclerView（或ViewPager）效果

数据老陈

2026-9-30

居中卡片轮播效果实现方案

方案1：RecyclerView + LinearSnapHelper 实现

初始化横向滚动的LinearLayoutManager绑定到RecyclerView
挂载LinearSnapHelper实现滚动结束后自动将最近的item对齐到屏幕中心，核心参考代码：

// 绑定布局管理器
val horizontalManager = LinearLayoutManager(context, RecyclerView.HORIZONTAL, false)
recyclerView.layoutManager = horizontalManager
// 挂载对齐工具
LinearSnapHelper().attachToRecyclerView(recyclerView)

自定义ItemDecoration调整item间距：首尾item增加额外的左右边距，保证首项和尾项也能正常居中，中间item设置统一的左右间距，实现滚动时前后item露出部分的效果
若需要卡片滚动时的缩放、透明度渐变动效，可以自定义RecyclerView.OnScrollListener，在onScrolled回调中计算每个可见item到中心的距离，按比例设置缩放值和透明度，越靠近中心的卡片尺寸越大、透明度越高

方案2：ViewPager2 实现（适配成本更低）

ViewPager2本身自带滚动对齐能力，无需额外引入对齐工具
开启离屏加载viewPager2.offscreenPageLimit = 3，保证前后相邻页面提前加载，滚动更流畅
设置clipToPadding = false，同时给ViewPager2设置左右padding，即可实现前后卡片部分露出的视觉效果
自定义PageTransformer实现滚动时的卡片动效，参考代码：

viewPager2.setPageTransformer { page, position ->
    val absPos = kotlin.math.abs(position)
    // 缩放效果：中心卡片为1，两边最大缩小到0.8
    val scale = 1f - 0.2f * absPos
    page.scaleX = scale
    page.scaleY = scale
    // 透明度效果：中心卡片为1，两边最低透明度为0.5
    page.alpha = 1f - 0.5f * absPos
}