iOS - 图文混排技术方案分享

前言

很多同窗在工做中都能遇到图文混排的需求。可是实现图文混排的技术方案有好几种，相应的方案优劣也有差异。今天和你们一块儿分享一下图文混排的技术方案以及个人选择。

Demo和解析工具已经开源 GitHub

现有方案

1. Html结合WebView。
2. 利用CoreText，手动解析手动布局。
3. 第三方库，如：YYText

先说第一种方案，优势是：对于客户端来讲，开发难度和代码量都是比较小的。同时也能作到为所欲为的布局，不须要考虑图片，缓存，和交互等等问题。缺点是：须要准备相应的Html页面，若是页面中涉及到权限验证，处理起来比较麻烦，另外，若是在业务场景复杂的状况下，针对性能和交互的优化须要花更多的时间。

第二种方案，经过原生的CoreText，使咱们能接管整个图文排版过程当中数据的管理以及界面的排布展现，优势是：自由度高，可以为所欲为展现排版样式、交互方式，效率上比较高。缺点是：代码量比较大，须要本身造好几个轮子，而且由于须要关注的地方比较多，如：图片缓存，排版交互等，开发周期上会比较长，同时先后端数据交互格式也须要相互配合。

第三种方案，这个方案省去造轮子的时间，能够将注意力放在排版和优化上，笔者采用的也是这个方案。

主要流程

获取数据

在获取数据的环节，重点在于先后端对于数据格式的配合。这一步直接影响了接下来咱们解析数据的工做。 根据业务需求，分别有多少种布局，须要设计好具体的数据规则，按照预约好的设计规则将数据传递给移动端。在这个环节，团队通过讨论的结果是直接沿用Html的数据规则。这么作的优势是，这是一套成熟的规则，不须要咱们另外去针对复杂的布局设定复杂的规则，往后便于维护，对于后端来讲也更为友好，不须要花费太多的时间对数据从新处理。

如

"<p>9.微分方程<img width="67" height="21" src="http://xxx.xxx/xxxxxxx.gif" align="absmiddle" />的特征方程为______.</p>"
复制代码

解析数据 & 数据缓存

在解析数据的环节，须要作的就是将获得的数据，按照事先约定好的规则进行解析。固然，数据内容的缓存也能够在解析以前作。在解析数据以前作数据缓存的好处是能够经过多线程来将解析数据和数据缓存两个工做并行进行，效率较高，缺点就是往后数据再取出来复用的时候须要再跑一次解析过程。

个人解析的大体思路是：经过正则先找出文本中的图片，通过处理，如：图片缩放，拼接地址等，再使用NSMutableAttributedString的构造方法，生成NSMutableAttributedString，到这一步数据解析已经基本完成。

+ (NSMutableAttributedString *)outputAttributedString:(NSString *)html{
    NSData *data = [html dataUsingEncoding:NSUTF8StringEncoding];
    NSMutableAttributedString * mutAttributedStr = [[NSMutableAttributedString alloc] initWithAttributedString:[[NSAttributedString alloc] initWithData:data options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType, NSCharacterEncodingDocumentAttribute: @(NSUTF8StringEncoding)} documentAttributes:NULL error:nil]];
    return mutAttributedStr;
}
复制代码

YYText

到了这一步，主要是利用YYText提供的接口和类来作布局。 个人作法是构造一个继承于YYTextAttachment，将上一步处理好的数据中找到图片部分替换成YYTextAttachment,将图片的展现交给YYTextAttachment，而且YYTextAttachment可以接受UIImageView类型的Content,这样一来能够直接使用SDWebImage来作图片缓存。而且能够在UIImageView中方便的添加点击事件。 另外，经过YYTextLayout能够灵活地实现咱们预想的布局。

总结

webView的方式适合轻量级以及简单的业务需求的页面，而且具有灵活性。

CoreText的方式适合较为发杂的业务场景以及较长的开发时间。

YYText毫无疑问是一份优秀的开源组件，适合绝大部分下的业务需求。

达到图文混排的方式有多种，这里与你们分享的技术方案可能未必适合大家，但愿能对大家在作技术选型时提供一点灵感。