Android 使用.9图 NinePatchDrawable实现动态聊天气泡

最近一段时间，在做一个需求，需要实现一个聊天气泡的动画效果，如下图所示：

GitHub源码demo ，建议下载demo，运行查看。

动态聊天气泡动画

在这里插入图片描述

静态聊天气泡

在这里插入图片描述

经过一段时间调研，实现方案如下:

实现方案

  • 从服务端下载zip文件，文件中包含配置文件和多张png图片，配置文件定义了图片的横向拉伸拉伸区域、纵向拉伸区域、padding信息等。
  • 从本地加载配置文件，加载多张png图片为bitmap。
  • 将bitmap存储在内存里。LruCache，避免多次解析。
  • 根据配置文件，将png图片转换为.9图，NinePatchDrawable。
  • 使用多张NinePatchDrawable创建一个帧动画对象AnimationDrawable
  • 将AnimationDrawable设置为控件的背景，并让AnimationDrawable播放动画，执行一定的次数后停止动画。

其中的难点在于第3步，将png图片转换为.9图 NinePatchDrawable。

NinePatchDrawable 的构造函数。

/*** Create drawable from raw nine-patch data, setting initial target density* based on the display metrics of the resources.*/
public NinePatchDrawable(Resources res,Bitmap bitmap,byte[]chunk,Rect padding,String srcName){this(new NinePatchState(new NinePatch(bitmap,chunk,srcName),padding),res);
}

其中最关键的点在于构建byte[] chunk参数。通过查看这个类NinePatchChunk.java，并参阅了许多博客，通过反向分析NinePatchChunk类的deserialize方法，得到了如何构建byte[] chunk的方法。

// See "frameworks/base/include/utils/ResourceTypes.h" for the format of
// NinePatch chunk.
class NinePatchChunk {public static final int NO_COLOR = 0x00000001;public static final int TRANSPARENT_COLOR = 0x00000000;public Rect mPaddings = new Rect();public int mDivX[];public int mDivY[];public int mColor[];private static void readIntArray(int[] data, ByteBuffer buffer) {for (int i = 0, n = data.length; i < n; ++i) {data[i] = buffer.getInt();}}private static void checkDivCount(int length) {if (length == 0 || (length & 0x01) != 0) {throw new RuntimeException("invalid nine-patch: " + length);}}//注释1处，解析byte[]数据，构建NinePatchChunk对象public static NinePatchChunk deserialize(byte[] data) {ByteBuffer byteBuffer =ByteBuffer.wrap(data).order(ByteOrder.nativeOrder());byte wasSerialized = byteBuffer.get();if (wasSerialized == 0)//第一个字节不能为0return null;NinePatchChunk chunk = new NinePatchChunk();chunk.mDivX = new int[byteBuffer.get()];//第二个字节为x方向上的切割线的个数chunk.mDivY = new int[byteBuffer.get()];//第三个字节为y方向上的切割线的个数chunk.mColor = new int[byteBuffer.get()];//第四个字节为颜色的个数checkDivCount(chunk.mDivX.length);//判断x方向上的切割线的个数是否为偶数checkDivCount(chunk.mDivY.length);//判断y方向上的切割线的个数是否为偶数// skip 8 bytes，跳过8个字节byteBuffer.getInt();byteBuffer.getInt();//注释2处，处理padding，发现都设置为0也可以。chunk.mPaddings.left = byteBuffer.getInt();//左边的paddingchunk.mPaddings.right = byteBuffer.getInt();//右边的paddingchunk.mPaddings.top = byteBuffer.getInt();//上边的paddingchunk.mPaddings.bottom = byteBuffer.getInt();//下边的padding// skip 4 bytesbyteBuffer.getInt();//跳过4个字节readIntArray(chunk.mDivX, byteBuffer);//读取x方向上的切割线的位置readIntArray(chunk.mDivY, byteBuffer);//读取y方向上的切割线的位置readIntArray(chunk.mColor, byteBuffer);//读取颜色return chunk;}
}

注释1处，解析byte[]数据，构建NinePatchChunk对象。我们添加了一些注释，意思已经很清晰了。

