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>