之前看过AutoLayout和SizeClass基础，对其也有了一个初步的了解，不过还没有在UITableViewCell中使用AutoLayout来自动布局。今天看了下iOS 8 自适应 Cell 这篇文章，决定自己也来亲自试一试。结果，果然是各种问题啊，由此可见亲自动手是多么重要了。
使用AutoLayout后就不需要在UITableView的委托方法中计算UITableViewCell的高度和重新设置子视图的位置和尺寸了。
1、首先在StoryBoard中拖出一下界面：
2、添加约束
给UIImageView添加以下约束：
给titleLabel添加以下约束：
给descriptionLabel添加以下约束：
3、然后在UITableView的委托对象的viewdidload中添加一下代码：
dataSourceArray = [NSArrayarrayWithObjects:
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img.taobaocdn.com/bao/uploaded/TB12TDFGVXXXXXnXXXXErRbFXXX.PNG",@"image",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"title",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/TB1Niq6GXXXXXbCXXXXXXXXXXXX.jpg_180x180.jpg",@"image",
@"苹果 iPhone 6",@"title",
@"特点： 4.7英寸6.9mm超薄配备A8芯片搭载iOS8操作系统",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/T1aTKOFbtcXXc9QiUZ_033001.jpg_180x180.jpg",@"image",
@"苹果 iPhone 5s",@"title",
@"特点： 64位苹果A7处理器 iSight镜头指纹识别",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img.taobaocdn.com/bao/uploaded/TB12TDFGVXXXXXnXXXXErRbFXXX.PNG",@"image",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"title",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/TB1Niq6GXXXXXbCXXXXXXXXXXXX.jpg_180x180.jpg",@"image",
@"苹果 iPhone 6",@"title",
@"特点： 4.7英寸6.9mm超薄配备A8芯片搭载iOS8操作系统",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/T1aTKOFbtcXXc9QiUZ_033001.jpg_180x180.jpg",@"image",
@"苹果 iPhone 5s",@"title",
@"特点： 64位苹果A7处理器 iSight镜头指纹识别",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img.taobaocdn.com/bao/uploaded/TB12TDFGVXXXXXnXXXXErRbFXXX.PNG",@"image",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"title",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/TB1Niq6GXXXXXbCXXXXXXXXXXXX.jpg_180x180.jpg",@"image",
@"苹果 iPhone 6",@"title",
@"特点： 4.7英寸6.9mm超薄配备A8芯片搭载iOS8操作系统",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/T1aTKOFbtcXXc9QiUZ_033001.jpg_180x180.jpg",@"image",
@"苹果 iPhone 5s",@"title",
@"特点： 64位苹果A7处理器 iSight镜头指纹识别",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img.taobaocdn.com/bao/uploaded/TB12TDFGVXXXXXnXXXXErRbFXXX.PNG",@"image",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"title",
@"秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮秋冬新款韩版加绒加厚黑白小脚铅笔裤女牛仔裤弹力显瘦长裤靴裤潮",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/TB1Niq6GXXXXXbCXXXXXXXXXXXX.jpg_180x180.jpg",@"image",
@"苹果 iPhone 6",@"title",
@"特点： 4.7英寸6.9mm超薄配备A8芯片搭载iOS8操作系统",@"description",nil],
[NSDictionarydictionaryWithObjectsAndKeys:
@"http://img01.taobaocdn.com/bao/uploaded/T1aTKOFbtcXXc9QiUZ_033001.jpg_180x180.jpg",@"image",
@"苹果 iPhone 5s",@"title",
@"特点： 64位苹果A7处理器 iSight镜头指纹识别",@"description",nil],
nil];
self.JobListTableView.estimatedRowHeight = 180;
self.JobListTableView.rowHeight =UITableViewAutomaticDimension;
4、然后实现委托方法：
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
returndataSourceArray.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier =@"YLJobListTableViewCell";
YLJobListTableViewCell *cell = (YLJobListTableViewCell *)[tableViewdequeueReusableCellWithIdentifier:cellIdentifier];
if(cell==nil)
{
cell = [[YLJobListTableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier];
}
[cellrefreshWithDict:[dataSourceArrayobjectAtIndex:indexPath.row]];
return cell;
}
-(void)refreshWithDict:(NSDictionary *)dict
{
[self.imageView1sd_setImageWithURL:[NSURLURLWithString:[dict objectForKey:@"image"]]];
self.titleLabel.text = [dictobjectForKey:@"title"];
self.descriptionLabel.text = [dictobjectForKey:@"description"];
}
到此为止，我们大功告成了么？来看看运行起来的结果：
那么问题就来了，为什么是空的呢？？？
在refreshWithDict中断点看了下，当前cell的imageView1、titleLabel和descriptionLabel都是nil，why???
等等，我们的UITableViewCell是拖的，我们是不是应该这样写：
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier =@"YLJobListTableViewCell";
YLJobListTableViewCell *cell = (YLJobListTableViewCell *)[tableViewdequeueReusableCellWithIdentifier:cellIdentifier];
if(cell==nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:cellIdentifierowner:self options:nil];
cell = [nibobjectAtIndex:0];
}
[cellrefreshWithDict:[dataSourceArrayobjectAtIndex:indexPath.row]];
return cell;
}
结果，程序又奔溃了，cell此时为nil。这又是为什么呢？说明尝试从XIB中获取名为 YLJobListTableViewCell 的UITableViewCell失败了。天呐！忘了给UITableViewCell设置标识了：
我们选中拖的Cell在这个地方设置它的标识为：YLJobListTableViewCell
好了，到此，应该没有问题了吧，再看看运行结果吧：
这。。。。说好的自动布局呢？？？为什么会出现单元格重叠，而且多行显示的descriotionLabel只显示了一部分呢？
我的第一反应是怀疑自己的约束加错了，自信检查了约束，删掉所有约束，重新来了一遍，结果还是这样，那个烦呐。。。
后来没想到滑动一下UITableView就会发现Cell重新布局了，效果好点了，但是线条的位置还是不对的。上面提到的那篇文章的博主也没有在文章中指明这一点，让我纠结了好久，在网上看到有人也遇到了这种问题，他们的解决方法是在viewDidAppear中添加[tableView reloadData];的方式来刷新列表，让它去重新布局，我试了下，效果刚开始如下：
可见，刚到这个页面，它也只是重新布局了上面几个单元格，下面的单元格并没有正确布局，手动上下来回滑动两下就全部布局好了：
不知道是什么原因，奇怪的是很多人写的UITableViewCell自动布局的demo，单元格里面只加入一个用来多行显示的UILabel不会出现这种情况，也不用在viewDidLoad中添加刷新列表的代码，一进入页面就布局好了。
可能是现在使用AutoLayout来为复杂一点的UITabelViewCell布局，还不能很好的支持。也可能是我还没找到正确使用AutoLayout为复杂的UITableViewCell自动布局的方式吧，如果各位有好的解决办法，望不吝赐教！
=====================================20150401修改============================
之后遇到了同样的问题，原来是多行的UILabel没有设置preferredMaxLayoutWidth属性造成的。
见文章：AutoLayout下多行UILabel无法显示多行文本的问题
============================================================================
总结一下：
1.由于自己一直习惯用纯代码，很久没有用Iterface Builder了，导致有些设置都忘记了，走了一些弯路。
2.理论知识需要自己亲自实践，有时候看别人写的demo貌似很简单，相信自己也可以实现。真正自己做的时候就会发现自己存在很多问题，就会发现有很多细节需要注意。
总之，纸上得来终觉浅，绝知此事要躬行！以后要多多实践才是！
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
