在我們開(kāi)發(fā)過(guò)程中會(huì)遇到,當(dāng)你的文字很大時(shí),會(huì)出現(xiàn)下面的現(xiàn)象
此時(shí)的代碼如下:
//行間距減去 12 上14
NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc] init];
paraStyle.lineBreakMode = NSLineBreakByCharWrapping;
//paraStyle.lineSpacing = 20;
//設(shè)置負(fù)數(shù)沒(méi)有效果的
//paraStyle.lineSpacing = 5 + 15;
paraStyle.lineSpacing = 0;
paraStyle.alignment = NSTextAlignmentRight;
NSDictionary *attributes = @{NSParagraphStyleAttributeName : paraStyle};
NSMutableAttributedString * astr = [[NSMutableAttributedString alloc] initWithString:self.lab.text attributes:attributes];
NSDictionary *attribute = @{NSForegroundColorAttributeName : [UIColor blackColor], NSFontAttributeName : [UIFont systemFontOfSize:40]};
[astr addAttributes:attribute range:NSMakeRange(0, self.lab.text.length)];
self.lab.attributedText = astr;
此時(shí)我設(shè)置的lineSpacing是0,但是圖片上的文字間距還是很大,怎么改lineSpacing,都沒(méi)有效果,那如何解決這個(gè)問(wèn)題呢?
正確的實(shí)現(xiàn)行間距
紅色區(qū)域是默認(rèn)繪制單行文本會(huì)占用的區(qū)域,可以看到文字的上下是有一些留白的(藍(lán)色和紅色重疊的部分)。設(shè)計(jì)師是想要藍(lán)色區(qū)域高度為 10pt,而我們直接設(shè)置 lineSpacing 會(huì)將兩行紅色區(qū)域中間的綠色區(qū)域高度設(shè)置為 10pt,這就是問(wèn)題的根源了。
那么這個(gè)紅色的區(qū)域高度是多少呢?答案是 label.font.lineHeight,它是使用指定字體繪制單行文本的原始行高。
知道了原因后問(wèn)題就好解決了,我們需要在設(shè)置 lineSpacing 時(shí),減去這個(gè)系統(tǒng)的自帶邊距:
NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
/**zhushi
(lldb) po _moveTipLabel.font.lineHeight
47.734375
(lldb) po _moveTipLabel.font.pointSize
40
*/
paragraphStyle.lineSpacing = 10 - (_moveTipLabel.font.lineHeight - _moveTipLabel.font.pointSize);
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
_moveTipLabel.attributedText = [[NSAttributedString alloc] initWithString:_moveTipLabel.text attributes:attributes];
觀察一下效果,完美契合:
關(guān)于行高 lineHeight
如果你只關(guān)心 iOS 設(shè)備上的文本展示效果,那么看到這里就已經(jīng)夠了。但是我需要的是 iOS 和 Android 展現(xiàn)出一模一樣的效果,所以光有行間距是不能滿足需求的。主要的原因在前言也提到了,Android 設(shè)備上的文字上下默認(rèn)留白(上一節(jié)圖中藍(lán)色和紅色重疊的部分)和 iOS 設(shè)備上的是不一致的:
左側(cè)是 iOS 設(shè)備,右側(cè) Android 設(shè)備,可以看到同樣是顯示 20 號(hào)的字體,安卓的行高會(huì)偏高一些。在不同的 Android 設(shè)備上使用的字體不一樣,可能還會(huì)出現(xiàn)更多的差別。如果不想辦法抹平這差別,就不能真正意義上實(shí)現(xiàn)雙端一致了。
這時(shí)候我們可以通過(guò)設(shè)置 lineHeight 來(lái)使得每一行文本的高度一致,lineHeight 設(shè)置為 30pt 的情況下,一行文本高度一定是 30pt,兩行文本高度一定是 60pt。雖然文字的渲染上會(huì)有細(xì)微的差別,但是布局上的差別將被完全的抹除。lineHeight 同樣可以借助 NSAttributedString 來(lái)實(shí)現(xiàn),示意代碼:
CGFloat lineHeight = 20;
NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
paragraphStyle.maximumLineHeight = lineHeight;
paragraphStyle.minimumLineHeight = lineHeight;
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
_lab.attributedText = [[NSAttributedString alloc] initWithString:_lab.text attributes:attributes];
運(yùn)行一下觀察效果:
在 debug 模式下確認(rèn)了下文本的高度的確正確的,但是為什么文字都顯示在了行底呢?
修正行高增加后文字的位置
修正文字在行中展示的位置,我們可以用baselineOffset 屬性來(lái)搞定。這個(gè)屬性十分有用,在實(shí)現(xiàn)上標(biāo)下標(biāo)之類的需求時(shí)也經(jīng)常用到它。經(jīng)過(guò)調(diào)試,發(fā)現(xiàn)最合適的值是 (lineHeight - label.font.lineHeight) / 4(尚未搞清楚為什么是除以 4 而不是除以 2,希望知道的老司機(jī)指點(diǎn)一二)。最終的代碼示例如下:
#pragma mark - 333
CGFloat lineHeight = 20;
NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
paragraphStyle.maximumLineHeight = lineHeight;
paragraphStyle.minimumLineHeight = lineHeight;
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
CGFloat baselineOffset = (lineHeight - _lab.font.lineHeight) / 4;
[attributes setObject:@(baselineOffset) forKey:NSBaselineOffsetAttributeName];
_lab.attributedText = [[NSAttributedString alloc] initWithString:_lab.text attributes:attributes];
貼一下在不同字號(hào)和行高下的展示效果:
行高和行間距同時(shí)使用時(shí)的一個(gè)問(wèn)題
不得不說(shuō)行高和行間距我們都已經(jīng)可以完美的實(shí)現(xiàn)了,但是我在嘗試同時(shí)使用它們時(shí),發(fā)現(xiàn)了 iOS 的一個(gè) bug(當(dāng)然也可能是一個(gè) feature,畢竟不 crash 都不一定是 bug):
著色的區(qū)域都是文本的繪制區(qū)域,其中看上去是橙色的區(qū)域是 lineSpacing,綠色的區(qū)域是 lineHeight。但是為什么單行的文本系統(tǒng)也要展示一個(gè) lineSpacing 啊!?坑爹呢這是!?
好在我們通常是行高和行間距針對(duì)不同的需求分別獨(dú)立使用的,它們?cè)诜珠_(kāi)使用時(shí)不會(huì)觸發(fā)這個(gè)問(wèn)題。so 暫且將高度計(jì)算的邏輯保持和系統(tǒng)一致了。
那么本文開(kāi)頭我提出問(wèn)題的解決方式如下,親測(cè)有效
CGFloat lineHeight = 45;
NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
paragraphStyle.maximumLineHeight = lineHeight;
paragraphStyle.minimumLineHeight = lineHeight;
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
CGFloat baselineOffset = (lineHeight - _lab.font.lineHeight) / 4;
//[attributes setObject:@(baselineOffset) forKey:NSBaselineOffsetAttributeName];
[attributes setObject:@1 forKey:NSBaselineOffsetAttributeName];
_lab.attributedText = [[NSAttributedString alloc] initWithString:_lab.text attributes:attributes];
本文摘自蘋果核
講解行間距,很詳細(xì),僅供學(xué)習(xí)!