RecyclerView顶部半透明渐变效果实现

4,971 阅读2分钟

需求是列表向上滚动时候, 顶部需要淡出效果,而且透明度渐变效果。这是需求背景。

第一种实现方式:系统Api提供的方法实现
        android:layout_width="match_parent"
        android:requiresFadingEdge="vertical"
        android:fadingEdgeLength="26dp"
        android:scrollbars="none"
        android:layout_height="match_parent"/>

重点属性

android:requiresFadingEdge="vertical" android:fadingEdgeLength="26dp"
重点这两行代码,第一行代码意思是上下边缘渐变遮罩效果。第二行代码的意思是 遮罩高度26dp。 现在问题来了,UI不想要下边有遮罩效果,只想要顶部有这个效果,怎么办呢?

第二种实现方式:顶部RecyclerView顶部盖一个渐变View

这种实现方式不可控的地方太多,代码中逻辑比较恶心。直接Pass了

第三种实现方式: 利用View 提供的Api做自己的定制效果

其实RecyclerView继承ViewGroup,ViewGroup继承View。View给我们提供了方法。看源码:

    /**
     * <p>Indicate whether the vertical edges are faded when the view is
     * scrolled horizontally.</p>
     *
     * @return true if the vertical edges should are faded on scroll, false
     *         otherwise
     *
     * @see #setVerticalFadingEdgeEnabled(boolean)
     *
     * @attr ref android.R.styleable#View_requiresFadingEdge
     */
    public boolean isVerticalFadingEdgeEnabled() {
        return (mViewFlags & FADING_EDGE_VERTICAL) == FADING_EDGE_VERTICAL;
    }

    /**
     * <p>Define whether the vertical edges should be faded when this view
     * is scrolled vertically.</p>
     *
     * @param verticalFadingEdgeEnabled true if the vertical edges should
     *                                  be faded when the view is scrolled
     *                                  vertically
     *
     * @see #isVerticalFadingEdgeEnabled()
     *
     * @attr ref android.R.styleable#View_requiresFadingEdge
     */
    public void setVerticalFadingEdgeEnabled(boolean verticalFadingEdgeEnabled) {
        if (isVerticalFadingEdgeEnabled() != verticalFadingEdgeEnabled) {
            if (verticalFadingEdgeEnabled) {
                initScrollCache();
            }

            mViewFlags ^= FADING_EDGE_VERTICAL;
        }
    }

    /**
     * Returns the strength, or intensity, of the top faded edge. The strength is
     * a value between 0.0 (no fade) and 1.0 (full fade). The default implementation
     * returns 0.0 or 1.0 but no value in between.
     *
     * Subclasses should override this method to provide a smoother fade transition
     * when scrolling occurs.
     *
     * @return the intensity of the top fade as a float between 0.0f and 1.0f
     */
    protected float getTopFadingEdgeStrength() {
        return computeVerticalScrollOffset() > 0 ? 1.0f : 0.0f;
    }

    /**
     * Returns the strength, or intensity, of the bottom faded edge. The strength is
     * a value between 0.0 (no fade) and 1.0 (full fade). The default implementation
     * returns 0.0 or 1.0 but no value in between.
     *
     * Subclasses should override this method to provide a smoother fade transition
     * when scrolling occurs.
     *
     * @return the intensity of the bottom fade as a float between 0.0f and 1.0f
     */
    protected float getBottomFadingEdgeStrength() {
        return computeVerticalScrollOffset() + computeVerticalScrollExtent() <
                computeVerticalScrollRange() ? 1.0f : 0.0f;
    }

    /**
     * Returns the strength, or intensity, of the left faded edge. The strength is
     * a value between 0.0 (no fade) and 1.0 (full fade). The default implementation
     * returns 0.0 or 1.0 but no value in between.
     *
     * Subclasses should override this method to provide a smoother fade transition
     * when scrolling occurs.
     *
     * @return the intensity of the left fade as a float between 0.0f and 1.0f
     */
    protected float getLeftFadingEdgeStrength() {
        return computeHorizontalScrollOffset() > 0 ? 1.0f : 0.0f;
    }

    /**
     * Returns the strength, or intensity, of the right faded edge. The strength is
     * a value between 0.0 (no fade) and 1.0 (full fade). The default implementation
     * returns 0.0 or 1.0 but no value in between.
     *
     * Subclasses should override this method to provide a smoother fade transition
     * when scrolling occurs.
     *
     * @return the intensity of the right fade as a float between 0.0f and 1.0f
     */
    protected float getRightFadingEdgeStrength() {
        return computeHorizontalScrollOffset() + computeHorizontalScrollExtent() <
                computeHorizontalScrollRange() ? 1.0f : 0.0f;
    }
**

这个时候我想你应该懂我意思了吧? 我们自定义RecyclerView,然后去重写它的方法,强制返回0f,全透明 不就好了么?看下自定义RecyclerView 代码:

import android.content.Context
import android.util.AttributeSet
import androidx.recyclerview.widget.RecyclerView
/***
* create by guiping at 2021/6/11/2:24 下午
* description:顶部阴影半遮照Recyclerview
*/

class FadingEdgeRecyclerView(context: Context, attrs: AttributeSet?) :
    RecyclerView(context, attrs) {

    override fun getTopFadingEdgeStrength(): Float {  //顶部走系统的,不做修改
        return super.getTopFadingEdgeStrength()
    }

    override fun getBottomFadingEdgeStrength(): Float { //底部全透明
        return 0f
    }
}

这样就好了。

最终效果

顶部半透明渐变效果.png