iOS 行距全攻略

以前总是很烦设计师非要说,让『把行距调大一点点』,因为在 iOS 这个对文字处理各种不友好的系统里,改行距并不像改字号那么简单,只调『一点点』也得多写好几行。
不过自从我写了下面这些工具方法,调行距也就回归到它本来应该的样子:一行代码的事。

设置行距

UILabel+Utils.m
- (void)setText:(NSString*)text lineSpacing:(CGFloat)lineSpacing {
    if (lineSpacing < 0.01 || !text) {
        self.text = text;
        return;
    }
    
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];
    [attributedString addAttribute:NSFontAttributeName value:self.font range:NSMakeRange(0, [text length])];
    
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setLineSpacing:lineSpacing];
    [paragraphStyle setLineBreakMode:self.lineBreakMode];
    [paragraphStyle setAlignment:self.textAlignment];
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [text length])];

    self.attributedText = attributedString;
}
使用
[label setText:text lineSpacing:2.0f];
  1. 作为一个四处使用的工具方法,前面的nil检查很有必要加。因为[[NSMutableAttributedString alloc] initWithString:text] 不接受 nil 参数,会直接 crash。
  2. 生成的 paragraphStyle 除了配行距之外,还带上了 label 原有的一些常用属性。如果有其他需要,也可以加在这里。
UITextView+Utils.m
- (void)setText:(NSString*)text lineSpacing:(CGFloat)lineSpacing {
    if (lineSpacing < 0.01 || !text) {
        self.text = text;
        return;
    }
    
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];
    [attributedString addAttribute:NSFontAttributeName value:self.font range:NSMakeRange(0, [text length])];

    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setLineSpacing:lineSpacing];
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [attributedText length])];

    self.attributedText = attributedString;
}

UITextView 的方法跟 UILabel 基本一样。

使用
[textView setText:text lineSpacing:2.0f];

计算行高

自定义行距之后,计算文本高度的方法也得相应改。很简单,只要利用 sizeToFit、sizeThatFits 之类的方法就可以了。

UILabel+Utils.m
+ (CGFloat)text:(NSString*)text heightWithFontSize:(CGFloat)fontSize width:(CGFloat)width lineSpacing:(CGFloat)lineSpacing {
    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, MAXFLOAT)];
    label.font = [UIFont systemFontOfSize:fontSize];
    label.numberOfLines = 0;
    [label setText:text lineSpacing:lineSpacing];
    [label sizeToFit];
    return label.height;
}
UITextView+Utils.m
+ (CGFloat)text:(NSString*)text heightWithFontSize:(CGFloat)fontSize width:(CGFloat)width lineSpacing:(CGFloat)lineSpacing {
    UITextView* textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 0, width, MAXFLOAT)];
    textView.font = [UIFont systemFontOfSize:fontSize];
    [textView setText:text lineSpacing:lineSpacing];
    [textView sizeToFit];
    return textView.height;
}

因为默认的 UITextView 有一点 inset,所以计算文本高度的方法要跟 UILabel 分开。

这几个方法就能应付大多数需求了。根据自己需要,我还写了一些参数带有 numberOfLines、文本的参数为 attributedString 的变体。

代码上的行距 vs 设计图上的行距

如果只为贴上面几个方法,我可能也就懒得写这篇文章了。这篇文章的重点其实是分享下面这一点:代码传参数进去的行距与设计图上量出来的行距是有区别的,代码上要少几个像素,而减少的量跟字体大小有关。

我感觉这一点有时容易被人忽视。例如一个 UILabel 字号为14,有些程序员可能就会把这个 Label 高度定为 14 像素了。而经验丰富的人就会知道不能这样,否则『h』『g』之类的字母都可能会被切掉一些。在 xib 里,选中 label 之后按『Command + =』会发现字号为 14 的 label 合适的高度应该是 17。

为了给像『g』、『y』英文字母的尾巴留出空间,系统会给 UILabel 上的文字上下加一点默认的空白,这就是 font size 与 line height 的区别。而用代码设定paragraphStylelineSpacing,是叠加在原有空白之上的。

别小看这点空白。如果设计师没有丧心病狂,设计出的行距往往也就是 4、5 个像素,而对 14 号字来说上下两行的空白就能占到 3 像素。如果不假思索地直接把设计图的标注传进去,结果就是行距放大到150%。视觉上出了偏差,我们也要负责任的。

行距组成示意图

由图所示,视觉上的行距其实由那 3 部分组成:上面一行的默认空白 + 行距 + 下面一行的默认空白。蓝色高度是我们写的 lineSpacing,而黄色和绿色加起来正好是一倍font.lineHeight - font.pointSize的值(黄色高度是上面一行的一半,为(font.lineHeight - font.pointSize) / 2,绿色是下面一行的一半)。

简单打下 log 就可以看到这个差值大概是多少。下面列出常见的字号:

font size font.lineHeight(近似) 差值
10 12 2
11 13 2
12 14 2
13 15.5 2.5
14 17 3
15 18 3
16 19 3
17 20 3
18 21.5 3.5
19 23 4
20 24 4

为了计算效率高,我们就不在运行时现算这个差值了;直接把设计图上量出的行距减去上面这个表里几个像素的差值,作为参数传进去即可。例如:14 号字的 label,设计图上量出的行距是 5 个像素,那就减去 3 个像素,写[label setText:text lineSpacing:2.0f];。不要忘了计算行高的时候也要用同样的参数~

只有注意到了这些细节,才能做到『像素级的精确』,设计师们是不是都很喜欢我这样的程序员呢~:)

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

推荐阅读更多精彩内容