在开发中使用UITableView时经常会遇到，UITableViewCell的高度随cell的内容变化而变化。这就导致我们在添加cell之前需要写一大堆的代码去计算cell内容的高度，然后再确定cell的高度。而这总是非常痛苦的！令人开心的是：从IOS8开始，苹果就提供了利用AutoLayout实现cell高度的自适应。这大大节约了我们的开发时间，最重要的是：还不用写一堆计算的代码！下面是我通过AutoLayout实现的一个聊天界面Demo，效果图如下：
本文除了对高度自适应如何使用进行介绍之外，还会对这个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，区分自己发送的消息和别人发送的消息。所以我在一个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或问题，可以在我的主页中与我联系，我们相互讨论，最后也欢迎大家对本文积极讨论。
