android顶部渐变显示,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);
}
});
}
android顶部渐变显示,Android实现直播聊天区域顶部渐变效果相关推荐
- android顶部渐变显示,Android实现直播聊天区域中顶部的渐变效果
Android实现直播聊天区域中顶部的渐变效果 发布时间:2020-10-15 08:24:18 来源:脚本之家 阅读:102 作者:MG屠夫 背景 在4月份开发直播时,有一个需求,需要实现一个Rec ...
- android标题栏渐变动画,Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果
各位早上好,话不多说,先上效果图: 注意顶部:首页textview的变化(显示和隐藏)! 首先分析下:ui状态,其是由recyclerview添加头部组成+recyclerview 头部添加和recy ...
- android 360状态栏显示,Android高仿UC浏览器和360手机卫士消息常驻栏(通知栏)
之前网上看了下自定义消息栏,通知栏,了解到了Notification这个控件,发现UC浏览器等都是这种类型,今天写个demo实现下,如图: 其中每个按钮都有不同的功能,代码如下: package co ...
- android 圆形渐变背景,android实现圆形渐变进度条
最近项目中使用到了渐变效果的圆形进度条,网上找了很多渐变效果不够圆滑,两个渐变颜色之间有明显的过渡,或者有些代码画出来的效果过渡不美观,于是自己参照写了一个,喜欢的朋友可以参考或者直接使用. 先上一张 ...
- android notification 定时显示,Android编程使用Service实现Notification定时发送功能示例...
本文实例讲述了android编程使用service实现notification定时发送功能.分享给大家供大家参考,具体如下: /** * 通过启动或停止服务来管理通知功能 * * @descripti ...
- android listview分页显示,Android应用中使用ListView来分页显示刷新的内容
点击按钮刷新1.效果如下: 实例如下: 上图的添加数据按钮可以换成一个进度条 因为没有数据所以我加了一个按钮添加到数据库用于测试:一般在服务器拉去数据需要一定的时间,所以可以弄个进度条来提示用户: ...
- android activity 渐变,关于Android的径向渐变高级编程的实现
在最近的一系列文章,对midipad APP,有一个关于一个radialgradiant渲染每个padview利用的探讨,对审美的原因,这是一个软件层,而不是一个硬件层.在这个简短的系列中,我们首先看 ...
- android编辑框显示,android – 如何在屏幕上显示文本编辑框?
您的问题最简单的解决方案是在您主要(肖像修复的)活动中启动的单独的对话框主题的活动中显示您的EditText. EditText Activity不应该将其方向固定,因此它会沿着您滑出键盘时的期望旋转 ...
- android设置渐变背景,Android LinearLayout渐变背景
我在将渐变背景应用于LinearLayout时遇到问题. 根据我所读的内容,这应该相对简单,但似乎不起作用. 作为参考,我正在开发2.1-update1. header_bg.xml: android ...
最新文章
- 结构光测距相位差_ROHM确立新型VCSEL模块技术 有助于提高测距精度
- python爬虫系列(5.3-动态网站的爬取的策略)
- Art Generation with Neural Style Transfer-v2
- 20145227《信息安全系统设计基础》第一周学习总结
- 前端学习(2305):react之脚手架基本创建
- 十年编程,是人玩技术还是技术玩人?
- SQL基础---SQL DELETE 语句
- 【Android自定义控件】Android自定义虚线三
- 计算机网络 校园网规划,校园网络规划与设计方案
- vue-froala-wysiwyg富文本编辑器
- 计算机表格画斜线,word表格斜线_Word2010怎么绘制斜线表头-太平洋IT百科手机版...
- 各大云服务厂商 轻量应用服务器 性能评测对比,阿里云、腾讯云、华为云、Ucloud
- springboot集成Mybatis返回的值为null
- 腾讯三面:Cookie的SameSite了解吧,那SameParty呢?
- JavaScript几种继承方式
- Matlab绘制跳动的心
- 文件管理android2.3,ES文件浏览器(ES File Explorer)v4.0.2.3 优化版-好用的安卓文件管理器...
- 8 Babylonjs基础入门 相机,模型碰撞和重力效果
- 有哪些可以快速回复信息的软件
- Vue/React项目的package.json文件scripts命令解析
热门文章
- 微表情识别相关数据集及获取地址、微表情识别数据集、微表情数据集
- 与计算机相关的1000字论文,计算机毕业论文1000字-计算机毕业论文范文500字?
- 教程向|如何更好还原褶皱,ZBrush雕刻褶皱的技巧
- 502报错 网络异常
- 通过 bitbake 移植 qrencode 到嵌入式
- 《Redis设计与实现》第4章 字典
- DEBUG模式和RELEASE模式切换
- 大模型新势力入局:IDEA研究院首席科学家创业,沈向洋院士任顾问,首轮估值20亿...
- 机器人已从科幻小说和电影银幕里走出来,走近了平常人的生活。
- 一款在使用中的车牌选号系统开发