在有社交分享平台属性的app中，我们经常看见类似有tableview中多图展示。不管是发布的表单界面中，还是社交动态的时间线的界面中，都需要根据图片数量动态变化界面。最近刚好写了一个这样的界面，花了点时间写了个Demo总结一下，希望可以帮助有需要的人。实现Demo效果如下图。
实现原理分析
初步思路是在tableview的cell中内嵌一个collecitonview，collectionview高度动态变化并是collectionview所在的tableview的cell的高度动态变化。总结起来我们需要这几件事：
1.实现一个tableview并自定义一种tableviewcell并实现高度自适应
2.在tableviewcell中实现collectionview并实现高度动态变化
3.自定义collectionviewcell中实现按钮点击事件（如删除，跳转），数据展示操作
1.实现tableview和自定义tableviewcell
tableview就很简单，storyboard或者代码写一下都可以。实现数据源协议啥的，很普通。要实现tableviewcell的高度自适应，一般来说有两种方式，一种是用iOS7后支持的cell的estimatedRowHeight和iOS8后支持的self-sizing cells（两者差不多，iOS8更完善一些），另一种是用孙源大神的第三方开源库，可以看这篇文章，两者共同之处都是需要设置cell里contenview的元素对cell的contenview的四个边的布局约束，换言之要让cell里的元素把cell四边“撑”起来。Demo里使用了原生的self-sizing cells来高度自适应，需要下面两句代码。
self.tableview.estimatedRowHeight = 100.f;//数字为大致估算高度，比如有些50有些100可以估算75左右
self.tableview.rowHeight = UITableViewAutomaticDimension;
如果tableview是用代码创建的，那么rowheight属性的默认参数就是UITableViewAutomaticDimension，不需要第二行代码。而在storyboard或xib里拖的默认rowheight是拖的storyboard属性菜单里的，需要更改为UITableViewAutomaticDimension。
接着自定义一个CDZTableViewCell，并用xib拖上一个collectionview并设置对contenview的autolayout约束。用Masonry之类的第三方布局库或原生进行代码约束也可以。然后在tableview里用registerNib方法注册一下自定义的cell。
因为TableView执行reloadData方法时，会把所有cell从VisableCells池中移除，并从同一复用标识的复用池中取出Cell加入视图中，这个时候cell的高度已经确定好，但indexPath的row顺序有可能不是原来的，所以不能复用。也就是虽然每一个Cell功能一致，但是由于高度和里面图片数量不一样，并不能互相复用。在Storyboard中可以用静态cell分别放入collectionView实现。这里为了不重复放collectionView用了代码书写TableView。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
NSString *identifer = [NSString stringWithFormat:@"CDZTableViewCell%ld",indexPath.row];//唯一复用标识，相当于不复用
CDZTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifer];
if (!cell) {
cell = [CDZTableViewCell.alloc initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifer];
}
cell.delegate = self;
return cell;
}
当然要实现动态高度变化，我们还需要让cell在合适的时候通知tableview应该更新数据和布局了，即调用tableview自身的reloadData方法。这里我用delegate实现，通知的话也可以，但是通知的要明确接受者和发送者的对应关系，不然有些情况会接受对象不明确（比如实现了两个类似的tableview在视图里）。在cell的头文件里创建delegate。
@protocol CDZTableViewCellDelegate<NSObject>
- (void)didChangeCell:(UITableViewCell *)cell;
@end
@interface CDZTableViewCell : UITableViewCell
@property (nonatomic,assign) id<CDZTableViewCellDelegate> delegate;
@end
然后让tableview遵守CDZTableViewCellDelegate并在tableview的datasource或delegate方法里设置cell的delegate，比如
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//......
cell.delegate = self;
//......
}
也可以在delegate里的-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath里设置（感觉这个方法更好些，datasource应该处理数据相关的，而且有时候会复用抽离出来）。
2.实现collectionview和自定义collectionviewcell
collectionview在约束上，除了实现collecitionview对tableviewcell的上下左右约束外，还要实现其高度约束，因为本质collectionview是scrollview的子类，实现scollview的autolayout其实就是需要实现对其撑起来contentview的约束，而动态实现contentview的高度，则需要我们更新contenview的高度布局约束的值。collectionview也是类似的，我们先设定一个collectionview的高度约束，再在数据更新时更新高度约束。
这里再提一句，collectionview本身和tableview类似，系统本身也有self-sizing cells的api，如下：
self.collectionViewFlowLayout.estimatedItemSize = CGSizeMake(125, 100);
self.collectionViewFlowLayout.itemSize = UICollectionViewFlowLayoutAutomaticSize;
同样也要实现collectionviewcell里元素对cell四边的约束，“撑”起来自动计算高度，但是不知道为何用了之后在一个cell的时候会莫名其妙居中，且cell的indexPath有些错乱，根据cell的indexPath找出来的cell是错误的，不知道是啥问题，若有人知道可以告诉一声囧。
这里就不用collectionview的大小自适应了，常规的用设置itemsize的大小就好了。在tableviewcellawakeFromNib方法中，我们让collectionviewreloadData更新一下高度布局约束为collectionview的真实高度并调用刚才自定义的delegate去让tableviewreloadData从而让tableview的cell高度自适应。
- (void)reloadCell{
[self.collectionView reloadData];
[self.collectionView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@(self.collectionView.collectionViewLayout.collectionViewContentSize.height));
}];
[self.delegate didChangeCell:self];
}
collectionview的真实大小其实是他的layout对象的collectionviewcontentsize的值。所以我们需要在每次数据发生改变时，更新一下高度约束的值。
还有就是实现collectionview的delegate，点击后执行操作，在赋值在cell对应的model里等操作（比如调用相册等）。注意当点击最后一个collectioncell时，要在它的后面插入一个数据，也就是说，最后一个总是会保持在最后。
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//载入数据，如图片等
CDZCollectionViewItem *item = [CDZCollectionViewItem new];
item.image = [UIImage imageNamed:@"example"];
if ((indexPath.row == self.itemsArray.count - 1)) {
[self.itemsArray insertObject:item atIndex:self.itemsArray.count - 1];
}
else{
self.itemsArray[indexPath.row] = item;
}
[self reloadCell];
}
3.自定义collectionviewcell并实现删除按钮
先自定义一个CDZCollectionViewCell，并用xib拖上一个imageview用于展示图片，一个button用于点击关闭cell。并定义好解析item的方法。item中设定一个delBtnHidden属性用于设定cell里的button是否隐藏。
- (void)setItem:(CDZCollectionViewItem *)item{
// 解析需要的数据
self.imageView.image = item.image;
self.delButton.hidden = item.delBtnHidden;
}
并定义一个delegate用于将按钮点击事件回传给collectionview并删除数据。
@protocol CDZCollectionCellDelegate<NSObject>
- (void)didDelete:(UICollectionViewCell *)cell;
@end
@interface CDZCollectionViewCell : UICollectionViewCell
@property (strong, nonatomic) CDZCollectionViewItem *item;
@property (assign, nonatomic) id<CDZCollectionCellDelegate> delegate;
@end
并在点击按钮的事件中调用delegate，把cell本身传回tableview，从而找到cell对应的item。
- (IBAction)delCell:(UIButton *)sender{
if ([self.delegate respondsToSelector:@selector(didDelete:)]){
[self.delegate didDelete:self];
}
}
然后使collectionview所在的tableviewcell遵守CDZCollectionCellDelegate。并和之前一样，在collectionview的datasource或delegate中设置delegate。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//......
cell.delegate = self;
//......
}
并调用cell的delegate的方法，通过cell去找到对应的indexPath
- (void)didDelete:(UICollectionViewCell *)cell{
NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];
[self.itemsArray removeObjectAtIndex:indexPath.row];
[self reloadCell];
}
第一个cell是没有关闭按钮的，那么只要把第一个item的delBthHidden属性设为YES就可以了。
最后
所有源码和Demo
如果您觉得有帮助,不妨给个star鼓励一下,欢迎关注&交流
有任何问题欢迎评论私信或者提issue
QQ：757765420
Email：nemocdz@gmail.com
Github：Nemocdz
微博：@Nemocdz
