如何为水平方向的RecyclerView添加左右渐变遮罩？

方法一：父布局嵌套渐变遮罩View（简单直接） #

通过在RecyclerView的父布局中添加两个带渐变背景的View，实现左右边缘的淡出效果：

1. 修改布局结构，用FrameLayout包裹RecyclerView：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/sizeRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal" />

    <!-- 左侧渐变遮罩 -->
    <View
        android:layout_width="20dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/gradient_left_shadow" />

    <!-- 右侧渐变遮罩 -->
    <View
        android:layout_width="20dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="@drawable/gradient_right_shadow" />
</FrameLayout>

2. 在res/drawable目录下创建两个渐变Drawable文件：

• gradient_left_shadow.xml（从透明过渡到白色）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#FFFFFF"
        android:angle="0" />
</shape>

• gradient_right_shadow.xml（从白色过渡到透明）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="@android:color/transparent"
        android:angle="0" />
</shape>

方法二：自定义ItemDecoration（灵活可控） #

如果需要根据滚动状态动态调整渐变显示，可以通过自定义ItemDecoration在RecyclerView边缘绘制渐变：

class GradientShadowDecoration(private val shadowWidth: Int) : RecyclerView.ItemDecoration() {
    private val leftGradient = LinearGradient(
        0f, 0f, shadowWidth.toFloat(), 0f,
        Color.TRANSPARENT, Color.WHITE,
        Shader.TileMode.CLAMP
    )
    private val rightGradient = LinearGradient(
        0f, 0f, shadowWidth.toFloat(), 0f,
        Color.WHITE, Color.TRANSPARENT,
        Shader.TileMode.CLAMP
    )
    private val paint = Paint().apply { isAntiAlias = true }

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)
        val top = parent.top
        val bottom = parent.bottom

        // 绘制左侧渐变
        paint.shader = leftGradient
        c.drawRect(parent.left.toFloat(), top.toFloat(), (parent.left + shadowWidth).toFloat(), bottom.toFloat(), paint)

        // 绘制右侧渐变
        paint.shader = rightGradient
        c.drawRect((parent.right - shadowWidth).toFloat(), top.toFloat(), parent.right.toFloat(), bottom.toFloat(), paint)
    }
}

在代码中为RecyclerView添加该Decoration：

val shadowWidth = resources.getDimensionPixelSize(R.dimen.shadow_width) // 可在dimens.xml中定义20dp
sizeRecyclerView.addItemDecoration(GradientShadowDecoration(shadowWidth))

注意事项 #

• 渐变宽度可根据需求调整，建议在dimens.xml中统一定义
• 若RecyclerView有自定义背景色，需将渐变的endColor替换为对应背景色
• 方法一中的遮罩View不会遮挡RecyclerView的触摸交互，透明区域会自动透传点击事件

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