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

实现了一个富文本视图控件。主要针对表情图片,文本字符,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

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

 

posted @ 2013-09-27 10:49  tinyqf  阅读(10776)  评论(1编辑  收藏  举报