然后我们根据这里类来构建byte[] chunk参数。

private fun buildChunk(): ByteArray {// 横向和竖向端点的数量 = 线段数量 * 2，这里只有一个线段，所以都是2val horizontalEndpointsSize = 2val verticalEndpointsSize = 2//这里计算的 arraySize 是 int 值，最终占用的字节数是 arraySize * 4val arraySize = 1 + 2 + 4 + 1 + horizontalEndpointsSize + verticalEndpointsSize + COLOR_SIZE//这里乘以4，是因为一个int占用4个字节val byteBuffer = ByteBuffer.allocate(arraySize * 4).order(ByteOrder.nativeOrder())byteBuffer.put(1.toByte()) //第一个字节无意义，不等于0就行byteBuffer.put(horizontalEndpointsSize.toByte()) //mDivX x数组的长度byteBuffer.put(verticalEndpointsSize.toByte()) //mDivY y数组的长度byteBuffer.put(COLOR_SIZE.toByte()) //mColor数组的长度// skip 8 bytesbyteBuffer.putInt(0)byteBuffer.putInt(0)//Note: 目前还没搞清楚，发现都 byteBuffer.putInt(0)，也没问题。//左右paddingbyteBuffer.putInt(mRectPadding.left)byteBuffer.putInt(mRectPadding.right)//上下paddingbyteBuffer.putInt(mRectPadding.top)byteBuffer.putInt(mRectPadding.bottom)//byteBuffer.putInt(0)//byteBuffer.putInt(0)//上下padding//byteBuffer.putInt(0)//byteBuffer.putInt(0)//skip 4 bytesbyteBuffer.putInt(0)//mDivX数组，控制横向拉伸的线段数据，目前只支持一个线段patchRegionHorizontal.forEach {byteBuffer.putInt(it.start * width / originWidth)byteBuffer.putInt(it.end * width / originWidth)}//mDivY数组，控制竖向拉伸的线段数据，目前只支持一个线段patchRegionVertical.forEach {byteBuffer.putInt(it.start * height / originHeight)byteBuffer.putInt(it.end * height / originHeight)}//mColor数组for (i in 0 until COLOR_SIZE) {byteBuffer.putInt(NO_COLOR)}return byteBuffer.array()
}

完整的类请参考 AnimationDrawableFactory.kt 。

使用

完整的使用请查看 ChatAdapter 类。

AnimationDrawableFactory 支持从文件构建动画，也支持从Android的资源文件夹构建动画。

!!!注意，从文件构建动画，需要将请把工程下的bubbleframe文件夹拷贝到手机的Android/data/包名/files
目录下val fileDir = getExternalFilesDir(null)，否则会报错。

从文件构建动画

 return AnimationDrawableFactory(context).setDrawableDir(pngsDir)//图片文件所在的目录.setHorizontalStretchBean(PatchStretchBean(60, 61))//水平拉伸区域.setVerticalStretchBean(PatchStretchBean(52, 53))//垂直拉伸区域.setOriginSize(128, 112)//原始图片大小.setPadding(Rect(31, 37, 90, 75))//padding区域.setHorizontalMirror(isSelf)//是否水平镜像，不是必须的.setScaleFromFile(true)//是否从文件中读取图片的缩放比例，不是必须的.setFinishCount(3)//动画播放次数.setFrameDuration(100)//每帧动画的播放时间.buildFromFile()

这里注意一下：因为文件中的图片是一倍图，所以这里需要放大，所以设置了setScaleFromFile(true)。
如果文件中的图片是3倍图，就不需要设置这个参数了。如果需要更加精细的缩放控制，后面再增加支持。

从Android的资源文件夹构建动画


