Android实现直播聊天区域中顶部的渐变效果

 更新时间:2018年04月21日 16:10:31   作者:MG屠夫  
最近在研究直播的弹幕,东西有点多,准备记录一下免得自己忘了又要重新研究,下面这篇文章主要给大家介绍了关于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源码解析之属性动画详解

    Android源码解析之属性动画详解

    在手机上去实现动画效果算是件比较炫酷的事情,自Android 3.0版本开始,系统给我们提供了一种全新的动画模式,属性动画(property animation),它的功能非常强大,弥补了之前补间动画的一些缺陷,几乎是可以完全替代掉补间动画了。本文就详细介绍了Android中的属性动画。
    2017-02-02
  • Android直播系统平台搭建之图片实现阴影效果的方法小结

    Android直播系统平台搭建之图片实现阴影效果的方法小结

    这篇文章主要介绍了Android直播系统平台搭建, 图片实现阴影效果的若干种方法,本文给大家带来三种方法,每种方法通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Android应用接入微信分享的实例代码

    Android应用接入微信分享的实例代码

    本篇文章主要介绍了Android应用接入微信分享的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • Android 超详细SplashScreen入门教程

    Android 超详细SplashScreen入门教程

    Android 12正式版即将发布,有一个非常显著的视觉变化就是,Android 12强制给所有的App都增加了SplashScreen的功能。是的,即使你什么都不做,只要你的App安装到了Android 12手机上,都会自动拥有这个新功能
    2022-03-03
  • Android调用高德地图定位的方法

    Android调用高德地图定位的方法

    本篇文章主要介绍了Android调用高德地图定位的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Android实现疯狂连连看游戏之实现游戏逻辑(五)

    Android实现疯狂连连看游戏之实现游戏逻辑(五)

    这篇文章主要为大家详细介绍了Android实现疯狂连连看游戏之实现游戏逻辑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 解决Android studio 3.6.1 出现Cause: unable to find valid certification path to requested target 报错的问题

    解决Android studio 3.6.1 出现Cause: unable to find valid certifi

    这篇文章主要介绍了Android studio 3.6.1 出现Cause: unable to find valid certification path to requested target 报错的问题及解决方法,需要的朋友可以参考下
    2020-03-03
  • Android编程使用android-support-design实现MD风格对话框功能示例

    Android编程使用android-support-design实现MD风格对话框功能示例

    这篇文章主要介绍了Android编程使用android-support-design实现MD风格对话框功能,涉及Android对话框、视图、布局相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • Android中Notification用法实例总结

    Android中Notification用法实例总结

    这篇文章主要介绍了Android中Notification用法,以实例形式较为详细的分析并总结了Notification的功能与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 解决Android Studio电脑不支持HAXM的问题

    解决Android Studio电脑不支持HAXM的问题

    这篇文章主要介绍了Android Studio电脑不支持HAXM的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-03-03

最新评论