利用AutoLayout实现cell高度自适应

2016-10-10 本文已影响1864人 Rasping

在开发中使用UITableView时经常会遇到，UITableViewCell的高度随cell的内容变化而变化。这就导致我们在添加cell之前需要写一大堆的代码去计算cell内容的高度，然后再确定cell的高度。而这总是非常痛苦的！令人开心的是：从IOS8开始，苹果就提供了利用AutoLayout实现cell高度的自适应。这大大节约了我们的开发时间，最重要的是：还不用写一堆计算的代码！下面是我通过AutoLayout实现的一个聊天界面Demo，效果图如下：

效果图.gif

本文除了对高度自适应如何使用进行介绍之外，还会对这个Demo的具体实现做一个大体的介绍，有兴趣的朋友可以参考下。

AutoLayout

cell高度的自适应是对AutoLayout的一个扩展应用，它是根据cell的内容通过对contentView的约束动态的计算出cell的高度。

使用步骤

利用AutoLayout实现cell高度自适应，步骤如下：

在自定义的cell中设置约束，让contentView知道如何自动延伸，即让contentView的上下左右四个边都与其子控件有约束相关，让contentView能根据其子控件的约束动态的改变自身的尺寸。(这一步非常重要)
设置tableView的rowHeight属性为UITableViewAutomaticDimension,即告诉tableView其cell的高度是自适应的
给tableView的cell设置一个预估高度，可以直接给tableView的estimatedRowHeight属性赋值，或是显示tableView代理方法tableView:estimatedHeightForRowAtIndexPath:
因为tableView必须要计算出了全部cell的高度，才能确定contentSize的尺寸，最后才能将tableView渲染都屏幕上。当有了预估高度值之后，tableView可以先利用预估高度值确定contentSize的尺寸，等cell需要展示的时候再对该cell进行刷新，计算出cell的真实高度之后再渲染出来。关于其中更详细的原理，大家可以参看这篇文章。

具体实现

Demo中是利用xib自定义的cell，样式如下图所示：

cell样式图.png

因为聊天列表中有两种类型的cell，区分自己发送的消息和别人发送的消息。所以我在一个xib中添加了两个cell，方便管理。当然这样也会导致在加载xib的时候与一个cell有些区别，具体细节如下。

一个xib添加两个cell

cell的加载:我们需要给两个cell添加不同的identifier才能对两个cell进行区分，在cell提供给外界加载的方法中添加一个cell类型的参数，根据这个类型对应的去加载不同的cell，具体实现如下：

+ (instancetype)cellWithTableView:(UITableView *)tableView chatCellType:(ChatCellType)type
{
    static NSString *reuseIdentifier;
    NSInteger index = 0;
    if (type == ChatCellTypeOther) {
        reuseIdentifier = @"ChatCellTypeOther";
    }else if (type == ChatCellTypeSelf) {
        reuseIdentifier = @"ChatCellTypeSelf";
        index= 1;
    }
    ChatCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    if (!cell) {
        cell = [[NSBundle mainBundle] loadNibNamed:@"ChatCell" owner:self options:0][index];
        cell.backgroundColor = [UIColor clearColor];
    }
    return cell;
}

cell的赋值:如果两个cell都同属于一个ChatCell这个类，这样在重写模型的set方法对cell上的控件进行赋值时，只有第一个添加的cell的值能被赋上，即一个分类只能管理一个cell。我的解决办法是：在ChatCell这个文件中为其再添加一个子类ChatCellSelf,重写父类中模型的set方法。具体实现如下：

@implementation ChatCellSelf

- (void)setModel:(ChatModel *)model
{
    [super setModel:model];
    
    if (model.type == ChatTypeSelf) {
        self.timeSelf.text    = model.time;
        self.messageSelf.text = model.message;
    }
}

@end

cell的返回：在加载好cell并赋好值之后，就可以直接在tableView的代理中返回cell了，具体实现如下：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ChatModel *model = self.dataArray[indexPath.row];
    ChatCell *cell = nil;
    if (model.type == ChatTypeOther) {
        cell = [ChatCell cellWithTableView:tableView chatCellType:ChatCellTypeOther];
    }else if (model.type == ChatTypeSelf) {
        cell = [ChatCell cellWithTableView:tableView chatCellType:ChatCellTypeSelf];
    }
    cell.model = model;
    return cell;
}

在cell设置好之后，接下来就是最为重要的问题：cell的约束如何设置？

cell的约束

这里只对cell样式图中第一个cell的约束进行说明，第二个cell的约束与第一个大同小异。
cell的约束如何设置呢？在步骤1中已经提到，就是对cell的contentView的上下左右四个边都与其子控件有约束相关。这个cell有四个子控件，其中时间信息timeLable的约束为：

其上、左、右三边距cell的contentView的距离都为0

头像iconImageView的约束为：

左边距离contentView的距离为8
上边距离timeLable的距离也为8
宽度为45
宽高比为1：1
下边距离contentView的距离>=10(为了保证icon能百分比被显示)

聊天背景chatImageView的约束为：

左边距离iconImageView为8
上边距离timeLable为14(为了保证聊天背景能被Tiles拉伸，不设置其宽高)

聊天内容MessageLable(要保证其能换行)的约束为：

与chatImageView的上边距为8，下边距为-8，左边距为15，右边距为-5
右边距离contentView的距离>=28(限制messageLable的最大宽度)
下边距离contentView的距离>=20(让contentView能向下延伸)

约束设置好之后，就是对tableView属性的设置，这个就非常简单，两行代码就搞定。

self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 90;

在这些都设置好之后，最后就是给tableView添加一些数据就可以显示了。这里是点击了发送按钮就插入一条数据。

数据源

这里对聊天界面进行一个简单的模拟，在点击发送按钮之后，忘数据源中插入一条数据，刷新tableView，让tableView滚动到最底部。具体实现如下：

//插入一条消息
- (void)insertMessage:(ChatModel *)model
{
    //将新的消息插入到最后
    [self.dataArray addObject:model];
    NSIndexPath *index = [NSIndexPath indexPathForRow:(self.dataArray.count - 1) inSection:0];
    [self.tableView insertRowsAtIndexPaths:@[index] withRowAnimation:UITableViewRowAnimationBottom];
    
    //让tableView滚动到最低部
    [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:(self.dataArray.count - 1) inSection:0] atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}

至此Demo的基本功能就全部完成，Demo下载地址。当然本文只是抛砖引玉，cell高度自适应的应用远不止于此。如果大家遇到什么bug或问题，可以在我的主页中与我联系，我们相互讨论，最后也欢迎大家对本文积极讨论。