系列文章:
YYText 源码剖析:CoreText 与异步绘制
YYAsyncLayer 源码剖析:异步绘制
YYCache 源码剖析:一览亮点
YYModel 源码剖析:关注性能
YYImage 源码剖析:图片处理技巧
YYWebImage 源码剖析:线程处理与缓存策略
前言
YYText 是业界知名富文本框架,基于 CoreText 做了大量基础设施并且实现了两个上层视图组件:YYLabel 和 YYTextView。同其它 YYKit 组件一样,YYText 在性能方面表现优异,且功能出奇的强大,可以说是业界巅峰之作。
提起 YYText,都知道它的核心优化点:异步绘制,然而这只是冰山一角,YYText 中最为复杂和篇幅最多的是基于 CoreText 的各种计算,不得不说,源码中大量的计算很容易让人眼花缭乱。
若想深入理解 YYText 或者看懂本文,必须要了解 CoreText 基础知识并且有足够的耐心。框架代码量非常大,本文主要讲解框架基于 CoreText 的底层基础部分,不会过多的讲解 YYLabel 和 YYTextView 的细节。
一、框架总览
iOS UI 组件大都必须在主线程绘制,当绘制压力过大会造成界面卡顿,得益于多线程技术,我们可以在异步线程绘制图形从而减轻主线程压力。
YYText 核心思路:在异步线程创建图形上下文,然后利用 CoreText 绘制富文本,利用 CoreGraphics 绘制图片、阴影、边框等,最后将绘制完成的位图放到主线程显示。
步骤看起来很简单,源码中涉及到 CoreText 和 CoreGraphics 的绘制时需要大量的代码来计算位置,这也是本文的重点之一。为了简洁易懂,笔者会略过一些技术细节,比如纵向文本布局逻辑,一些奇怪的 BUG 修复代码。
希望读者朋友优先了解 CoreText 基础 (CoreText 官方介绍),这里放上两个结构图便于理解(图会有偏差):
二、CoreText 相关工具类
1、YYTextRunDelegate
在富文本中插入 key 为kCTRunDelegateAttributeName
的CTRunDelegateRef
实例可以定制一段区域的大小,通常使用这个方式来预留出一段空白,后面可以填充图片来达到图文混排的效果。而创建CTRunDelegateRef
需要一系列的函数名,使用繁琐,框架使用一个类来封装以减小使用成本:
@interface YYTextRunDelegate : NSObject <NSCopying, NSCoding>
...
@property (nonatomic) CGFloat ascent;
@property (nonatomic) CGFloat descent;
@property (nonatomic) CGFloat width;
@end
static void DeallocCallback(void *ref) {
YYTextRunDelegate *self = (__bridge_transfer YYTextRunDelegate *)(ref);
self = nil; // release
}
static CGFloat GetAscentCallback(void *ref) {
YYTextRunDelegate *self = (__bridge YYTextRunDelegate *)(ref);
return self.ascent;
}
...
@implementation YYTextRunDelegate
- (CTRunDelegateRef)CTRunDelegate CF_RETURNS_RETAINED {
CTRunDelegateCallbacks callbacks;
callbacks.dealloc = DeallocCallback;
callbacks.getAscent = GetAscentCallback;
...
return CTRunDelegateCreate(&callbacks, (__bridge_retained void *)(self.copy));
}
...
使用CTRunDelegateCreate()
创建一个CTRunDelegateRef
,同时使用__bridge_retained
转移内存管理,持有一个YYTextRunDelegate
对象。在该类中有数个静态函数作为回调,比如当回调GetAscentCallback()
函数时,将持有对象的ascent
属性作为返回值。
注意一:这样做似乎存在内存管理问题,CTRunDelegateRef
实例持有的YYTextRunDelegate
对象如何释放?
答案就在CTRunDelegateRef
释放时会走的DeallocCallback()
回调中,将内存管理权限转移给一个YYTextRunDelegate
局部变量自动管理内存。
注意二:可以看到CTRunDelegateCreate(&callbacks, (__bridge_retained void *)(self.copy))
代码对self
做了一个copy
操作 (该类的 copy 为深拷贝) ,这样做是为了什么呢?
可能第一反应是想到CTRunDelegateRef
持有self
的副本是为了避免循环引用,然而该方法并没有让self
持有CTRunDelegateCreate()
后的实例,所以也不存在循环引用问题。
实际上这里应该只是创建一个副本,当该方法返回后保证配置数据的安全性 (避免被外部意外更改)。
2、YYTextLine
创建一个富文本,可以拿到CTLineRef
和CTRunRef
以及一些结构数据 (比如ascent descent
等),CTRunRef
包含的数据内容并不是很多,所以框架没有专门做一个类来包装它。使用YYTextLine
来包装CTLineRef
计算保存一些数据便于后面的计算,比如使用CTLineGetTypographicBounds(...);
方法来拿到ascent descent leading
等。
计算 line 位置和大小
_bounds = CGRectMake(_position.x, _position.y - _ascent, _lineWidth, _ascent + _descent);
_bounds.origin.x += _firstGlyphPos;
_position
是指 line 的origin
点位于context
上下文的坐标转换为UIKit
坐标系的值,那么结合上面的结构图2分析:_position.y - _ascent
就是 line 的最小y
值,_ascent + _descent
就是 line 高度(没有算上行间距 leading)。
这里最小x
值加了一个_firstGlyphPos
,它是当前 line 第一个 run 相对于 line 的偏移,通过CTRunGetPositions(...);
算出,可能有一种场景,line 的origin
位置与第一个 run 的位置有偏移(笔者并没有模拟出这种情况)。
找出所有的占位 run
实际上这就是找出之前说的CTRunDelegateRef
,框架每一个CTRunDelegateRef
都对应了一个YYTextAttachment
,它表示一个附件(图片、UIView、CALayer),具体实现后面会单独讲。这里只需要知道基本原理就是用CTRunDelegateRef
占位,用YYTextAttachment
填充。
当遍历 line 里面的 run 时,若该 run 包含了YYTextAttachment
说明这是占位 run,那么至关重要的一步是计算这个 run 的位置和大小(便于后面将附件填充到正确位置)。
runPosition.x += _position.x;
runPosition.y = _position.y - runPosition.y;
runTypoBounds = CGRectMake(runPosition.x, runPosition.y - ascent, runWidth, ascent + descent);
_position
上面已经说明了意义,runPosition
是当前 run 相对于当前 line origin
的偏移,那么runPosition.x + _position.x
表示了 run 相对于图形上下文的x
方向位置,后面同理。
最终,将这个YYTextAttachment
附件对象和 run 位置大小信息缓存起来(后面会专门分析实现逻辑)。
3、YYTextContainer
创建CTFrameRef
使用CTFramesetterCreateFrame(...)
方法,这个方法需要一个CGPathRef
参数,为了使用简便,框架抽象了一个YYTextContainer
类重点属性如下:
@property CGSize size;
@property UIEdgeInsets insets;
@property (nullable, copy) UIBezierPath *path;
@property (nullable, copy) NSArray<UIBezierPath *> *exclusionPaths;
使用者可以简单的使用CGSize
来制定富文本的大小,也可以用内存自动管理功能强大的UIBezierPath
来制定路径,同时包含一个exclusionPaths
排除路径。
┌─────────────────────────────┐ <------- container
│ │
│ asdfasdfasdfasdfasdfa <------------ container insets
│ asdfasdfa asdfasdfa │
│ asdfas asdasd │
│ asdfa <----------------------- container exclusion path
│ asdfas adfasd │
│ asdfasdfa asdfasdfa │
│ asdfasdfasdfasdfasdfa │
│ │
└─────────────────────────────┘
CoreText 是支持镂空效果的,就是由这个 exclusion path 控制。该类的属性访问都是线程安全的,还做了一些精致的容错。
三、YYTextLayout 核心计算类
YYTextLayout
包含了布局一个富文本几乎所有的信息,同时还将众多的绘制相关 C 代码放在了这个文件里面,所以这个文件非常庞大。我们先不管这些绘制代码,YYTextLayout
主要的作用是计算各种数据,为后面的绘制做准备。
核心计算在+ (YYTextLayout *)layoutWithContainer:(YYTextContainer *)container text:(NSAttributedString *)text range:(NSRange)range;
初始化方法中,这个方法为后面的各种查询计算打下了数据基础,接下来就分析一下这个超过 500 行的初始化方法做了些什么。
1、计算绘制路径和路径的位置矩形
基于YYTextContainer
对象计算得到CGPathRef
是主要逻辑,为了避免矩阵属性出现负值,使用CGRectStandardize(...)
来矫正。由于 UIKit 和 CoreText 坐标系的差别,最终得到的矩阵要先做一个坐标系翻转:
rect = CGRectApplyAffineTransform(rect, CGAffineTransformMakeScale(1, -1));
cgPath = CGPathCreateWithRect(rect, NULL);
或者
CGAffineTransform trans = CGAffineTransformMakeScale(1, -1);
CGMutablePathRef transPath = CGPathCreateMutableCopyByTransformingPath(path, &trans);
它们道理是一样的,都是沿着 x 轴翻转坐标系 180°,可能有人有疑问,UIKit 转换为 CoreText 坐标系不是除了翻转 180°,还要移动一个绘制区域高度么?确实这里少做了一个操作,那是因为框架是使用CTRunDraw(...)
遍历绘制 run,在绘制 run 之前会用CGContextSetTextPosition(...)
指定位置(这个位置是 line 相对于绘制区域计算的),所以这个地方的 y 坐标是否正确已经没有意义了。
绘制路径的矩形大小位置pathBox
的计算:
比如这种情况,
pathBox = (CGRect){50, 50, 100, 100}
,可想而知pathBox
指的就是真正绘制区域相对于绘制上下文的位置和大小,这个数据非常有用,意味着后面计算 line 和 run 的位置时,都要加上 cgPathBox.origin
偏移,才能真正表示 line 和 run 相对于绘制上下文的位置(比如 line 的origin
是相对于绘制区域的一个点,而不是相对于绘制上下文)。
2、初始化 CTFramesetterRef 和 CTFrameRef
这一步很简单,利用两个函数就搞定:CTFramesetterCreateWithAttributedString(...) CTFramesetterCreateFrame(...)
。值得注意的是框架支持了几个 CTFrameRef 的属性,比如kCTFramePathWidthAttributeName
,这些属性同样是通过YYTextContainer
配置的。
3、计算 line 总 frame 和行数
前面已经创建了一个富文本CTFrameRef
,那么这里只需要遍历所有的 line 做计算,可以看到如下代码获取每一个 line 的位置大小:
// CoreText coordinate system
CGPoint ctLineOrigin = lineOrigins[i];
// UIKit coordinate system
CGPoint position;
position.x = cgPathBox.origin.x + ctLineOrigin.x;
position.y = cgPathBox.size.height + cgPathBox.origin.y - ctLineOrigin.y;
YYTextLine *line = [YYTextLine lineWithCTLine:ctLine position:position vertical:isVerticalForm];
CGRect rect = line.bounds;
lineOrigins
是通过CTFrameGetLineOrigins(...)
得到的,所以需要转换为 UIKit 坐标系方便计算。可以看到转换时做了一个cgPathBox.origin
的偏移,这就是之前计算的实际绘制矩形的偏移,以此得到的position
就是相对于图形上下文的点了,然后利用这个点初始化YYTextLine
,前面讲了YYTextLine
的内部实现,这里就直接得到了当前 line 的位置和大小:rect
。
然后,利用CGRectUnion(...)
函数将每一个 line 的rect
合并起来,得到一个包含所有 line 的最小位置矩形textBoundingRect
。
计算 line 的行数
并不是一个 line 就占有一行,当有排除路径时,一行可能有两个 line:所以,需要计算每个 line 所在的行,便于为后续的很多计算提供基础,比如最大行限制。
当当前 line 的高度大于 last line 的高度时,若当前 line 的 y0 在 baseline 以上,y1 在 baseline 以下,就说明没有换行。
当当前 line 的高度小于 last line 的高度时,若 last line 的 y0 在 baseline 以上,y1 在 baseline 以下,就说明没有换行。
4、获取行上下边界数组
typedef struct {
CGFloat head;
CGFloat foot;
} YYRowEdge;
声明了一个YYRowEdge *lineRowsEdge = NULL;
数组,YYRowEdge
表示每一行的上下边界。计算逻辑大致是这样的:
遍历所有 line,当当前 line 和 last line 为同一行时,取 line 和 last line 共同的最大上下边界:
lastHead = MIN(lastHead, rect.origin.y);
lastFoot = MAX(lastFoot, rect.origin.y + rect.size.height);
当当前 line 和 last line 为不同行时,取当前 line 的上下边界:
lastHead = rect.origin.y;
lastFoot = lastHead + rect.size.height;
最终的结果可能是这样的:
foot1
和head2
之间会存在一个间隙,这个间隙就是行间距,框架的处理是将这个间隙均分:
5、计算绘制区域总大小
上面已经计算了绘制路径的位置矩形pathBox
,这只是实际绘制区域的大小,业务中若设置了YYTextContainer
的线宽或者边距,那么实际业务需要的绘制区域总大小会更大:
图中蓝色填充区域即为实际绘制区域pathBox
,绘制区域总大小应该是蓝色边框所覆盖的范围(请忽略线与线之间的小缝隙)。借助CGRectInset(...) UIEdgeInsetsInsetRect(...)
等函数能轻易的计算出来,同样的需要用CGRectStandardize(...)
纠正负值。
6、line 截断
当富文本超过限制时,可能需要对最后一行可显示的行末尾做一个省略号:aaaa...
。
首先有一个NSAttributedString *truncationToken;
,这个 token 可以自定义,框架也有默认的,就是一个...
省略号,然后将这个truncationToken
拼接到最后一个line
:
NSMutableAttributedString *lastLineText = [text attributedSubstringFromRange:lastLine.range].mutableCopy;
[lastLineText appendAttributedString:truncationToken];
当然,这样lastLineText
肯定会超过绘制区域的范围,所以要使用系统提供的方法CTLineCreateTruncatedLine(...)
来创建自动计算的截断 line,该方法返回一个CTLineRef
,这里转换为YYTextLine
并且作为YYTextLayout
的一个属性truncatedLine
。
这也就意味着,YYText 的截断总是在富文本最后的,且只有一个。
7、缓存各种 BOOL 值
遍历富文本对象,缓存一系列的 BOOL 值:
void (^block)(NSDictionary *attrs, NSRange range, BOOL *stop) = ^(NSDictionary *attrs, NSRange range, BOOL *stop) {
if (attrs[YYTextHighlightAttributeName]) layout.containsHighlight = YES;
if (attrs[YYTextBlockBorderAttributeName]) layout.needDrawBlockBorder = YES;
if (attrs[YYTextBackgroundBorderAttributeName]) layout.needDrawBackgroundBorder = YES;
if (attrs[YYTextShadowAttributeName] || attrs[NSShadowAttributeName]) layout.needDrawShadow = YES;
...
};
[layout.text enumerateAttributesInRange:visibleRange options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired usingBlock:block];
可以猜测,YYTextBlockBorderAttributeName
等就是 YYText 定制的富文本属性,在初始化YYTextLayout
时就将富文本中是否包含自定义 key 缓存起来。
想象一下,若此处不使用这些 BOOL 值,那么在绘制的时候框架也需要去遍历查找是否有自定义的 key,若有再执行自定义的绘制逻辑。也就是说,这个遍历是必须要做的,要么在初始化时做,要么是绘制的时候做。
按照框架的设定,初始化YYTextLayout
和绘制都可以在主线程也可以在异步绘制执行,所以这里的目的主要不是为了将这个遍历逻辑放入异步线程,而是为了缓存。
初始化YYTextLayout
时缓存这些 BOOL 值过后,二次绘制就不需要再遍历了,以此达到优化性能的目的。
8、合并所有的附件
前面有讲到,YYTextLine
初始化时会将所有的附件及其相关位置信息装到数组里面,那么这里遍历所有的 line 将附件相关数组合并到一起,那么之后的绘制就不需要再去遍历 line 获取附件了。
9、小结
除开YYTextLayout
初始化方法,还有在#pragma mark - Query
标记下的一系列查询方法,这些查询方法都是基于上面的初始化计算数据。至于#pragma mark - Draw
标记下的绘制相关方法后面再说。
YYTextLayout
初始化方法非常的长,笔者试图将这个方法分解一下,发现这样会更复杂。原因是这个初始化方法里面包含了众多的需要手动管理的内存,比如CGPathRef CTFramesetterRef CTFrameRef
等。
可能有人会说,哪个地方需要引用计数减一,手动release
不就行了?
但是实际情况更加复杂,因为整个初始化过程随时可能会被中断。比如calloc(...)
开辟内存可能会失败,CGPathCreateMutableCopy(...)
创建路径可能会失败,所以,在任何情况失败需要中断初始化时,大概会如下写:
if (failed) {
CFRelease(...);
free(...);
...
return nil;
}
而且这个地方你必须要将前面所有手动管理的内存释放掉,当这个代码过多的时候,可能会让你疯掉。
所以作者用了一个很巧的方法,使用goto
:
fail:
if (cgPath) CFRelease(cgPath);
if (lineOrigins) free(lineOrigins);
...
return nil;
那么,当某个环节失败时,直接这么写:
if (failed) {
goto fail;
}
这个场景下,goto
的使用确实非常适合。
四、自定义富文本属性
我们知道,NSMutableAttributedString
对象使用addAttribute:value:range:
等一系列方法可以添加富文本效果,这些效果有三个要素:名字 (key)、值 (value)、范围。YYText 也拓展了一些自己的名字 (YYTextAttribute 文件):
UIKIT_EXTERN NSString *const YYTextAttachmentAttributeName;
UIKIT_EXTERN NSString *const YYTextHighlightAttributeName;
...
当然为这些 key 都创建了对应的 value (类),比如YYTextHighlightAttributeName
对应YYTextHighlight
。但是这些自定义的 key CoreText 是识别不了的,那么框架内部是如何处理的呢?
NSDictionary *attrs = (id)CTRunGetAttributes(run);
id anyValue = attrs[anyKey];
if (anyValue) { ... }
很简单,实际上就是遍历富文本,通过上面这段代码就能找到某个 run 是否包含自定义的 key,然后做相应的绘制逻辑。
1、图文混排实现
YYText 大部分的自定义属性都算是“装饰”文本,所以只需要绘制的时候判断有没有包含对应的 key,若包含就做相应的绘制逻辑。但是有一个自定义属性比较特殊:
YYTextAttachmentAttributeName : YYTextAttachment
因为这个是添加一个附件 (UIImage、UIView、CALayer),所以需要一个空位,那么设置这个自定义属性的时候还需要设置一个CTRunDelegateRef
:
NSMutableAttributedString *atr = [[NSMutableAttributedString alloc] initWithString:YYTextAttachmentToken];
YYTextAttachment *attach = [YYTextAttachment new];
attach.content = content; // UIImage、UIView、CALayer
...
[atr yy_setTextAttachment:attach range:NSMakeRange(0, atr.length)];
YYTextRunDelegate *delegate = [YYTextRunDelegate new];
...
CTRunDelegateRef delegateRef = delegate.CTRunDelegate;
[atr yy_setRunDelegate:delegateRef range:NSMakeRange(0, atr.length)];
(1) 对齐方式
图文混排添加图片时,业务中往往有很多对齐方式,如何来对齐通过调整CTRunDelegateRef
的ascent descent
来控制,框架对其方式有三种:居上,居下,居中。
让占位 run 的ascent
始终等于文本的ascent
(若占位 run 太矮则贴着 baseline) 。
让占位 run 的descent
始终等于文本的descent
(若占位 run 太矮则贴着 baseline) 。
居中的计算相对复杂,需要让占位 run 的中点和文本的中点对齐 (如图),那么图中yOffset + (占位 run 的 height) * 0.5
就等于占位 run 的ascent
(若占位 run 太矮则贴着 baseline) 。
当然,上面图中的图片可以为UIView CALayer
。到目前为止,占位 run 的位置已经确定了,接下来就需要把 UIImage UIView CALayer
绘制到相应的空位上了。
(2) 绘制附件
绘制的逻辑在YYTextLayout
下的方法YYTextDrawAttachment(...)
,对于UIImage
图片的附件,还能设置UIViewContentMode
,会根据一开始设置的占位 run 的大小做图片填充变化,然后调用 CoreGraphics API 绘制图片:
CGImageRef ref = image.CGImage;
if (ref) {
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0, CGRectGetMaxY(rect) + CGRectGetMinY(rect));
CGContextScaleCTM(context, 1, -1);
CGContextDrawImage(context, rect, ref);
CGContextRestoreGState(context);
}
若附件的类型是UIView CALayer
,那分别就需要额外的传入父视图、父 layer:targetView targetLayer
,然后的操作就是简单的将UIView
添加到targetView
上或者将CALayer
添加到targetLayer
上。
2、点击高亮实现
YYTextHighlightAttributeName : YYTextHighlight
YYTextHighlight
包含了单击和长按的回调,还包括一些属性配置。在YYLabel
中,通过下列方法来写触发逻辑:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
涉及到判断点击的CGPoint
点对应富文本中的具体位置,所以有很多复杂的计算,这里不展开了。
当找到了应该触发的YYTextHighlight
,更换具体的YYTextLine
为高亮状态的YYTextLine
,然后重绘。当手松开时,切换会常态下的YYTextLine
。
这就是点击高亮的实现原理,实际上就是替换YYTextLine
更新布局。
五、异步绘制
上面介绍了几种特殊的自定义富文本属性,对于其它的自定义属性,基本上都是使用 CoreGraphics API 绘制,比如边框、阴影等,当然 CoreText 自带有很多效果,YYText 做了一些改良和拓展。
可以看到绘制方法都会带有一个是否取消的 Block,比如static void YYTextDrawShadow(YYTextLayout *layout, CGContextRef context, CGSize size, CGPoint point, BOOL (^cancel)(void));
。这个cancel
就是用来判断是否需要取消本次绘制,这样就能在一次绘制的任意位置中断,及时的取消无用的绘制任务以提高效率。
YYText 富文本可以异步绘制,也可以在主线程绘制,创建布局类及其相关计算可以在任意线程,可以根据业务需求选择适合的策略。
具体实现有些复杂,所以关于异步绘制的具体原理可以看笔者专门的一篇博客:
YYAsyncLayer 源码剖析:异步绘制
YYAsyncLayer 就是从 YYText 里面提取出来的组件,核心就是一个支持异步绘制的CALayer
子类,相信看完 YYAsyncLayer 的解析会对异步绘制有较深的认识。
后语
YYText 确实过于重量,本文只是对基础部分取重点做了解析,除此之外还有非常多的计算和逻辑,感兴趣可以自行研究。
从代码质量来看,YYText 几乎无可挑剔,细节处理非常棒,逻辑代码很精炼,笔者尝试过重写部分逻辑代码,发现优化半天又回到了源码的写法 😂,不得不佩服作者的功底。
至此,笔者已经阅读了 YYKit 大部分源码,曾多次被作者的代码技巧所折服,几乎每一句代码都经得起推敲,笔者也更加深刻的理解了性能优化,明白了优化要从细节做起。
突然想起了笔者和一位好友的笑梗。每逢佳时:
“这确实是一个非常巧妙且令人兴奋的技巧”。