图文混排其实很简单


要显示的文字

显示的最终效果:

图文混排其实很简单_第1张图片

技术点:UITextView+正则表达式+富文本

开始:新建工程,在storyboard文件中拖一个UITextView,拖一个属性出来叫tv,并进行如下设置

图文混排其实很简单_第2张图片

创建我们要显示的字符串

借助正则表达式找到要重点突出的内容,比如@朱主席 #老司机# 我们要找到它们还有它们在字符串中的位置(range),先来创建需要的正则表达式

图文混排其实很简单_第3张图片

开始匹配,在这里没有使用系统的正则表达式匹配,我们借助一个专门做正则表达式处理的第三方RegexKitLite,将RegexKitLite.h,RegexKitLite.m导入工程之后,进行mrc-arc的转换,并添加libicucore.tbd字符串处理库,导入头文件即可使用

查看匹配结果

打印结果如下:

图文混排其实很简单_第4张图片

可以看到正好是匹配出我们需要的四个部分,接下来就是遍历字符串找到这四个部分所在的位置并进行相应的操作即可,我们先来将这个普通字符串转化为富文本形式,并进行简单的设置

图文混排其实很简单_第5张图片

接下来就是遍历了,在这里注意一点,我们会将[挖鼻孔]转化为一张图片,[挖鼻孔]长度为5,转化为图片之后长度只有1,会影响到后面的内容所以我们要记录一下减少的部分(5-1 = 4),我们定义了一个全局变量来记录

下面这一部分就比较简单了

图文混排其实很简单_第6张图片
图文混排其实很简单_第7张图片

现在运行就能看到预期的效果了,剩下的工作就是点击网址能进行跳转,也就是能捕获到点击网址这个事件,这个只需要借助UITextView的一个代理方法即可

图文混排其实很简单_第8张图片

好吧,就讲到这,按照博客说的一步一步来做,就可以轻松实现一个富文本啦!!!


你可能感兴趣的:(图文混排其实很简单)