正確實現(xiàn) iOS 行間距

  1. 設置行間距的方式
    例如設置 label 的行間距為 10,通常我們會設置 NSAttributedString.lineSpacing = 10 。如下圖左側所示。然而 UI 要求的是右側的效果。通過對比發(fā)現(xiàn),單純設置 NSAttributedString.lineSpacing ,會使得行間距要大于10。


    行間距對比

    原因如下圖所示,文字的上下均有留白(藍色與紅色重疊的部分)。NSAttributedString.lineSpacing 是下圖綠色的部分,而 UI 設計師想要的是藍色的部分。因此要達到上圖中右側部分需要將下圖重疊的部分減去即可。


    實質(zhì)
NSMutableParagraphStyle *rightLabelPragraphStyle = [NSMutableParagraphStyle new];
rightLabelPragraphStyle.lineSpacing = 10 - (self.rightLabel.font.lineHeight - self.rightLabel.font.pointSize);
NSMutableDictionary *RightLabelAttribute = [NSMutableDictionary dictionary];
[RightLabelAttribute setObject:rightLabelPragraphStyle forKey:NSParagraphStyleAttributeName];
self.rightLabel.attributedText = [[NSAttributedString alloc] initWithString:labelStr attributes:RightLabelAttribute];

備注:當文本是單行時,文字底部會多出 lineSpacing 的情況(如下圖所示),因此需要判斷文本為單行時,不設置 lineSpacing

單行文本的情況

  1. 設置行高的方式
    設置 NSAttributedString.maximumLineHeight 與 .minimumLineHeight ,可以精確控制文本行的高度。然后利用 baselineOffset 修復為此帶來的偏移,修復公式: (lineHeight - self.bottomLabel.font.lineHeight)/4。
NSMutableParagraphStyle *bottomParagraphStyle = [NSMutableParagraphStyle new];
bottomParagraphStyle.maximumLineHeight = lineHeight;
bottomParagraphStyle.minimumLineHeight = lineHeight;
NSMutableDictionary *bottomAttributes = [NSMutableDictionary dictionary];
bottomAttributes[NSParagraphStyleAttributeName] = bottomParagraphStyle;
CGFloat baselineOffset = (lineHeight - self.bottomLabel.font.lineHeight)/4;
bottomAttributes[NSBaselineOffsetAttributeName] = @(baselineOffset);
self.bottomLabel.attributedText = [[NSAttributedString alloc] initWithString:labelStr attributes:bottomAttributes];

備注:如果在設置 baselineOffset 的同時設置 range 范圍的背景色或者前景色時,修復公式變?yōu)?(lineHeight - self.bottomLabel.font.lineHeight)/2 ,并且 label 中文本其實位置出錯如圖所示,具體原因暫時未知。

參考

  1. iOS 如何精確還原 UI 稿多行文字間距
  2. 在iOS中如何正確的實現(xiàn)行間距與行高
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

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

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,086評論 4 61
  • h5新特性 于繪畫的 canvas 元素 用于媒介回放的 video 和 audio 元素 對本地離線存儲的更好的...
    Farewell_V587閱讀 833評論 0 5
  • 文/蔥蔥 你說 我的身上長滿憂傷的麥子 一旦靠近就會落下淚水 愛的另一端纏繞著痛 長夜拖著黑色的長裙 潛入離人的心...
    蔥蔥_閱讀 572評論 18 25
  • angular路由傳參 1.在定義路由時,設置參數(shù) when('/home/:sk' 2.在路由跳轉(zhuǎn)時要傳入相應的...
    codeTao閱讀 761評論 0 0
  • 古雪梅書法閱讀 139評論 0 0

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