iOS Label设置行间距,单行多行时的处理

Label设置行间距,单行多行的处理

问题引入

实际开发中,遇到这样一个需求.乍一看,so easy,设置行间距.做出来后,才发现这里有坑,单行文本,你会发现底部会多出一截白条,导致整个排版混乱.那怎么解决这个问题呢

tmp1d8a0663.png

内容摘要

  • UILabel显示多行文本
  • UILabel设置行间距
  • 解决单行文本 & 多行文本显示的问题

场景描述

  • 众所周知,UILabel显示多行的话,默认行间距为0,但实际开发中,如果显示多行文本,一般情况下会有一定的行间距。如果想动态调整行间距,则需要赋值富文本属性(而不是文本属性)

问题分析

Label显示多行文本
  • label默认情况下,只会显示单行文本,主要是因为它的numberOfLines属性值是1;如果要显示多行,把这个属性值改成0即可。

    label.numberOfLines = 0;
    
1.png
  • 如果想添加行间距,我们会这样做:

    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:string];
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = lineSpace; // 调整行间距
    NSRange range = NSMakeRange(0, [string length]);
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
    
  • 多行时效果OK,但单行时,却有问题

2.png

解决思路

思路一.设置文本偏移量,使其垂直居中显示,偏移量大小要根据字体大小动态调整.
偏移量大小的计算要仔细一些,一定要准确.

  // 设置文本偏移量
    [attributedString addAttribute:NSBaselineOffsetAttributeName value:@(lineOffset) range:range];

思路二. 我不想计算偏移量大小,还有没有其他简单的替代方案. 换个思路,单行的时候,不设置行间距. 多行时设置行间距. 那么这就转换成了怎么样判断单行多行的判断了

   //2.添加特权信息label
    UILabel *tip = [[UILabel alloc] init];
    tip.font = [UIFont systemFontOfSize:15];
    tip.numberOfLines = 0;
    [self.contentView addSubview:tip];
    tip.text = string;
    CGSize size = [tip sizeThatFits:CGSizeMake(SCREEN_WIDTH - 70, CGFLOAT_MAX)];
    CGFloat tipHeight = 0;
    
    //2.1 计算文本高度,文本只有一行
    if (size.height <  2 * [UIFont systemFontOfSize:15].lineHeight) {
        tipHeight = [UIFont systemFontOfSize:15].lineHeight;
    
    //2.1 计算文本高度,文本有多行
    }else {
         //设置文本行间距...

    }

demo 地址

https://github.com/HelloYeah/SKAlertVipLimits

部分内容引自https://www.jianshu.com/p/82ddeeb48e16

推荐阅读更多精彩内容