UILabel 多行高度自适应 计算高度存在的 坑

UILabel 多行自适应 计算高度存在的坑

本文来说明[UILabel][6]在实现多行文本时，计算文本的高度存在的一个问题，因为这个问题之前遇到过很多次，特在测mark一下，给自己留个痕迹，以免后面再碰到，涉及到讨论的两种方法（这两种方法都存在这样的问题）：

• NSMutableAttributedString 的 addAttributes 方法

• boundingRectWithSize

---

问题展示：

先看下图片，展示下问题（测试条件）：
- 具有图片
- 单行的文字
- 目前在模拟器上出现的问题，真机尚未测试

可以看出“第三个格子的文本覆盖了右上角的时间文字”，但是第四行的文字却没有，两个cell的通过肉眼就能发现是一样的高度，那么问题是什么呢。

问题分析：

下面说明下两种出现这种问题的方法：

第一种计算高度方法

----------
主要代码
------

//NSStringDrawingUsesFontLeading 以字体间行距位计算方式（字体高度 + 行间距）
//NSStringDrawingUsesLineFragmentOrigin 以每行组成的矩形计算高度

 - NSStringDrawingOptions Option =NSStringDrawingUsesLineFragmentOrigin
   | NSStringDrawingUsesFontLeading;

   NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]
   init]; [style setLineBreakMode:NSLineBreakByWordWrapping];


NSDictionary *attributes = @{ NSFontAttributeName : ChatContentFont, NSParagraphStyleAttributeName : style };

contentSize = [strContent boundingRectWithSize:CGSizeMake(textContentWidth, CGFLOAT_MAX) options:Option attributes: attributes context:nil].size;

最后：
labelHeight = contentSize.height;

第二种计算高度方法

----------
主要代码
------

//NSStringDrawingUsesFontLeading 以字体间行距位计算方式（字体高度 + 行间距）
//NSStringDrawingUsesLineFragmentOrigin 以每行组成的矩形计算高度

 - NSStringDrawingOptions Option =NSStringDrawingUsesLineFragmentOrigin
   | NSStringDrawingUsesFontLeading;

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]
   init]; [style setLineBreakMode:NSLineBreakByWordWrapping];

UILabel *labelStr = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, textContentWidth, CGFLOAT_MAX)];
//设置numberOfLine = 0 ,表示多行显示
labelStr.numberOfLines = 0;

NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:_message.strContent];

CGFloat actualTextLen = textContentWidth;
if (attrStr.length < textContentWidth) {          
    actualTextLen = attrStr.length;
}

//range 参数表示从字符串的0位置开始的actualTextLen个字符
//为这个范围内的字符添加对应的属性
[attrStr addAttributes:attributes range:NSMakeRange(0, actualTextLen)];
labelStr.attributedText = attrStr;
[labelStr sizeToFit];

最后：
labelHeight = labelStr.frame.size.height；

---

这两种方法都会造成上面图片所描述的问题：其打印出来的高度见下图：

---

上面的结果打印出来的值解释（以第五行为例）：
17.000000 — 16.707031 对应
第二种计算方法 — 第一种计算方法

分析结果：

1. 经过测试下，这种情况只有在文字的长度小于一行时才会出现
2. 当刚满一行时就计算成33了，如第一张图的第三个cell显示的那样

3. 而且在简单测试时候发现只有存在图片时候会出现这样的问题

   ---

   结论就是：在单行不满的情况下，如果“文字Label”具有背景色的时候，就会出现布局上面的问题，在table滑动的时候会出现“文字Label”背景色加高从而覆盖右上角的“时间”Label的问题。

---

解决办法：

---

因为这样会影响用户的体验效果，所以参照log打印出来的值，第四行和第五行，同样是显示一行，一个高度是33，一个高度是17。所以问题最简单的处理方法就是在17 的基础上加上18，也就是判断高度的值，如果小于33，就加上18，如果没有就以计算的原值为最终计算的高度值， 17 + 18 = 35，多了两个高度点（这个值可以自己上下调节两三个高度点）
，然后最终的效果出来，如下图：

---

经简单测试，这样修改后，在随意的滑动table时候，“文字Label”的背景色不会出现上述的问题；

因时间关系，目前只探索到这里，后续有更好的令人信服的方法时，再更新，也欢迎有大神提出更好的方案。

---