RecyclerView列表超出屏幕时实现边缘渐隐效果的方法

嘿，我来帮你搞定这个RecyclerView滚动边缘渐隐的问题！你想要的是只有当列表内容超出屏幕、能滚动时才显示上下边缘的渐隐效果对吧？我有两个亲测有效的方案，你可以根据自己的习惯选：

这个方案通过自定义RecyclerView的装饰类，在滚动时动态绘制渐变遮罩，不需要额外的布局元素，代码更简洁。

步骤1：创建自定义Decoration类 #

import android.graphics.Canvas
import android.graphics.Color
import android.graphics.LinearGradient
import android.graphics.Paint
import android.graphics.Shader
import android.view.View
import androidx.recyclerview.widget.RecyclerView
import android.util.TypedValue

class ScrollEdgeGradientDecoration(
    private val gradientHeightDp: Int = 32, // 渐变区域高度，单位dp
    private val endColor: Int = Color.WHITE // 替换成你的父布局背景色
) : RecyclerView.ItemDecoration() {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private lateinit var linearGradientTop: LinearGradient
    private lateinit var linearGradientBottom: LinearGradient
    private var gradientHeightPx = 0

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

        // 初始化像素高度和渐变（只执行一次）
        if (gradientHeightPx == 0) {
            gradientHeightPx = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                gradientHeightDp.toFloat(),
                parent.resources.displayMetrics
            ).toInt()
            linearGradientTop = LinearGradient(
                0f, 0f, 0f, gradientHeightPx.toFloat(),
                endColor, Color.TRANSPARENT, Shader.TileMode.CLAMP
            )
            linearGradientBottom = LinearGradient(
                0f, 0f, 0f, gradientHeightPx.toFloat(),
                Color.TRANSPARENT, endColor, Shader.TileMode.CLAMP
            )
        }

        // 顶部渐变：仅当列表可向上滚动时绘制
        if (parent.canScrollVertically(-1)) {
            paint.shader = linearGradientTop
            c.drawRect(
                parent.paddingLeft.toFloat(),
                parent.paddingTop.toFloat(),
                (parent.width - parent.paddingRight).toFloat(),
                (parent.paddingTop + gradientHeightPx).toFloat(),
                paint
            )
        }

        // 底部渐变：仅当列表可向下滚动时绘制
        if (parent.canScrollVertically(1)) {
            paint.shader = linearGradientBottom
            val bottomStartY = parent.height - parent.paddingBottom - gradientHeightPx
            c.drawRect(
                parent.paddingLeft.toFloat(),
                bottomStartY.toFloat(),
                (parent.width - parent.paddingRight).toFloat(),
                (parent.height - parent.paddingBottom).toFloat(),
                paint
            )
        }
    }
}

步骤2：给RecyclerView添加Decoration #

在你的Activity/Fragment中，找到RecyclerView并添加这个装饰：

val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
// 这里可以自定义渐变高度和颜色，比如ScrollEdgeGradientDecoration(40, Color.parseColor("#F5F5F5"))
recyclerView.addItemDecoration(ScrollEdgeGradientDecoration())

这个方案通过在RecyclerView上下方添加两个渐变背景的View，再通过滚动监听控制它们的显示/隐藏，适合喜欢可视化布局的开发者。

步骤1：创建渐变背景Drawable #

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

• gradient_top.xml（顶部渐变，从背景色过渡到透明）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/white" <!-- 替换成你的父布局背景色 -->
        android:endColor="@android:color/transparent"
        android:angle="270" /> <!-- 从上到下渐变 -->
</shape>

• gradient_bottom.xml（底部渐变，从透明过渡到背景色）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="@color/white" <!-- 替换成你的父布局背景色 -->
        android:angle="270" />
</shape>

步骤2：修改ConstraintLayout布局 #

在RecyclerView的上下方添加渐变遮罩View：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"> <!-- 确保背景色和渐变一致 -->

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 顶部渐变遮罩 -->
    <View
        android:id="@+id/topGradientView"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:background="@drawable/gradient_top"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- 底部渐变遮罩 -->
    <View
        android:id="@+id/bottomGradientView"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:background="@drawable/gradient_bottom"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

步骤3：添加滚动监听控制显示 #

在代码中给RecyclerView设置滚动监听，动态切换遮罩的可见性：

val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
val topGradientView = findViewById<View>(R.id.topGradientView)
val bottomGradientView = findViewById<View>(R.id.bottomGradientView)

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        // 判断是否可向上滚动，显示/隐藏顶部遮罩
        topGradientView.visibility = if (recyclerView.canScrollVertically(-1)) View.VISIBLE else View.GONE
        // 判断是否可向下滚动，显示/隐藏底部遮罩
        bottomGradientView.visibility = if (recyclerView.canScrollVertically(1)) View.VISIBLE else View.GONE
    }
})

• 颜色匹配：渐变的实色部分必须和RecyclerView的父布局（这里是ConstraintLayout）背景色完全一致，否则会出现突兀的色块。
• 渐变高度：可以根据视觉需求调整渐变区域的高度（比如32dp、40dp），找到最自然的效果。
• Padding适配：如果RecyclerView设置了padding，方案一中的onDrawOver方法已经考虑了padding，方案二需要给遮罩View添加对应的margin来匹配。

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