iOS 图文混排链接可点击

对于这个话题我想到

1 第一个解决方法就是使用 webView 比较经典

把所有复杂工作都交给控件本身去处理了, 但是好像好多需要自定义的地方没法从 webView获得响应回调 :(估计也可以实现也比较复杂,而且这个需要对 html编码进行分析理解剥离等)

2 富文本方式核心框架 coretext

图文混排一点问题都没有关键是怎么对目标图片或者链接进行触发响应

要点:

(1)首先要封装的要相对独立拓展也方便首当其冲就是和服务端约定的数据模型 CoreTextModel 要敲定:

我们约定是一段文字中间用 "[1]" 做标记 [我是图片id] ,同时传一个图片和相应描述文字 "图片数组" 图片数组元素中主键就是这个图片id . 使用正则去组织 CoreTextModel 数组集合

我们开发过程中是默认一张图片点击这个图展示解释所以直接知道这张图片大小进行绘制, 如果是网络图片那么就应该预留这张图片的大小因为绘制如果不知道大小线性绘制过程就会卡在这如果预知大小那么就会继续往下绘制, 变成异步的

所以图片大小(宽高) 当然也是这个图片数组元素作为数据模型中的.属性元素而存在

如果是链接呢?? 所以 [1] 也可以认为是 [我是链接的id] 然后模型中有个参数区分当前需要插入的是图片还是链接或者其他需求然后进行枚举判断

那么有几种枚举就要有几个数据结构比如这里就有coreTextImageData && coreTextLinkData 和绘制的过程就需要有几种可变数组枚举的过程分别进行add

(2)其次绘制

首先来说绘制就是直接动用底层CoreText

绘制图片链接都是动用底层我现在的能力是调用理解修改拓展还不能自如的写任意自己想写东西我想也许当我到了这种程度才能成为大神吧哈哈路漫漫修远兮吾将上下求索

1,遍历数据模型 CoreTextModel 数组对文本夹杂"[1]"的重新组织

2,最终得到的富文本NSMutableAttributedString *result 都会通过 result.length 知道当前的图片/链接coreTextImageData/ coreTextLinkData的起始位置.

3,绘制 draw

a,绘制图片 (1)CTRunDelegateCallbacks callbacks;创建内存存储空间(怎么使用百度一大堆) (2) 使用0xFFFC作为空白的占位符拼入 add 在result里

b,绘制链接或者是一段连续子串触发给他指定颜色下划线大小等同样也add在result里

c,最终得到的 result 通过创建CTFramesetterRef实例获得获得要缓制的区域的高度再将生成好的CTFrameRef实例

ctFrame 和计算好的缓制高度height保存到CoreTextData实例中，最后返回CoreTextData实例(CoreTextData 这个结构体里面至少有ctFrame,height,result, coreTextImageData , coreTextLinkData )

ctFrame 这个相当于 OC中的 CGFrame , 但是成镜像且上下颠倒

盗个图:

CGFrame

Core Text CTFrameRef

所以如果触发点击事件那么还需要把这个绘制坐标转成UI坐标

4,那么现在得到的result

在指定点击的UIView 要使用iPhone重绘机制drawRect 触发方法[self setNeedsDisplay] 调用- (void)drawRect:(CGRect)rect

就可展示出这个视图了.

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    if (self.data == nil) {//self.data 是 CoreTextData
        return;
    }
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CTFrameDraw(self.data.ctFrame, context);
   //对所有指定位置的图片填充
    for (CoreTextImageData * imageData in self.data.imageArray) {
        UIImage *image = [UIImage imageNamed:imageData.name];
        if (image) {
            CGContextDrawImage(context, imageData.imagePosition, image.CGImage);
        }
    }
}

(4)触发点击事件

原理: 触发点击UIView 通过 UIGestureRecognizer * tapRecognizer.

点击事件中可以获得 CGPoint point = [recognizer locationInView:self]; 点击焦点 . 那么判断这个点击焦点是不是图或者是不是可触发的链接或者字符串就可以了

a,遍历 self.data.imageArray 判断是否存在满足条件如果满足则用通知post 去触发点击响应

我使用了一个参数 focusRect 把焦点区域放大一圈防止图片太小点击不上这个是我开发过程中需要也是必要的大家用不用看心情

链接就举一反三吧网上讲解也一大堆目的达到了

好的链接参考

http://blog.csdn.net/sinat_27706697/article/details/46286717

http://blog.csdn.net/sinat_27706697/article/details/46299953

http://ju.outofmemory.cn/entry/53649

https://github.com/kobe1941/HFCoreTextDemo

//唐

https://github.com/tangqiaoboy/iOS-Pro

下一篇接着讲触发弹出一个对话框的逻辑

iOS 图文混排 链接 可点击

iOS 图文混排链接可点击