IOS 使用CoreText实现表情文本URL等混合显示控件

来源:互联网 发布:怎么让数组置空 编辑:程序博客网 时间:2024/05/14 13:05

实现了一个富文本视图控件。主要针对表情图片,文本字符,URL,等这种类型的文本进行显示。

源码地址 https://github.com/TinyQ/TQRichTextView  实现的效果如下图。

控件展示完毕

---------------------------------------------------------------------------------------------------

这里先介绍下我写这个控件的项目目录结构和功能。从下面这个目录结构截图说起。

   

1. EmojiLmage 文件夹存放的是表情图片资源。

2. TQRichTextBaseRun   这个是特殊文本元素的抽象对象。这里定义了需要子类实现方法和属性。URLRun,ImageRun 等都是从这个继承。

3. TQRichTextURLRun   这个是用来支持URL文本类型的文本元素对象。

4. TQRichTextImageRun 这个是图片类型的文本元素对象。比如表情文本其实是要绘制图片到文本中间。后面的EmojiRun就是派生自这个对象。

5. TQRichTextEmojiRun     这个是表情文本元素对象,用来识别表情字符串替换成表情图片工作。

6. TQRichTextView 文本显示所用到的视图。

这里先简要说一下这个控件的工作流程。

1.首先。肯定是我们会获得一个要现实的文本字符串。 比如是下面这样的。(举例)

“ 这里是面向程序员的知识分享与学习社区 [呵呵][愤怒] 不允许发布任何推广、广告、政治方面的 https://github.com/TinyQ/TQRichTextView 内容 

2.我们需要对这个字符串进行解析。以便剥离出哪些是文本,表情。url。然后文本的话就是普通显示,表情就替换成对应的图片。URL就蓝色高亮显示。

我们解析出来的就是这样的。按照下面的顺序。

“ 这里是面向程序员的知识分享与学习社区

TQRichTextEmojiRun( 呵呵) 标记位置是 Rect(18,4)

TQRichTextEmojiRun(愤怒)  标记位置是 Rect(22,4)

不允许发布任何推广、广告、政治方面的

TQRichTextURLRun                 标记位置是 Rect(xx,xx) 我就不数数查了。囧

内容”

3.绘制。其实CoreText的绘制方式是这样的。它可以将文本全部给CoreText,然后它会给你绘制好。包括换行等。你只需要在表情的地方流出空白,然后在绘制上图片

就可以了,(但其实这个控件里面换行也是自己计算的。因为发现会有行间距不一致的bug,表情在行为换行不对的bug等。用coretext自动绘制的话)。  

在这个项目里。简单根据代码说下具体实现

//-- 解析文本内容- (NSString *)analyzeText:(NSString *)string{    [self.richTextRunsArray removeAllObjects];    [self.richTextRunRectDic removeAllObjects];    NSString *result = @"";    NSMutableArray *array = self.richTextRunsArray;    result = [TQRichTextEmojiRun analyzeText:string runsArray:&array];    result = [TQRichTextURLRun analyzeText:result runsArray:&array];    [self.richTextRunsArray makeObjectsPerformSelector:@selector(setOriginalFont:) withObject:self.font];    return result;}

得到文本后,我们对文本进行解析。具体解析算法呢,都是写在对应的RichTextxxxRun中的。

比如表情解析就是在TQRichTextEmojiRun 中。url同理。在解析的过程中,比如解析表情。

匹配到了表情,就生成一个TQRichTextEmojiRun 对象,这个对象记录了这个表情文本的位置。

原始字符等信息。把根据生成的对象放入richTextRunsArray这么一个数组中。用于文字渲染完后根据

这个对象渲染表情图片。因为都是继承baseRun来的。所以,解析出来的不管是表情,还是url什么,都会

统一执行渲染方法。

当我们解析完,得到了特殊文本的run数组对象。我们就绘制文本。然后填补表情等。这些就是在 drawRect

这个方法里面执行的了。我就不贴了。比较长。也比较多。

这里在说明下BaseRun 里面抽象的2个方法

//-- 替换基础文本- (void)replaceTextWithAttributedString:(NSMutableAttributedString*) attributedString{    [attributedString addAttribute:@"TQRichTextAttribute" value:self range:self.range];}//-- 绘制内容- (BOOL)drawRunWithRect:(CGRect)rect{    return NO;}

1.replaceTextWithAttributedString 这个方法,是用来替换文本的。说是替换,其实有2中情况。

如果文本单元是一个表情的话。我需要将原先的字符串用一个空格代替 ,然后预留出画表情的位置。绘制表情图片在图层

在比如文本单元是一个URL的话。其实这里没有替换以前的URL,只是设置了属性字符串。在URL这一段,让他蓝色显示。

2.drawRunWithRect

这个方法是绘制文本单元。和上面类似。如果表情文本单元,这个就要负责回事图片到图层。如果是URL,这个方法直接返回

NO 就好了。告诉绘制的时候。这个方法什么都没有做。(这跟后面做触摸响应时间时候。获得正确的点击区域判断有关系。)

这里我举个例子。比如你用这个控件。你说你不仅仅要实现URL,表情,你要加一个@XXX 要可以点击。也要绿色显示。

那你就可以继承TQRichTextBaseRun 实现一个TQRichTextAtRun。实现这2个方法。可以参照URLRun。然后在加入解析@xxx

这种类型字符串的方法。那么@就得到了支持。具体细节。看源码吧。


转载在:  http://www.cnblogs.com/CCSSPP/p/3339984.html

0 0
原创粉丝点击