private val resIdList = mutableListOf<Int>().apply {add(R.drawable.bubble_frame1)add(R.drawable.bubble_frame2)add(R.drawable.bubble_frame3)add(R.drawable.bubble_frame4)add(R.drawable.bubble_frame5)add(R.drawable.bubble_frame6)add(R.drawable.bubble_frame7)add(R.drawable.bubble_frame8)add(R.drawable.bubble_frame9)add(R.drawable.bubble_frame10)add(R.drawable.bubble_frame11)add(R.drawable.bubble_frame12)
}/*** 从正常的资源文件加载动态气泡*/
return AnimationDrawableFactory(context).setDrawableResIdList(resIdList)//图片资源id列表.setHorizontalStretchBean(PatchStretchBean(60, 61))//水平拉伸区域.setVerticalStretchBean(PatchStretchBean(52, 53))//垂直拉伸区域.setOriginSize(128, 112)//原始图片大小.setPadding(Rect(31, 37, 90, 75))//padding区域.setHorizontalMirror(isSelf)//是否水平镜像，不是必须的.setFinishCount(3)//动画播放次数,不是必须的.setFrameDuration(100)//每帧动画的播放时间,不是必须的.buildFromResource()

有时候可能我们只需要构建静态气泡，也就是只需要一张 NinepatchDrawable，我们提供了一个类来构建静态气泡，NinePatchDrawableFactory.kt。

从文件加载

return NinePatchDrawableFactory(context).setDrawableFile(pngFile)//图片文件.setHorizontalStretchBean(PatchStretchBean(60, 61))//水平拉伸区域.setVerticalStretchBean(PatchStretchBean(52, 53))//垂直拉伸区域.setOriginSize(128, 112)//原始图片大小.setScaleFromFile(true)//是否从文件中读取图片的缩放比例，不是必须的.setPadding(Rect(31, 37, 90, 75))//padding区域.setHorizontalMirror(isSelf)//是否水平镜像，不是必须的.buildFromFile()

从资源加载

return NinePatchDrawableFactory(context).setDrawableResId(R.drawable.bubble_frame1)//图片资源id.setHorizontalStretchBean(PatchStretchBean(60, 61))//水平拉伸区域.setVerticalStretchBean(PatchStretchBean(52, 53))//垂直拉伸区域.setOriginSize(128, 112)//原始图片大小.setPadding(Rect(31, 37, 90, 75))//padding区域.setHorizontalMirror(isSelf)//是否水平镜像，不是必须的.buildFromResource()

padding 取值

如图所示：宽高是128*112。横向padding取值为31、90，纵向padding取值为37、75。

在这里插入图片描述

其他

在实现过程中发现Android 的 帧动画 AnimationDrawable无法控制动画执行的次数。最后自定义了一个类，CanStopAnimationDrawable.kt 解决。

参考链接：

  • Carson带你学Android：关于逐帧动画的使用都在这里了！-腾讯云开发者社区-腾讯云
  • 聊天气泡图片的动态拉伸、镜像与适配 - 掘金
  • Android 点九图机制讲解及在聊天气泡中的应用 - 掘金
  • Android动态布局入门及NinePatchChunk解密
  • Android点九图总结以及在聊天气泡中的使用-腾讯云开发者社区-腾讯云
  • https://developer.android.com/studio/write/draw9patch?utm_source=android-studio&hl=zh-cn

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/133960.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

栈（定义，基本操作，顺序存储，链式存储）

栈（定义，基本操作，顺序存储，链式存储）

