背景
在4月份开发直播时,有一个需求,需要实现一个RecylerView顶部渐变的效果
实际效果
解决思路
图层重叠处理(本质是alpha叠加出来的效果)
实现流程
保存一个图层,然后画渐变,最后再和原来的图层进行合并,达到这个效果。
涉及知识(不知道的请google):
* 主要通过RecyclerView 的 ItemDecoration类进行解决。
* Paint、Canvas、Shader、Xfermode(图层融合)
* Gradient(渐变)
详细过程:
图层叠加需要通过Xfermode,Xfermode主要是让不同图层融合,但是有个前提,就是不同图层需要由相同的画笔(Paint)绘制而成。 这里就抛出了几个问题:
1. 如何获取RecyclerView上每个Item的图层?
2. 获取到图层,如何让该图层的画笔和渐变图层的画笔保持一致?
3. 融合方式,参见Xfermode的参数?
解决方案
1. 查找资料之后,可以通过RecyclerView的ItemDecoration抽象类获知,绘制图层前后的事件。 onDraw:绘制Item开始的事件回调,onDrawOver:绘制Item结束的事件回调。可以通过Parent计算获取相应的Item或Canvas面板。
2. Canvas的saveLayer方法,将当前的Canvas存入Paint中,然后用该Paint绘制渐变图层,就实现两个图层相同画笔这一条件。
3. 融合方式,采用DST_IN, 底部图层是聊天Item,上层是渐变图层,alpha融合之后就是聊天Item带有渐变的效果。(脑部一下)
具体代码:
public void doTopGradualEffect(){ if(recyclerView == null){ return ; } mPaint = new Paint(); // 融合器 final Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN); mPaint.setXfermode(xfermode); // 创造一个颜色渐变,作为聊天区顶部效果 linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP); recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() { // 滑动RecyclerView,渲染之后每次都会回调这个方法,就在这里进行融合 @Override public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) { super.onDrawOver(canvas, parent, state); mPaint.setXfermode(xfermode); mPaint.setShader(linearGradient); canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint); mPaint.setXfermode(null); canvas.restoreToCount(layerId); } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), mPaint, Canvas.ALL_SAVE_FLAG); } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); } }); }
Demo已经上传github:https://github.com/HarrisonLin/RecyclerViewEffectGather,有兴趣的可以去下载。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。