美文网首页
UILabel行间距lineSpacing 行高lineHeig

UILabel行间距lineSpacing 行高lineHeig

作者: CoderLF | 来源:发表于2018-11-05 11:25 被阅读78次

    关于行间距lineSpacing

    先贴出一张的的iOS中的的UILabel的默认排版样式: TB1ENuGgNSYBuNjSspjXXX73VXa-542-117.png

    大家也都能看出来,默认的排版样式中,文本的行间距很小,显得文本十分挤。

    这种时候,设计师就会提出行间距的需求,希望让文本展示得更美观类似的标注就会像这样: TB1HhuGgNSYBuNjSspjXXX73VXa-573-175.png
    通常来说既然设计师要求的是行间距,那么我们直接设置lineSpacing就好但是的的UILabel是没有这么一个直接暴露的属性的,想要修改lineSpacing,我们需要借助NSAttributedString来实现,示意代码:
    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];
    
    得出来效果: TB1IBYSgStYBeNjSspkXXbU8VXa-542-195.png

    正确的实现行间距

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

    红色区域是默认绘制单行文本会占用的区域,可以看到文字的上下是有一些留白的(蓝色和红色重叠的部分)。设计师是想要蓝色区域高度为10pt,而我们直接设置lineSpacing会将两行红色区域中间的绿色区域高度设置为10pt,这就是问题的根源了。

    那么这个红色的区域高度是多少呢?答案是 label.font.lineHeight,它是使用指定字体绘制单行文本的原始行高。

    知道了原因后问题就好解决了,我们需要在设置lineSpacing时,减去这个系统的自带边距:

    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

    相关文章

      网友评论

          本文标题:UILabel行间距lineSpacing 行高lineHeig

          本文链接:https://www.haomeiwen.com/subject/vrajxqtx.html