目录 1.栈的定义1.重要术语2.特点 2.栈的基本操作3.栈的顺序存储1.顺序栈的定义2.基本操作1.初始化2.进栈3.出栈4.读栈顶 3.共享栈 4.栈的链式存储 1.栈的定义 栈( Stack&#xff09;是只允许在一端进行插入或删除操作的线性表。 一种受限的线性表&#xff0c;只能在栈顶进行插…
阅读更多...
高校为什么需要大数据挖掘平台？

高校为什么需要大数据挖掘平台？

目前数据挖掘已经成为各种应用领域的重要技术&#xff0c;大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识&#xff0c;也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去&#xff0c;教学过程理…
阅读更多...
Vscode禁止插件自动更新

Vscode禁止插件自动更新

由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2&#xff0c;电脑vscode的python插件装的也是2022年4月份的某个版本&#xff0c;但插件经常自动更新&#xff0c;导致python代码无法Debug,解决办法&#xff1a; 点设置&#xff0c;搜autoUpdate, 把红色框选成无
阅读更多...
MicroStation二次开发问题记录（1）：打开项目时自动加载dll文件

MicroStation二次开发问题记录（1）：打开项目时自动加载dll文件

环境配置 Windows10 MicroStation CE Update16 Visual Studio 2019 前言 开发好的dll文件若每次都需要在打开MS时单独加载&#xff0c;则过于繁琐&#xff0c;因此可以在确定的工程项目文件中进行一次设置&#xff0c;在打开该文件时自动加载 一、加载dll文件 1. 点击File—Se…
阅读更多...
ROS学习笔记（5）:ros_control

ROS学习笔记（5）:ros_control

1.ros_control简介 ros_control - ROS Wiki ros_control是为ROS提供的机器人控制包&#xff0c;包含一系列控制器接口、传动装置接口、控制器工具箱等,有效帮助机器人应用功能包快速落地&#xff0c;提高开发效率。 2.ros_control框架 ros_control总体框架&#xff1a; 针对…
阅读更多...
【微服务 Spring Cloud 6】服务如何拆分？使用微服务的注意事项？

【微服务 Spring Cloud 6】服务如何拆分？使用微服务的注意事项？

目录 一、前言二、单体服务的弊端三、微服务化四、服务如何拆分&#xff1f;1、拆分原则2、拆分时机和拆分方法3、拆分实践 五、使用微服务的注意事项1、确保相关业务和利益相关者的支持2、确定微服务的拆分粒度3、遵循微服务架构的原则4、确保接口的稳定性5、关注数据一致性6、…
阅读更多...
百数低代码与AI：实现业务智能化的新途径

百数低代码与AI：实现业务智能化的新途径

今年6月&#xff0c;咨询机构麦肯锡发布了的一份题为《生成式人工智能的经济潜力》的研究报告&#xff0c;在报告中&#xff0c;分析师们通过对47个国家及地区的850种职业&#xff08;全球80%以上劳动人口&#xff09;的研究&#xff0c;探讨了在AI成指数级发展背后&#xff0c…
阅读更多...
PostgreSQL简介及安装步骤

PostgreSQL简介及安装步骤

PostgreSQL简介 PostgreSQL是一款开源的关系型数据库管理系统&#xff0c;具有强大的扩展性、高度的可定制性和可靠的稳定性&#xff0c;因此在企业级应用和开发领域中得到了广泛的应用。本文将介绍PostgreSQL的基本概念以及在各种操作系统上的安装步骤。 安装步骤 1. Window…
阅读更多...
05【保姆级】-GO语言的标识符

05【保姆级】-GO语言的标识符

之前我学过C、Java、Python语言时总结的经验&#xff1a; 先建立整体框架&#xff0c;然后再去抠细节。先Know how&#xff0c;然后know why。先做出来&#xff0c;然后再去一点点研究&#xff0c;才会事半功倍。适当的囫囵吞枣。因为死抠某个知识点很浪费时间的。对于GO语言&a…
阅读更多...
CRM客户管理系统究竟是什么？如何实施？

CRM客户管理系统究竟是什么？如何实施？

很多销售人员都不是特别喜欢使用信息化软件&#xff0c;然而从销售经理的角度看&#xff0c;信息化又的确提升了团队的管理效率和业绩。追究这些矛盾的原因&#xff0c;无外乎几点&#xff1a; 认知角度 → 销售员&#xff1a;数据没用又浪费我时间 VS 销售经理&#xff1a;数…
阅读更多...
聊聊定时器 setTimeout 的时延问题

聊聊定时器 setTimeout 的时延问题

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 全局的 setTimeout() 方法设置一个定时器&#xff0c;一旦定时器到期&#xff0c;就会执行一个函数或指定的代码片…
阅读更多...
字符函数和字符串函数详解

字符函数和字符串函数详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 1. 字符分类函数 2. 字符转换函数 3. strlen的使用和模拟实现 3.1strlen的使用&#xff1a; 3.2strlen的模拟实现&#xff1a; 4. strcpy的使用和模拟实现 4.1strc…
阅读更多...
漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

现象 漏刻有时项目开发中的调用了百度地图API&#xff0c;在PC端、IOS和安卓机型测试都没有问题。但是使用华为手机部分型号时&#xff0c;前端在监听点击事件的时候是使用 map.addEventListener(click,function(){...})&#xff0c;无法触发。或 原理 通过监听touchstart和…
阅读更多...
Django初窥门径-自定义附件存储模型

Django初窥门径-自定义附件存储模型

前言 Django自带了一个名为FileField的字段&#xff0c;用于处理文件上传。然而&#xff0c;有时我们需要更多的控制权&#xff0c;例如定义文件的存储路径、文件名以及文件类型。在本篇文章中&#xff0c;我们将探讨如何自定义Django附件存储模型。 创建attachment应用 pyt…
阅读更多...
Python|OpenCV-图像的添加和混合操作(8)

Python|OpenCV-图像的添加和混合操作(8)

前言 本文是该专栏的第8篇，后面将持续分享OpenCV计算机视觉的干货知识，记得关注。 在使用OpenCV库对图像操作的时候，有时需要对图像进行运算操作，类似于加法，减法，位操作等处理。而本文，笔者将针对OpenCV对图像的添加，混合以及位操作进行详细的介绍说明和使用。 下面，…
阅读更多...
ZKP8.1 Polynomial-IOP and Polynomial Commitment Schemes

ZKP8.1 Polynomial-IOP and Polynomial Commitment Schemes

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 8: FRI-based Polynomial Commitments and Fiat-Shamir (Justin Thaler) 8.1 Polynomial-IOP and Polynomial Commitment Schemes Recall: build an efficient SNARK Recall: Polynomial-IOP P’s first message in the pro…
阅读更多...
YOLOv8轻量化模型：模型轻量化设计 | 轻量级可重参化EfficientRep| 来自YOLOv6思想

YOLOv8轻量化模型：模型轻量化设计 | 轻量级可重参化EfficientRep| 来自YOLOv6思想

💡💡💡本文解决什么问题：在几乎不保证精度下降的前提下，轻量级模型创新设计 EfficientRep 在关键点检测任务中 | GFLOPs从9.6降低至8.5， mAP50从0.921下降至0.912，mAP50-95从0.697提升至0.779 YOLO轻量化模型专栏：http://t.csdnimg.cn/AeaEF 1.YOLOv6介绍 论文…
阅读更多...
API接口安全设计

API接口安全设计

简介 HTTP接口是互联网各系统之间对接的重要方式之一&#xff0c;使用HTTP接口开发和调用都很方便&#xff0c;也是被大量采用的方式&#xff0c;它可以让不同系统之间实现数据的交换和共享。 由于HTTP接口开放在互联网上&#xff0c;所以我们就需要有一定的安全措施来保证接口…
阅读更多...
＃龙迅视频转换IC LT7911D是一款高性能Type-C/DP/EDP 转MIPI®DSI/CSI/LVDS 芯片，适用于VR/显示应用。

＃龙迅视频转换IC LT7911D是一款高性能Type-C/DP/EDP 转MIPI®DSI/CSI/LVDS 芯片，适用于VR/显示应用。

1.说明 应用功能&#xff1a;LT7911D适用于DP1.2转MIPIDSI/MIPICSI/LVDS&#xff0c;EDP转MIPIDSI/MIPICSI/LVDS&#xff0c;TYPE-C转MIPIDSI/MIPICSI/LVDS应用方案 分辨率&#xff1a;单PORT高达4K30HZ&#xff0c;双PORT高达4K 60HZ 工作温度范围&#xff1a;−40C to 85C 产…
阅读更多...
webgoat-client side客户端问题

webgoat-client side客户端问题

client side Bypass front-end restrictions 用户对 Web 应用程序的前端有很大程度的控制权。 它们可以更改 HTML 代码&#xff0c;有时也可以更改脚本。这就是为什么 需要特定输入格式的应用也应在服务器端进行验证&#xff0c;而不是只在前端做限制。 0x02 先提交请求&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023