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,有兴趣的可以去下载。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。
您可能感兴趣的文章:
- Android直播app送礼物连击动画效果(实例代码)
- Android 实现仿网络直播弹幕功能详解及实例
- Android实现炫酷的网络直播弹幕功能
- Android仿斗鱼直播的弹幕效果
- Android自定义View模仿虎扑直播界面的打赏按钮功能
- Android高级UI特效仿直播点赞动画效果
- android实现直播点赞飘心动画效果
- Android仿直播特效之点赞飘心效果
- Android控件实现直播App特效之点赞飘心动画
- Android贝塞尔曲线实现直播点赞效果