一个图文混排问题的解决过程

需求如所示:左边的是效果图,右边的是完成后的图

               

具体需求描述:用户的回复一条就是一个cell,字数不定。当存在某种条件时,需要在文字(可能换行)的最后一个字后面添加一个能点击的删除按钮小图标,文字支持emoji表情符号。

解决过程:

1、一看到这种文字中需要穿插图片的就想到了富文本中的NSTextAttachment对象,它可以包装一个image后生成一个富文本,再给UILabel显示就能完成显示需求,但是,该对象只能包装UIImage对象,无法监听图片的点击事件,不符合要求。

2、富文本是个好的思路,NSTextAttachment差就差在无法包装UIView对象。于是找到了YYKit框架,上面有个方法能包装UIView对象生成一个富文本对象

经试验,该富文本对象无法用UILabel和UITextView显示,只能用YYLabel显示,而YYlabel继承自UIView,当富文本对象中有emoji表情时,其渲染方式/位置和UILabel有所差别,导致用NSString的boundingRectWithSize方法计算出来的YYLabel高度不对,当存在emoji表情时,经常出现...的显示不全现象,多方试验无果,放弃

3、第一种方法是能完成显示效果的,只是无法监听点击事件。于是找到了种方法,能计算UILabel最后一个字的右上角坐标,于是一个想法产生了:在这个位置添加一个看不见的按钮监听事件。计算位置方法如下

sz是计算文本不换行状态下单行的尺寸,linesSz是计算文本在换行状态下的尺寸。

通过在算出位置添加一个较大的看不见的按钮监听点击事件,大部分情况是可行的。但是,此方法有时候算出的结果不准确,且需要考虑所添加按钮超出边界显示不全的情况,也无法达到所需版本要求。

4、没辙,准备学习万恶的CoreText。看着看着,发现了CoreText的封装版本TextKit,OC接口的,顿时顺心了。TextKit主要就三个类: NSTextStorage用来保存需要显示的文本及相关属性, NSLayoutManager用来决定文本显示的格式, NSTextContainer决定文本显示的范围。这个主要能解决连接高亮、下划线、文字标记、区域显示等问题,对此问题也没有帮助

5、最后,好友提示了UITextView的一个方法,selectionRectsForRange,能够得到选中字符串的CGRect,于是问题得到了解决。

这段代码的意思就是,拿到textView的最后两个字范围,在上面添加一个按钮来监听点击事件。

这段代码就是在用户发言的文字后面添加一个透明的字符串,用来参与高度计算等,注意,该占位符不能使用数字和空格,必须用字符代替空格(主要是兼容emoji表情)。

针对TextView,采用其所显示的文字计算宽高,设置textView的size需要注意:

a、计算textView文本时,计算宽度需要比textView本身的宽度减少8

b、 textView高度必须比文字高度多2 * 8 的额外高度

github地址:https://github.com/zhangmaliang/AddDeleteButton

时间: 2024-10-19 02:50:08

一个图文混排问题的解决过程的相关文章

一个简单的图文混排的排版引擎

本文是基于如下两篇博文的学习做最后的总结的: http://blog.devtang.com/blog/2015/06/27/using-coretext-1/ http://blog.devtang.com/blog/2015/06/27/using-coretext-2/ 自己开发了一个图文混排引擎,github 地址: https://github.com/xzjxylophone/RXCoreText 可以实现普通文本,超链接文本,本地图片,网络图片的显示. 将来可继续扩充代码, 实现支

iOS开发日记21-7.0之后的图文混排

今天博主有一个图文混排的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS7.0以前,图文混排主要有两种方法:1.WebView+js  2.coreText iOS7.0之后,苹果提供了新的封装,让图文混排更加的简便,也就是第三种方法:3.TextKit 今天就和大家详细的分享一下这三种图文混排的方法 1.webview+js的方法其实很简单,下面贴出代码,各位自行研究 去除webView滚动时,上下的白边. - (void)clearWebViewBackground:(UI

Android 自绘TextView解决提前换行问题,支持图文混排

先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢到下一行开始显示.这样本来没有错.一是咱们中国人都是方块字,怎么都放得下,不存在英文的这个问题.所以不习惯那个排版.二是如果TextView里面有图片,如图,不知道判断单词的代码是怎么弄得,总之它觉得最后一个啦字和后面的一串表情应该是一个整体,不能分开,就一起丢到第二行了,也就造成了这种难看的排版.

IOS开发UI篇--一个支持图文混排的ActionSheet

一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - (instancetype)initWithTitle:(NSString *)title delegate:(id<UIActionSheetDelegate>)delegate cancelButtonTitle:(NSString *)cancelButtonTitle destructive

仿小米便签图文混排 EditText解决尾部插入文字bug

一直想实现像小米便签那样的图文混排效果,收集网上的办法无非三种: 1.自定义布局,每张图片是一个ImageView,插入图片后插入EditText,缺点是实现复杂,不能像小米便签那样同时选中图片和文字 2.通过Html.fromHtml(source),可以将图片加载写进ImageGetter,实现后无bug,但是只能显示Html,当EditText setText后,想取出之前的HTML格式      图片得到的是一个obj的字符,查看了很多博客,包括stackoverflow也没给出办法从e

Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

前几天心血来潮,打算根据看知乎的API自己做一个小知乎,定制的过程遇到ListView的优化问题及图片未缓存重加载等等许多问题,解决了以后打算和博友分享一下. 接口数据:http://api.kanzhihu.com/getpostanswers/20150925/archive 首先,Json数据太常用,相信每一位开发者Json的解析都是必备的.我们要准备以下知识: JavaBean,枚举你需要的元素,用来存储数据. 异步加载网络内容的必备途径,多线程加载+AsyncTask两种方式. Jso

iOS 图文混排 链接 可点击

对于这个话题 我想到 1 第一个解决方法就是使用 webView 比较经典 把所有复杂工作都交给控件本身去处理了,  但是好像好多需要自定义的地方 没法从 webView获得响应回调 :(估计也可以实现 也比较复杂,而且 这个需要对 html编码进行分析理解剥离等) 2 富文本方式 核心框架 coretext 图文混排 一点问题都没有 关键是怎么对 目标图片 或者链接 进行触发响应 要点: (1)首先要封装的要相对独立 拓展也方便  首当其冲就是  和服务端约定的 数据模型 CoreTextMo

经验之谈—正則表達式实现图文混排

在项目中,我们常常须要发表情,以及常常须要将表情字符转换成表情.由于表情是一个图片.所以我们发给server的时候,实际上是发一段特殊的文字给server,然后转换成表情.以免浪费用户过多的流量. 那接下来.我们就来介绍一下,怎样使用正則表達式实现图文混排呢? 为了以后的代码的管理方便,我们抽取出两个类: NSString+Regular.h中.我们暴露两个方法出来: /** * 返回正則表達式匹配的第一个结果 * * @param pattern 正則表達式 * * @return 匹配的第一

CoreText实现图文混排之点击事件-b

CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UITouch *> )touches withEvent:(UIEvent )event方法,我们呢,就是基于这个方法去做点击事件的. 通过touchBegan方法拿到当前点击到的点,然后通过坐标判断这个点是否在某段文字上,如果在则触发对应事件. 上面呢就是主要思路.接下来呢,我们来详细讲解一下.还是老规矩