Android实现直播聊天区域中顶部的渐变效果
时间：2021-12-07 12:16:59 | 栏目：Android代码 | 点击：次
背景
在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，有兴趣的可以去下载。
总结