Android-直播间列表渐隐效果

直播间的打赏榜需要加一个渐变效果，类似映客APP直播间的消息列表，一开始使用xml-shape的gradient标签层叠到RecyclerView上，但是发现效果不太对，总有一层蒙版割裂列表。

随后和设计大佬沟通，设计师说这个不是渐变效果，是渐隐，没有渐变的2个颜色值。渐隐效果安卓并没有原生api可以支持呀，随后问了iOS的同学，他们实现是添加一个CAGradientLayer（渐变蒙版图层）和TableView（列表控件）的图层合并。

这时候，我才明白，并不是单纯的叠一层渐变，而是要将渐变和RecyclerView的图层合并，再draw。

最后，如果列表滚动到顶部，则不绘制，其他时候需要绘制，我们监听RecyclerView滚动即可，滚动监听我封装到了RecyclerViewScrollHelper这个类。

最终效果

Android-直播间列表渐隐效果.jpeg Android-直播间列表渐隐效果_动效.gif

思路

要在RecyclerView上的Canvas上draw，可以继承RecyclerView来实现，但是耦合到了RecyclerView，我们可以使用ItemDecoration，添加一个条目装饰器，在RecyclerView上绘制。使用Xfermode，融合2个图层。

辅助工具类

• RecyclerViewScrollHelper，列表滚动帮助类

public class RecyclerViewScrollHelper {
    /**
     * 第一次进入界面时也会回调滚动，所以当手动滚动再监听
     */
    private boolean isNotFirst = false;
    /**
     * 列表控件
     */
    private RecyclerView scrollingView;
    /**
     * 回调
     */
    private Callback callback;

    public void attachRecyclerView(RecyclerView scrollingView, Callback callback) {
        this.scrollingView = scrollingView;
        this.callback = callback;
        setup();
    }

    private void setup() {
        scrollingView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                isNotFirst = true;
                if (callback != null) {
                    //如果滚动到最后一行，RecyclerView.canScrollVertically(1)的值表示是否能向上滚动，false表示已经滚动到底部
                    if (newState == RecyclerView.SCROLL_STATE_IDLE &&
                            !recyclerView.canScrollVertically(1)) {
                        callback.onScrolledToBottom();
                    }
                }
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (callback != null && isNotFirst) {
                    //RecyclerView.canScrollVertically(-1)的值表示是否能向下滚动，false表示已经滚动到顶部
                    if (!recyclerView.canScrollVertically(-1)) {
                        callback.onScrolledToTop();
                    }
                    //下滑
                    if (dy < 0) {
                        callback.onScrolledToDown();
                    }
                    //上滑
                    if (dy > 0) {
                        callback.onScrolledToUp();
                    }
                }
            }
        });
    }

    public interface Callback {
        /**
         * 向下滚动
         */
        void onScrolledToDown();

        /**
         * 向上滚动
         */
        void onScrolledToUp();

        /**
         * 滚动到了顶部
         */
        void onScrolledToTop();

        /**
         * 滚动到了底部
         */
        void onScrolledToBottom();
    }

    public static class CallbackAdapter implements Callback {
        @Override
        public void onScrolledToDown() {
        }

        @Override
        public void onScrolledToUp() {
        }

        @Override
        public void onScrolledToTop() {
        }

        @Override
        public void onScrolledToBottom() {
        }
    }

    /**
     * 马上滚动到顶部
     */
    public void moveToTop() {
        if (scrollingView != null) {
            scrollingView.scrollToPosition(0);
        }
    }

    /**
     * 缓慢滚动到顶部
     */
    public void smoothMoveToTop() {
        if (scrollingView != null) {
            scrollingView.smoothScrollToPosition(0);
        }
    }
}

• ViewUtils，dp转换px

public class ViewUtils {
    /**
     * dip换算成像素数量
     */
    public static int dipToPx(Context context, float dip) {
        float density = context.getApplicationContext().getResources().getDisplayMetrics().density;
        return roundUp(dip * context.getResources().getDisplayMetrics().density);
    }

    private static int roundUp(float f) {
        return (int) (0.5f + f);
    }
}

类结构

• 渐变策略，我将顶部、底部的渐变绘制抽成2个策略类，而绘制方法onDrawOver()，getShader()获取着色器，则分拆到一个ShadowStrategy策略接口。

/**
 * 渐变策略
 */
private abstract class ShadowStrategy(
    val shadowHeight: Float,
    val paint: Paint
) {
    /**
     * 绘制
     */
    abstract fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State)

    /**
     * 获取着色器
     */
    abstract fun getShader(parent: RecyclerView): Shader
}

• 顶部渐变

/**
 * 顶部渐变
 */
