Android 实现View边缘渐入渐出

前言

  有时候做项目的时候，遇到滚动的RecyclerView或者ScrollView滚动到边缘要展示渐入渐出效果，如果是使用图片设置的话，图片的背景色可能与当前整个视图的背景颜色冲突，并且图片也会增大Apk体积。有没有什么好的方法可以使用代码去设置呢？其实系统View里面已经存在在滚动到View边缘设置渐入渐出效果，接下来直接贴出一份自定义的ScrollView代码。

代码部分

/**
 * 边缘阴影效果的view
 */
class FadeScrollView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
) : NestedScrollView(context, attrs, defStyleAttr) {

    companion object {
        //渐变从0-1.0
        private const val DEFAULT_FADING_EDGE_ENABLED = false
        private const val DEFAULT_FADING_EDGE_STRENGTH = 0.9f
    }

    private var horizontalFadeEdgeEnabled = DEFAULT_FADING_EDGE_ENABLED
    private var verticalFadeEdgeEnabled = DEFAULT_FADING_EDGE_ENABLED
    private var topFadeEdgeStrength = DEFAULT_FADING_EDGE_STRENGTH
    private var bottomFadeEdgeStrength = DEFAULT_FADING_EDGE_STRENGTH
    private var leftFadeEdgeStrength = DEFAULT_FADING_EDGE_STRENGTH
    private var rightFadeEdgeStrength = DEFAULT_FADING_EDGE_STRENGTH

    init {
        val array = context.obtainStyledAttributes(attrs, R.styleable.FadeScrollView, defStyleAttr, 0)
        horizontalFadeEdgeEnabled = array.getBoolean(R.styleable.FadeScrollView_horizontalFadingEdgeEnabled, horizontalFadeEdgeEnabled)
        verticalFadeEdgeEnabled = array.getBoolean(R.styleable.FadeScrollView_verticalFadingEdgeEnabled, verticalFadeEdgeEnabled)
        topFadeEdgeStrength = array.getFloat(R.styleable.FadeScrollView_topFadingEdgeStrength, topFadingEdgeStrength)
        bottomFadeEdgeStrength = array.getFloat(R.styleable.FadeScrollView_bottomFadingEdgeStrength, bottomFadeEdgeStrength)
        leftFadeEdgeStrength = array.getFloat(R.styleable.FadeScrollView_leftFadingEdgeStrength, leftFadeEdgeStrength)
        rightFadeEdgeStrength = array.getFloat(R.styleable.FadeScrollView_rightFadingEdgeStrength, rightFadeEdgeStrength)
        array.recycle()
        isHorizontalFadingEdgeEnabled = horizontalFadeEdgeEnabled
        isVerticalFadingEdgeEnabled = verticalFadeEdgeEnabled
    }

    override fun getTopFadingEdgeStrength(): Float {
        return getFadingEdgeStrength(verticalFadeEdgeEnabled, topFadeEdgeStrength)
    }

    override fun getBottomFadingEdgeStrength(): Float {
        return getFadingEdgeStrength(verticalFadeEdgeEnabled, bottomFadeEdgeStrength)
    }

    override fun getLeftFadingEdgeStrength(): Float {
        return getFadingEdgeStrength(horizontalFadeEdgeEnabled, leftFadeEdgeStrength)
    }

    override fun getRightFadingEdgeStrength(): Float {
        return getFadingEdgeStrength(horizontalFadeEdgeEnabled, rightFadeEdgeStrength)
    }

    private fun getFadingEdgeStrength(fadeEdgeEnabled: Boolean, fadeEdgeStrength: Float): Float {
        return if (fadeEdgeEnabled) {
            when {
                fadeEdgeStrength <= 0 -> {
                    0f
                }
                fadeEdgeStrength >= 1 -> {
                    1f
                }
                else -> {
                    fadeEdgeStrength
                }
            }
        } else {
            0f
        }
    }
}

属性

<declare-styleable name="FadeScrollView">
        <attr name="horizontalFadingEdgeEnabled" format="boolean" />
        <attr name="verticalFadingEdgeEnabled" format="boolean" />
        <attr name="topFadingEdgeStrength" format="float" />
        <attr name="bottomFadingEdgeStrength" format="float" />
        <attr name="leftFadingEdgeStrength" format="float" />
        <attr name="rightFadingEdgeStrength" format="float" />
    </declare-styleable>