内容自适应 - UILabel & UITableViewCell

UILabel    自动换行 & 内容自适应高度

场景：

 很多APP中评论，有的评论长，有的评论短，有的一行，有的多行。

下面以评论的实现为例来说说具体如何实现。

技术点：

1. UILabel的自动换行，自动换行的同时要自适应Frame大小。
2. UITableView的行高自适应内容，实时调整高度。

实现方法：

UILabel的自动换行

1. 获取UILabel的frame大小
2. 获取UILabel的字体大小
3. 获取UILabel的文本内容
4. 根据上面的3部分数据，计算文本显示区域大小
5. 根据4计算的大小，实时改变UILabel的frame

 第一种方法  code如下：

label的 x 和 y 还有 width 自己设置相应的值 ，自适应高度 （一定要在获取完变化后的文字后执行）

 NSString * labelStr = @“你好，这是UILabel的自动换行测试内容，主要实现多行数据的自动换行，自适应不同行数的数据”;
     CGSize labelSize = {0, 0};
                 labelSize = [labelStr sizeWithFont:[UIFont systemFontOfSize:14]
                                  constrainedToSize:CGSizeMake(200.0, 5000)
                                   lineBreakMode:UILineBreakModeWordWrap];
<p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; line-height: normal; font-family: Arial; color: rgb(69, 69, 69);">
</p>//14 为UILabel的字体大小

//200为UILabel的宽度，5000是预设的一个高度，表示在这个范围内

    label.numberOfLines = 0;//表示label可以多行显示

    label.lineBreakMode = UILineBreakModeCharacterWrap;//换行模式，与上面的计算保持一致。

    label.frame = CGRectMake(label.frame.origin.x, label.frame.origin.y, label.frame.size.width, labelSize.height);//保持原来Label的位置和宽度，只是改变高度。

 第二种方法  code如下：

_labelText的 x 和 y 还有 width 自己设置相应的值 ，自适应高度 （一定要在获取完变化后的文字后执行）

    CGRect txtFrame = _labelText.frame;
    _labelText.frame = CGRectMake(0, 0, _labelText.fram.size.width,
                             txtFrame.size.height =[_labelText.text boundingRectWithSize:
                                                    CGSizeMake(txtFrame.size.width, CGFLOAT_MAX)
                                                                            options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                                                                         attributes:[NSDictionary dictionaryWithObjectsAndKeys:_labelText.font,NSFontAttributeName, nil] context:nil].size.height);
    _labelText.frame = CGRectMake(0, 0, _labelText.fram.size.width, txtFrame.size.height);

 第三种方法  code如下：

_labelText的 x 和 y 还有 width 自己设置相应的值 ，自适应高度（一定要在获取完变化后的文字后执行）

 CGSize size = [_labelText sizeThatFits:CGSizeZero];
    [_labelText sizeToFit];
    _labelText =  CGRectMake(0, 0, _labelText.frame.size.width, size.height);

UITableView   行高自适应内容

这个和上面的类似，直接上Code:

 第一种方法  code如下：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
   NSString * labelStr = @“你好，这是UILabel的自动换行测试内容，主要实现多行数据的自动换行，自适应不同行数的数据”;

   CGSize labelSize = {0, 0};

   labelSize = [labelStr sizeWithFont:[UIFont systemFontOfSize:14]

   constrainedToSize:CGSizeMake(200.0, 5000)

   lineBreakMode:UILineBreakModeWordWrap];

   //14 为UILabel的字体大小

   //200为UILabel的宽度，5000是预设的一个高度，表示在这个范围内

   return labelSize.height + delta;

   //delta 是Cell除了自适应控件UILabel外的其它控件所占的高度。

}

 第二种方法  code如下：

先在 Cell 中计算出 Cell 的 contentView 的总体高度

/计算整体的Cell高度
    self.contentView.frame =CGRectMake(self.contentView.frame.origin.x, self.contentView.frame.origin.y, self.contentView.frame.size.width, _labelLine2.frame.origin.y);

再在View中设置一个TableView，以便获取相应的Cell

    _tableOrder = [[UITableView alloc ] initWithFrame:CGRectMake(0, headerView.frame.origin.y+headerView.frame.size.height, SCREEN_WIDTH, SCREEN_HEIGHT-headerView.frame.size.height-65) style:UITableViewStylePlain];
    _tableOrder.dataSource = self;
    _tableOrder.delegate = self;
    [_tableOrder setBackgroundColor:RGB(245, 240, 237)];//设置颜色
    _tableOrder.separatorColor = [UIColor clearColor];//我们有时候需要把table的行线换个颜色，或者隐藏掉，我们可以这样写
    [self addSubview:_tableOrder];

然后在在View的

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;中获取Cell的高

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
        //获取单元格高度
    UserVipTableViewCell *cell = (UserVipTableViewCell*)[self tableView:_tableOrder cellForRowAtIndexPath:indexPath];
    return cell.contentView.frame.size.height;  
}

然后运行一下看看效果

小结：实现上面2个技术点后，评论相关的APP或者类似的APP都可以做到自适应内容，根据内容多少自动换行，自动调整控件的位置和大小，达到最优的显示效果。