在iOS开发中,经常遇到富文本内容的展示,虽然系统的NSAttributedString功能已经比较完善,但是比较缺乏定制化的内容,如果想自由度更高的显示富文本,可以尝试YYText这个框架。下面会对框架的使用进行简单的介绍。

常用的富文本属性

1.背景色块:系统的AttributedString虽然也有背景色的属性设置,但是有时候需要色块加上圆角。就需要用到YYTextBorder

背景色块

NSMutableAttributedString* str = [[NSMutableAttributedString alloc] initWithString:XX];    //创建内容富文本

[str yy_insertString:@" " atIndex:0];

[str yy_appendString:@" "];            //前后的间距

YYTextBorder * border = [YYTextBorder borderWithFillColor:XXColor cornerRadius:XX];    //创建背景色(颜色与圆角)

border.insets=UIEdgeInsetsMake(0,0,0,0);        //背景色的偏移量

[str setYy_textBackgroundBorder:border];

2.图文混排:也就是字符串中添加图片,就需要用到YYTextAttachment这个类。

先引用一下作者的简单介绍

YYTextAttachment是NSAttributedString的类簇,它的实例作为富文本key属性YYTextAttachmentAttributeName的value。当富文本包含YYTextAttachment时,它会采用文本规则展示。比如,attachment的内容是UIImage时,它会被绘制为CGContext;attachment的内容是UIView或CALayer时,它会被加入到text container的view层或layer层上。

简单用法UIImage *image = [UIImage imageNamed:@"XX"];    //要显示的图片

NSMutableAttributedString *attachText = [NSMutableAttributedString yy_attachmentStringWithContent:image contentMode:UIViewContentModeCenter attachmentSize:CGSizeMake(10, 10) alignToFont:[UIFont boldSystemFontOfSize:16] alignment:YYTextVerticalAlignmentCenter];    //content:内容  size:图片尺寸 alignToFont:字符串内字体的格式

[result appendAttributedString:attachText];     //把图片加入字符串中

字符串的属性还有很多,比如高亮YYTextHightlight,边框YYTextBorder,下划线YYTextBorder 等等等等。可以说是非常丰富了。

YYLabel的使用

有了富文本的内容,现在就需要一个显示内容的容器,YYKit提供了文本框YYLabel,使用也很方便,下面会举例几个常用的设置。

1.YYTextContainer

显示text的容器,初始化方法分为矩形: + (instancetype)containerWithSize:(CGSize)size;

和非矩形:+ (instancetype)containerWithPath:(nullableUIBezierPath*)path;

也有一些常见的属性可以设置,如行数 maximumNumberOfRows  大小 size

2.YYTextLayout

用来控制text的布局,大神的分析如下

这个真的是核心内容了,这个文件一共3300多行的代码,从代码量上就能看出它的地位。这个类中存储着text的layout结果,所有的property都是readonly的。实现的接口有:

1、通过一些类方法初始化的方法(YYTextContainer、CGSize和text)

2、layout之后的attributes,都是只读的

3、从layout中读取信息(位置、range等等)

4、绘制text layout

这个类主要是使用上面讲过的所有的数据来绘制text,这部分的代码还是需要一点一点的去读的,如果是新手每一行都会有收获(比如说我),如果是老司机就没有必要一行行的读了,了解他的解题思路和解决这个问题的办法就可以。下面说一下生成layout的那个500行代码的情况,就按照代码的顺序从上往下大概的说明一下干了什么。

1)、初始化一系列使用到的变量

2)、安全判断,text和container

3)、判断是否需要修复emoji的bug(iOS8.3中)

4)、判断是否设置了path属性和exclusionPaths数组,做相应的计算拿到cgpath,如果cgpath为空则goto fail 返回nil(如果设置了path,size和insets就没有用了)

5)、判断是不是奇偶填充,判断pathWidth是否为0,判断是否是垂直展示

6)、使用text创建CTFramesetterRef,创建失败goto fail

7)、使用上一步中创建的frameSetter创建CTFrameRef

8)、从CTFrameRef的对象中获得每一行、ctRun数组,计算每一行的frame,判断是否实现了linePositionModifier这个协议,有的话调用协议方法。

9)、计算bounding size

10)、判断是否需要truncation,和按那种方式处理

11)、判断是否垂直布局text,需要的话,旋转布局

12)、判断得到的visibleRange长度,有效的话遍历text中的attributes,配置对应的layout属性

13)、配置layout中的attachments

14)、配置结束,返回layout

绘制时就是根据layout中的配置情况绘制相应的特征,这段代码在此就不做分析了。

我这边只是用来确定YYLabel的布局,用法如下YYTextLayout *layout = [YYTextLayout layoutWithContainer:container text:str];

self.label.size= layout.textBoundingSize;

self.titleLabel.textLayout= layout;

以上就是YYText的一些简单用法,后续如果有新的需求,会更仔细的研究下这个框架更高级的用法,很多功能其实还没有用到,但是已经体会到了代码开源的好处。

其实我们在开发中遇到的大部门复杂功能,在github中多多少少都能找到类似的框架去参考,很多情况下我们是不需要造轮子的。但是当你找到一个好轮子时,一定要多多理解实现原理,第一能让你后续对框架的改造更容易,第二也是让我们去学习,感受大神的思想,开阔自己的思维,总之是好处多多。而自己写代码时,对一些常用功能,也要做好解耦和封装,也要照着开源的规范要求自己,这样后续的开发中是非常提高效率的。

