iOS中不同形式的图文混排技术的实现总结

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看317 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 317|回复: 1
收起左侧

iOS中不同形式的图文混排技术的实现总结

[复制链接]
3rdev 发表于 2016-6-9 16:16:03 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

在我们iOS项目开发中,我们经常会遇到图文混排的情况,那么什么是图文混排呢?

iOS中不同形式的图文混排技术的实现总结 1

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 1


那么什么是图文混排呢?

在这里我给大家举个例子大家就明白了,例如我们在微博类,社交聊天应用中常常会遇到各种表情,各种链接的解析。问题来了,图文混排的形式有哪些呢?



图文混排的形式

1. 富文本形式
2. core Text(文字排版)
3. TextKit
4. UIWebView




1、富文本(attributeString)

我们可以采用attributeString来进行图文混排。例如一个文字上插入一个图片。实现如下:

[Swift] 纯文本查看 复制代码
    NSString *content = @"文字加上表情[得意][酷][呲牙]";
    NSMutableAttributedString *attrStr = [Utility emotionStrWithString:content];
    _firstLabel.attributedText= attrStr;
    NSString *text = @"<微信>深圳市腾讯计算机系统有限公司成立于1998年11月,由马化腾、张志东、许晨晔、陈一丹、曾李青五位创始人共同创立。[1]  是中国最大的互联网综合服务提供商之一,也是中国服务用户最多的互联网企业之一。[2]腾讯多元化的服务包括:社交和通信服务QQ及微信/WeChat、社交网络平台QQ空间、腾讯游戏旗下QQ游戏平台、门户网站腾讯网、腾讯新闻客户端和网络视频服务腾讯视频等。。";
    NSMutableAttributedString *attrStr2 = [Utility exchangeString:@"<微信>" withText:text imageName:@"header_wechat"];
    _secondLabel.attributedText = attrStr2;





2、coreText

什么是coreText?

iOS/OSX中用于描述富文本的类是NSAttributedString,顾名思义,它比NSString多了Attribute的概念。它可以包含很多属性,粗体,斜体,下划线,颜色,背景色等等,每个属性都有其对应的字符区域。在OSX上我们只需解析完毕相应的数据,准备好NSAttributedString即可,底层的绘制完全可以交给相应的控件完成。但是在iOS上就没有这么方便,想要绘制Attributed String就需要用到CoreText了。(当然iOS6之后已经有AttributedLabel了。)

使用CoreText进行NSAttributedString的绘制,最重要的两个概念就是CTFrameSetter和CTFrame。他们的关系如下:

iOS中不同形式的图文混排技术的实现总结 2

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 2


其中CTFramesetter是由CFAttributedString(NSAttributedString)初始化而来,可以认为它是CTFrame的一个Factory,通过传入CGPath生成相应的CTFrame并使用它进行渲染:直接以CTFrame为参数使用CTFrameDraw绘制或者从CTFrame中获取CTLine进行微调后使用CTLineDraw进行绘制。

一个CTFrame是由一行一行的CLine组成,每个CTLine又会包含若干个CTRun(既字形绘制的最小单元),通过相应的方法可以获取到不同位置的CTRun和CTLine,以实现对不同位置touch事件的响应。

iOS中不同形式的图文混排技术的实现总结 3

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 3





3、TextKit

iOS 7 开始,功能强大,简单易用,也可以进行图文混排。TextKit并没有新增的类,他是在原有的文本显示控件上的封装,可以使用平时我们最喜欢使用的UILabel,UITextField,UITextView里面就可以使用了。现在来详细介绍一下。


3.1、NSAtrributedString

这是所有TextKit的载体,所有的信息都会输入到NSAttributedString里面,然后将这个String输入到Text控件里面就可以显示了。


3.2、NSTextAttachment

iOS7新增的类,作为文本的附件,可以放文件,可以放数据,以 NSAttachmentAttributeName这个key放入NSAttributedString里面,在表情混排这里,我们将放入image。


3.3、重载NSTextAttachment

本来是可以直接使用NSTextAttachment,但是我们需要根据文字大小来改变表情图片的大小,于是我们需要重载NSTextAttachment,NSTextAttachment实现了NSTextAttachmentContainer,可以给我们改变返回的图像,图像的大小。




4、UIWebView

利用UIWebView加载HTML实现图文混排。

但是注意:UIWebView本身有内存问题,占用内存相比较而较大不推荐,但是使用比较灵活,代码实现如下:

[Objective-C] 纯文本查看 复制代码
- (void)loadHtmlToWebView
{
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"text" withExtension:@"html"];
    [_webView loadRequest:[NSURLRequest requestWithURL:url]];
}

- (void)loadHtmlToTextView
{

    // Create attributed string from HTML
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"text" withExtension:@"html"];
    NSAttributedString *attrStr = [[NSAttributedString alloc]
                                   initWithFileURL:url
                                   options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}
                                   documentAttributes:nil error:nil];
    [_textView setAttributedText:attrStr];

}





结束

图文混排就讲到这里,这里就不再对每一种实现方式进行一一讲解了,大家如果有兴趣的话,可以下载例子来进行研究研究。

几个例子的效果图:

iOS中不同形式的图文混排技术的实现总结 4

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 4


iOS中不同形式的图文混排技术的实现总结 5

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 5


iOS中不同形式的图文混排技术的实现总结 6

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 6


iOS中不同形式的图文混排技术的实现总结 7

iOS中不同形式的图文混排技术的实现总结 - 敏捷大拇指 - iOS中不同形式的图文混排技术的实现总结 7


源码下载地址:
http://pan.baidu.com/s/1miRHPyw


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

美人虞 发表于 2016-6-13 12:12:34 | 显示全部楼层
不明觉厉
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表