如何在ViewPager中遮罩圆角的过度滚动效果？Android滚动问题求助

嘿，这个问题我之前做项目时也碰到过——ViewPager拉到边缘时的过度滚动效果默认是方方正正的，和圆角UI风格完全不搭对吧？别担心，有几个靠谱的方案可以解决，我给你一一拆解：

方法一：自定义ViewPager通过Canvas裁剪 #

核心思路是对ViewPager的整个绘制画布做圆角裁剪，系统自带的过度滚动反馈也会被一起裁剪。你只需要自定义一个继承ViewPager的类，重写画布裁剪逻辑就行：

class RoundCornerViewPager(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
    // 可自定义圆角大小，也能通过自定义属性从XML读取
    private val cornerRadius = 24f
    private val clipPath = Path()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // 重新创建圆角矩形路径
        clipPath.reset()
        clipPath.addRoundRect(
            0f, 0f, w.toFloat(), h.toFloat(),
            cornerRadius, cornerRadius,
            Path.Direction.CW
        )
        clipPath.close()
    }

    override fun dispatchDraw(canvas: Canvas) {
        // 保存画布状态，裁剪后恢复
        val saveCount = canvas.save()
        canvas.clipPath(clipPath)
        super.dispatchDraw(canvas)
        canvas.restoreToCount(saveCount)
    }
}

之后在XML里用这个自定义View替换原生ViewPager即可。注意如果给ViewPager设置了背景色，记得把背景也改成圆角，不然会露出矩形背景边缘。

方法二：利用系统ViewOutlineProvider实现高效裁剪 #

Android官方提供的ViewOutlineProvider支持硬件加速的视图轮廓裁剪，性能比Canvas裁剪更好，代码也更简洁：

// 初始化ViewPager后设置
val viewPager = findViewById<ViewPager>(R.id.viewPager)
viewPager.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        // 设置圆角矩形轮廓，最后一个参数为圆角半径
        outline.setRoundRect(0, 0, view.width, view.height, 24f)
    }
}
// 开启裁剪到轮廓
viewPager.clipToOutline = true

这个方案的优势是硬件加速支持更好，不会有性能损耗，但要注意clipToOutline只支持矩形、圆角矩形和圆形裁剪，复杂形状就不适用了，不过刚好匹配我们的圆角需求。

方法三：借助CardView快速实现（最省心） #

如果你的ViewPager本来就嵌套在CardView里，直接利用CardView的圆角特性就能搞定，几乎不用写额外代码：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardCornerRadius="24dp"
    app:cardElevation="4dp"
    android:clipChildren="true"> <!-- 关键：开启子视图裁剪 -->

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"/> <!-- 透明背景避免露出矩形 -->

</androidx.cardview.widget.CardView>

把CardView的clipChildren设为true后，ViewPager的所有内容（包括过度滚动效果）都会被CardView的圆角遮罩，这是最省心的快速实现方案。

最后小提醒 #

• 如果ViewPager设置了padding，记得裁剪时把padding区域算进去，避免裁剪错位；
• 测试时一定要拉到页面边缘，确认过度滚动的弹性反馈也被裁剪成圆角了~

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