YYLabel是如何实现numberOfLines(固定行数)的

前言

自己如何实现一个像UILabel这样的系统控件?要仿写一个系统的控件,需要先了解系统控件的内部实现机制,了解其优缺点,最终写出自己的,包括系统控件的优点,又加入自己认为更加方便、高效的设计的控件。
先抛出一个疑问,UILabel是如何实现固定行数的?

YYLabel为例,先从 YYLabel设置numberOfLines的使用说起,在创建YYLabel之后,设置

label.numberOfLines = 4;
CF29A19C5FAF6529CDC597900203D762.png

一层层查看

// numberOfLines Setter
- (void)setNumberOfLines:(NSUInteger)numberOfLines {
    if (_numberOfLines == numberOfLines) return;
    _numberOfLines = numberOfLines;
    _innerContainer.maximumNumberOfRows = numberOfLines;
    if (_innerText.length && !_ignoreCommonProperties) {
        if (_displaysAsynchronously && _clearContentsBeforeAsynchronouslyDisplay) {
            [self _clearContents];
        }
        [self _setLayoutNeedUpdate];
        [self _endTouch];
        [self invalidateIntrinsicContentSize];
    }
}

又将numberOfLines传递给了_innerContainermaximumNumberOfRows,继续进入YYTextContainer这个类。

下面是作者的注释

 The YYTextContainer class defines a region in which text is laid out.
 YYTextLayout class uses one or more YYTextContainer objects to generate layouts.

YYTextContainer 类定义了一个文本布局及显示的区域
YYTextLayout 类使用一个或多个YYTextContainer对象去生成布局
 
 A YYTextContainer defines rectangular regions (`size` and `insets`) or 
 nonrectangular shapes (`path`), and you can define exclusion paths inside the 
 text container's bounding rectangle so that text flows around the exclusion 
 path as it is laid out.

YYTextContainer 定义了一个矩形(包括size和insets)或者是一个非矩形的区域
你可以在这个矩形或者区域内再定义一个隔开的区域,让这个矩形或者区域内的内容环绕这个隔开的区域。

 All methods in this class is thread-safe.
 所有的方法都是线程安全的
 Example:
 
     ┌─────────────────────────────┐  <------- container
     │                             │
     │    asdfasdfasdfasdfasdfa   <------------ container insets
     │    asdfasdfa   asdfasdfa    │
     │    asdfas         asdasd    │
     │    asdfa        <----------------------- container exclusion path
     │    asdfas         adfasd    │
     │    asdfasdfa   asdfasdfa    │
     │    asdfasdfasdfasdfasdfa    │
     │                             │
     └─────────────────────────────┘

接着走

- (void)setMaximumNumberOfRows:(NSUInteger)maximumNumberOfRows {
    Setter(_maximumNumberOfRows = maximumNumberOfRows);
}

此时YYTextContainer持有这个外部的行数,实际上这个YYTextContainer是定义在YYTextLayout文件中的,说明两个类的相关性很大,此时再了解一下YYTextLayout这个类。

 YYTextLayout class is a readonly class stores text layout result.
 All the property in this class is readonly, and should not be changed.
 The methods in this class is thread-safe (except some of the draw methods).
// 中文注释
YYTextLayout 是一个只读的、存储Layout布局结果的类
所有的属性都是只读的,所有方法都是线程安全的(除了一些绘制方法)。

 example: (layout with a circle exclusion path)
 
     ┌──────────────────────────┐  <------ container
     │ [--------Line0--------]  │  <- Row0
     │ [--------Line1--------]  │  <- Row1
     │ [-Line2-]     [-Line3-]  │  <- Row2
     │ [-Line4]       [Line5-]  │  <- Row3
     │ [-Line6-]     [-Line7-]  │  <- Row4
     │ [--------Line8--------]  │  <- Row5
     │ [--------Line9--------]  │  <- Row6
     └──────────────────────────┘

YYTextContainer内部,并没有过多的处理,最多的就是Setter和Getter了。那么上面的maximumNumberOfRows接下来又会怎么处理?
YYTextLayout的初始化,需要YYTextContainer,最终maximumNumberOfRows传递给了YYTextLayout

+ (YYTextLayout *)layoutWithContainer:(YYTextContainer *)container text:(NSAttributedString *)text range:(NSRange)range {
...
maximumNumberOfRows = container.maximumNumberOfRows;
}

在对单行文本计算完高度之后,根据条件计算文本区域

// textBoundingRect 文本的frame, rect是单行文本的frame, CGRectUnion是返回包含两个矩形的最小矩形
if (maximumNumberOfRows == 0 || rowIdx < maximumNumberOfRows) {
    // 得出的textBoundingRect是在不限制行高,或者当前行数小于总行数时的矩形区域,也就是文本的宽高组成的矩形区域。
    textBoundingRect = CGRectUnion(textBoundingRect, rect);
}

这里引入一个概念,文本的实际行数。
CoreText库中,提供了计算当前给定size的文本行数的方法。

demo代码如下:

NSString *src = [NSString stringWithString:@"样本文字。 "];    
NSMutableAttributedString * mabstring = [[NSMutableAttributedString alloc]initWithString:src];
long slen = [mabstring length];

// 将属性字串放到frame当中
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)mabstring);
    
CGMutablePathRef Path = CGPathCreateMutable();
CGPathAddRect(Path, NULL ,CGRectMake(10 , 10 ,self.bounds.size.width-20 , self.bounds.size.height-20));
    
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), Path, NULL);

// 得到字串在frame中被自动分成了多少个行。
CFArrayRef rows = CTFrameGetLines(frame);
// 实际行数
int rowcount = CFArrayGetCount(rows);     

在回到YYTextLayout中判断条件如下

if (maximumNumberOfRows > 0) {
// 如果实际行数大于给定行数 
            if (rowCount > maximumNumberOfRows) {
                needTruncation = YES;// 显示省略号
                rowCount = maximumNumberOfRows;// 更新行数为指定的最大行数
                do {
                     // 从需要被渲染的行数组中移除显示不下的内容
                    YYTextLine *line = lines.lastObject;
                    if (!line) break;
                    if (line.row < rowCount) break;
                    [lines removeLastObject];
                } while (1);
            }
}

至此,YYLabel的行数numberOfLines实现的方式就说清楚了。
可以简单概括为:
在自己实现一个继承自UIView的Label控件时,要实现numberOfLines属性,有如下步骤
①根据给定区域计算文本的实际行数
②当实际行数大于给定行数时从总的lines数组中移除不需要被渲染的line,并显示截断样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容