yytext显示html并编辑,YYText的使用相关推荐

  1. 支付宝小程序获取复选框选中值id,使其显示且可编辑

    问题概述 在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...

  2. 八 Civil3d常用显示样式的编辑与创建 ----点标签样式2

    在上一节中,我们大致了解了一下点位高程标签的构造,今天我们就来自定义一个类似的标签样式. 在工具空间上如下图找到[点位高程]文件夹,然后右键,点击[新建...] 随后弹出对话框如下,在名称栏中输入一个 ...

  3. 八 Civil3d常用显示样式的编辑与创建 ----纵断面标签

    今天要讲的是有关纵断面标签的内容,如下图所示,将一个平面路线的拐点桩号在纵断面中相应的位置上也显示出来,便于查看.                想要创建在纵断面上显示平面路线相关信息的标签,那就要知 ...

  4. 计算机重置网络后,win10重置网络后以太网和wlan状态都显示..._网络编辑_帮考网...

    1.当Win10网络连接受限或出现黄色感叹号时,右击任务栏"网络连接"图标,从其右键菜单选择"网络和共享中心". 2.待进入"网络和共享中心" ...

  5. 服务器控件下拉框显示隐藏,演练:在 GridView Web 服务器控件中编辑时显示下拉列表...

    演练:在 GridView Web 服务器控件中编辑时显示下拉列表 08/18/2008 本文内容 更新:2007 年 11 月 GridView 控件默认显示用于编辑的文本框.可以使用 ASP.NE ...

  6. PMEdit一个富文本框可以编辑文本、图片并可以显示GIF动画

    一.在开始之前首先吐槽一下,本人是一个独立开发者,在中国独立开发者就代表一个比较苦逼的行业,特别是对底层东西进行开发者,尤其本人研究方向是编译器.解析器基本上没有公司要,所以出来做个独立开发者.作为独 ...

  7. PMEdit一个富文本框可以编辑文本、并可以显示GIF动画

    PMEdit一个富文本框可以编辑文本.并可以显示GIF动画 发布时间:2013-04-14 发布来源: 护士必必要有同情心和一双愿意工作的手. 一.在开端之前起首吐槽一下,本人是一个自力开辟者,在中国 ...

  8. 发布微头条显示调用服务器失败,发布的微头条,有的标明“内容已编辑”,有的未标示,这是怎么回事?...

    发布的微头条,有的标明"内容已编辑",有的未标示,这是怎么回事? 看到这个话题没人回答,我来答复一下题主.信息创造价值,或许我能解开你的疑惑. 在以前,我们编辑微头条的时候,把自己 ...

  9. weboffice功能的实现:在线编辑,保护文档部分编辑,显示,下载

    点聚Weboffice IE 上的用法: Weboffice7文件夹是weboffice的文件: .cab是一个压缩形式的文件,里面包含了安装信息,IE会自动安装. Main.js是weboffice ...

  10. TextKit YYText

    TextKit http://www.jianshu.com/p/2f72a5fa99f1 这篇文章,对TextKit总结的很好,学习了下,没有深入-- 还有他提供的参考资料,值得细读: 提到的基本书 ...

最新文章

  1. Netty with protobuf(二)
  2. 10-Python与设计模式--享元模式
  3. JS 基础事件的用法
  4. 上帝的玩偶:haXe语言
  5. python3软件怎么使用_python3怎么使用pip
  6. 元气骑士超级计算机有什么用,元气骑士三持技巧分享,手残党的福利轻松过关...
  7. mosquitto支持websocket的使用方法
  8. 学习matlab体会,学习matlab心得体会.doc
  9. CAD卸载重新安装方法,使用清理卸载工具完全彻底删除干净CAD各种残留注册表和文件。
  10. Gantt - attachEvent事件监听 - 一个参数事件
  11. 移动硬盘显示要格式化怎么办?
  12. 服务器改无线路由器怎么设置,怎么把旧路由器改装成中继器
  13. HDU6070 Dirt Ratio
  14. 流利阅读12.23 The 'great dying': rapid warming caused largest extinction event ever, report says
  15. Python: PS 滤镜--马赛克
  16. Vue父组件与子组件传递事件/调用事件
  17. Easy Deep Learning——卷积层
  18. 一对一直播怎么开发?一对一直播app开发关键点
  19. openlayers3(五)根据坐标点画圆、线、多边形
  20. Python - yamail - 进阶之路 - Day08

热门文章

  1. excel图表交互联动_office2016下PPT图表进行交互联动的技巧
  2. html5shiv不起作用,HTML5shiv不会对IE8
  3. c51单片机模块化编程
  4. 图灵、冯诺依曼谁才配得上计算机之父?
  5. php中轮转图片js代码,纯JavaScript手写图片轮播代码
  6. JDK和JRE区别和联系
  7. AI(人工智能)的英文全称?AI指什么,包含什么?
  8. 【Adobe Premiere Pro 2020】pr模板下载和pr使用模板创建视频、pr调色说明、pr全景视频编辑说明、pr无缝转场特效制作流程、pr保存预设效果和pr使用预设效果
  9. mst358 温控(热敏电阻)调试
  10. Hadoop HDFS 实现原理图文详解