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。

参考资料

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 207,113评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,644评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,340评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,449评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,445评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,166评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,442评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,105评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,601评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,066评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,161评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,792评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,351评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,352评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,584评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,618评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,916评论 2赞 344