UILabel行間距l(xiāng)ineSpacing 行高lineHeight

關(guān)于行間距l(xiāng)ineSpacing

先貼出一張的的iOS中的的UILabel的默認(rèn)排版樣式:
TB1ENuGgNSYBuNjSspjXXX73VXa-542-117.png

大家也都能看出來(lái),默認(rèn)的排版樣式中,文本的行間距很小,顯得文本十分?jǐn)D。

這種時(shí)候,設(shè)計(jì)師就會(huì)提出行間距的需求,希望讓文本展示得更美觀類似的標(biāo)注就會(huì)像這樣:
TB1HhuGgNSYBuNjSspjXXX73VXa-573-175.png

通常來(lái)說(shuō)既然設(shè)計(jì)師要求的是行間距,那么我們直接設(shè)置lineSpacing就好但是的的UILabel是沒(méi)有這么一個(gè)直接暴露的屬性的,想要修改lineSpacing,我們需要借助NSAttributedString來(lái)實(shí)現(xiàn),示意代碼:
NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
paragraphStyle.lineSpacing = 10;
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
label.attributedText = [[NSAttributedString alloc] initWithString:label.text attributes:attributes];

得出來(lái)效果:
TB1IBYSgStYBeNjSspkXXbU8VXa-542-195.png

正確的實(shí)現(xiàn)行間距

正確的效果:
TB1vhuGgNSYBuNjSspjXXX73VXa-464-234.png

紅色區(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];
paragraphStyle.lineSpacing = 10 - (label.font.lineHeight - label.font.pointSize);
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
[attributes setObject:paragraphStyle forKey:NSParagraphStyleAttributeName];
label.attributedText = [[NSAttributedString alloc] initWithString:label.text attributes:attributes];

效果:
TB12OeAgH5YBuNjSspoXXbeNFXa-541-165.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容