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