private inner class TopShadowStrategy(shadowHeight: Float, paint: Paint) :
    ShadowStrategy(shadowHeight, paint) {

    private lateinit var mScrollHelper: RecyclerViewScrollHelper
    /**
     * 是否可以绘制渐变
     */
    private var isCanDrawShadow: Boolean = false

    override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        if (isCanDrawShadow) {
            val left = 0f
            val top = 0f
            val right = parent.width.toFloat()
            val bottom = shadowHeight
            val topShadowRect = RectF(left, top, right, bottom)
            canvas.drawRect(topShadowRect, paint)
        }
    }

    override fun getShader(parent: RecyclerView): Shader {
        if (!this::mScrollHelper.isInitialized) {
            mScrollHelper = RecyclerViewScrollHelper()
            mScrollHelper.attachRecyclerView(
                parent,
                object : RecyclerViewScrollHelper.CallbackAdapter() {
                    override fun onScrolledToTop() {
                        //到了顶部就不能渲染
                        isCanDrawShadow = false
                    }

                    override fun onScrolledToUp() {
                        super.onScrolledToUp()
                        //向上滚动，列表向下移动，则需要渲染
                        isCanDrawShadow = true
                    }
                })
        }
        return run {
            //渐变起始x，y坐标
            val x0 = 0f
            val y0 = 0f
            //渐变结束x，y坐标
            val x1 = 0f
            val y1 = shadowHeight
            //渐变颜色的开始、结束颜色
            val startColor = Color.TRANSPARENT
            val endColor = Color.BLACK
            val colors = intArrayOf(startColor, endColor)
            //渐变位置数组
            val positions = null

            //指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法
            //CLAMP：边缘拉伸，为被shader覆盖区域，使用shader边界颜色进行填充
            //REPEAT：在水平和垂直两个方向上重复，相邻图像没有间隙
            //MIRROR：以镜像的方式在水平和垂直两个方向上重复，相邻图像有间隙
            val tile = Shader.TileMode.CLAMP
            LinearGradient(
                x0, y0, x1, y1,
                colors, positions, tile
            )
        }
    }
}

• 底部渐变

/**
 * 底部渐变
 */
private inner class BottomShadowStrategy(shadowHeight: Float, paint: Paint) :
    ShadowStrategy(shadowHeight, paint) {

    /**
     * 是否可以绘制渐变
     */
    private var isCanDrawShadow: Boolean = true

    override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        //底部渐变，必须指定数量的条目才可以绘制
        isCanDrawShadow = (parent.adapter?.itemCount ?: 0) > 8
        if (isCanDrawShadow) {
            val left = 0f
            val top = parent.height - shadowHeight
            val right = parent.width.toFloat()
            val bottom = parent.height.toFloat()
            val topShadowRect = RectF(left, top, right, bottom)
            canvas.drawRect(topShadowRect, paint)
        }
    }

    override fun getShader(parent: RecyclerView): Shader {
        return run {
            //渐变起始x，y坐标
            val x0 = 0f
            val y0 = parent.height - shadowHeight
            //渐变结束x，y坐标
            val x1 = 0f
            val y1 = parent.height.toFloat()

            //渐变颜色的开始、结束颜色
            val startColor = Color.BLACK
            val endColor = Color.TRANSPARENT
            val colors = intArrayOf(startColor, endColor)
            //渐变位置数组
            val positions = null

            //指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法
            //CLAMP：边缘拉伸，为被shader覆盖区域，使用shader边界颜色进行填充
            //REPEAT：在水平和垂直两个方向上重复，相邻图像没有间隙
            //MIRROR：以镜像的方式在水平和垂直两个方向上重复，相邻图像有间隙
            val tile = Shader.TileMode.CLAMP
            LinearGradient(
                x0, y0, x1, y1,
                colors, positions, tile
            )
        }
    }
}

• 配置到RecyclerView，通过addItemDecoration()方法添加装饰器。

val context = this
val paint = Paint()
//渐变的高度
val shadowHeight = ViewUtils.dipToPx(context, 80f).toFloat()
//顶部渐变
val topShadowStrategy = TopShadowStrategy(shadowHeight, paint)
//底部渐变
val bottomShadowStrategy = BottomShadowStrategy(shadowHeight, paint)

