Android自定义ScrollView：实现顶部纯色渐隐边并禁用底部渐隐

渐变效果的成因 #

1. 系统默认渐隐边未完全关闭：你在布局中设置了android:requiresFadingEdge="vertical"，同时代码里调用了setFadingEdgeLength，系统会自动绘制顶部的渐变渐隐边。即使你自己绘制了纯色块，系统的渐变效果会叠加在上方，导致出现微弱的透明度混合。
2. 单位不统一：代码中fadeHeight是100px，而布局里android:fadingEdgeLength="140dp"，两者单位不一致，导致实际显示的高度和预期不符，也会加剧视觉上的混乱。
3. 绘制顺序问题：onDraw中先调用super.onDraw(canvas)，系统会先绘制默认的渐变渐隐边，之后你再绘制纯色块，渐变的透明度会和纯色块混合，看起来仍有渐变效果。

实现需求的修改方案 #

1. 修改自定义ScrollView代码 #

class TopFadeEdgeScrollView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ScrollView(context, attrs, defStyleAttr) {

    private val fadeHeight: Int // 转成px的顶部纯色块高度
    private val solidColor = Color.parseColor("#232325")
    private val paint = Paint().apply {
        color = solidColor
        style = Paint.Style.FILL
    }

    init {
        // 完全关闭系统的渐隐边
        requiresFadingEdge = View.NO_FADING_EDGE
        // 将140dp转成px，和布局里的预期高度一致
        fadeHeight = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            140f,
            context.resources.displayMetrics
        ).toInt()
    }

    // 确保底部渐隐边完全禁用
    override fun getBottomFadingEdgeStrength(): Float {
        return 0.0f
    }

    // 关闭顶部系统渐隐边的强度
    override fun getTopFadingEdgeStrength(): Float {
        return 0.0f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制顶部纯色块，覆盖在内容上方
        canvas.drawRect(0f, 0f, width.toFloat(), fadeHeight.toFloat(), paint)
    }
}

2. 调整布局文件 #

移除布局中与系统渐隐边相关的属性，避免冲突：

<?xml version="1.0" encoding="utf-8"?>
<com.example.anymax_v1.TopFadeEdgeScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutDirection="rtl"
        android:orientation="vertical">

        <include layout="@layout/home_pinned_episode_recycle" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="1500dp"
            android:background="@color/purplemain"
            android:text="@string/app_name" />

    </LinearLayout>
</com.example.anymax_v1.TopFadeEdgeScrollView>

关键说明 #

• 通过requiresFadingEdge = View.NO_FADING_EDGE彻底关闭系统的渐隐边绘制，避免默认渐变效果干扰。
• 将dp转成px保证在不同分辨率设备上显示高度一致。
• 重写getTopFadingEdgeStrength返回0，进一步确保顶部不会出现系统的渐变效果。
• 纯色块绘制在super.onDraw之后，确保它会覆盖在ScrollView的内容上方，符合顶部遮罩的预期。

内容的提问来源于stack exchange，提问作者Lalmi Mohammed Issam