//混合模式
val xfermode: Xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
var layerId = 0
//配置装饰器
vRankList.addItemDecoration(object : RecyclerView.ItemDecoration() {
    /**
     * 可以实现类似绘制背景的效果，内容在上面
     */
    override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDraw(canvas, parent, state)
        layerId = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            canvas.saveLayer(
                0.0f,
                0.0f,
                parent.width.toFloat(),
                parent.height.toFloat(),
                paint
            )
        } else {
            canvas.saveLayer(
                0.0f,
                0.0f,
                parent.width.toFloat(),
                parent.height.toFloat(),
                paint,
                Canvas.ALL_SAVE_FLAG
            )
        }
    }

    /**
     * 可以绘制在内容的上面，覆盖内容
     */
    override fun onDrawOver(
        canvas: Canvas,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.onDrawOver(canvas, parent, state)
        paint.xfermode = xfermode

        //画顶部渐变
        paint.shader = topShadowStrategy.getShader(parent)
        topShadowStrategy.onDrawOver(canvas, parent, state)

        //画底部渐变
        paint.shader = bottomShadowStrategy.getShader(parent)
        bottomShadowStrategy.onDrawOver(canvas, parent, state)

        paint.xfermode = null
        canvas.restoreToCount(layerId)
    }
})

添加渐变到列表

class MainActivity : AppCompatActivity() {
    private lateinit var vRankList: RecyclerView

    private val mListItems = Items()
    private val mListAdapter = MultiTypeAdapter(mListItems).apply {
        register(RankListItemModel::class.java, RankListItemBinder())
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findView()
        bindView()
        setData()
    }

    private fun findView() {
        vRankList = findViewById(R.id.rank_list)
    }

    private fun bindView() {
        supportActionBar?.title = "打赏榜"
        vRankList.run {
            adapter = mListAdapter
            layoutManager = LinearLayoutManager(this@MainActivity)
            setupRankListAlphaStyle()
        }
    }

    private fun setData() {
        val textColorResId = android.R.color.white
        for (index in 1..15) {
            mListItems.add(
                RankListItemModel(
                    index,
                    generateNickName(index),
                    "",
                    (100 + index).toString(),
                    textColorResId
                )
            )
        }
        mListAdapter.notifyDataSetChanged()
    }

    /**
     * 生成昵称
     */
    private fun generateNickName(index: Int): String {
        val nicknames = listOf(
            "迪丽热巴", "黄晓明", "杨幂",
            "彭于晏", "柳岩", "李易峰", "陈伟霆", "刘诗诗", "张艺兴", "成龙",
            "蔡徐坤", "赵丽颖", "王一博", "阚清子", "刘亦菲", "郑爽", "杨紫",
            "关晓彤", "唐嫣", "胡歌", "宋茜", "周杰伦", "吴亦凡", "周冬雨", "华晨宇"
        )
        val position = index % nicknames.size
        return nicknames[position]
    }

    /**
     * 设置排行榜列表透明度风格
     */
    private fun setupRankListAlphaStyle() {
        val context = this
        val paint = Paint()
        val shadowHeight = ViewUtils.dipToPx(context, 80f).toFloat()
        //顶部渐变
        val topShadowStrategy = TopShadowStrategy(shadowHeight, paint)
        //底部渐变
        val bottomShadowStrategy = BottomShadowStrategy(shadowHeight, paint)

        //混合模式
        val xfermode: Xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
        var layerId = 0
        //设置装饰器
        vRankList.addItemDecoration(object : RecyclerView.ItemDecoration() {
            /**
             * 可以实现类似绘制背景的效果，内容在上面
             */
            override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
                super.onDraw(canvas, parent, state)
                layerId = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    canvas.saveLayer(
                        0.0f,
                        0.0f,
                        parent.width.toFloat(),
                        parent.height.toFloat(),
                        paint
                    )
                } else {
                    canvas.saveLayer(
                        0.0f,
                        0.0f,
                        parent.width.toFloat(),
                        parent.height.toFloat(),
                        paint,
                        Canvas.ALL_SAVE_FLAG
                    )
                }
            }

            /**
             * 可以绘制在内容的上面，覆盖内容
             */
            override fun onDrawOver(
                canvas: Canvas,
                parent: RecyclerView,
                state: RecyclerView.State
            ) {
                super.onDrawOver(canvas, parent, state)
                paint.xfermode = xfermode

                //画顶部渐变
                paint.shader = topShadowStrategy.getShader(parent)
                topShadowStrategy.onDrawOver(canvas, parent, state)

                //画底部渐变
                paint.shader = bottomShadowStrategy.getShader(parent)
                bottomShadowStrategy.onDrawOver(canvas, parent, state)

                paint.xfermode = null
                canvas.restoreToCount(layerId)
            }
        })
    }
}

总结

这种效果需要用到Xfermode，所以需要了解一下，常用的几个模式，以及LinearGradient的构造方法的那些参数，尤其是渐变开始、结束坐标，如果算不对，渐变方向就不对，再叠加Xfermode时，会比较难看出问题，最好先不加Xfermode，先让渐变方向正确后，再添加Xfermode。

完整代码我上传到了Github，有需要或感兴趣的同学可以clone。

参考资料

• iOS：iOS实现参考
• Android：Android实现参考
• 其他：LinearGradient线性渐变-构造属性介绍