iOS 中 TableView 内嵌套 CollectionView 动态高度的实现

在有社交分享平台属性的app中,我们经常看见类似有tableview中多图展示。不管是发布的表单界面中,还是社交动态的时间线的界面中,都需要根据图片数量动态变化界面。最近刚好写了一个这样的界面,花了点时间写了个Demo总结一下,希望可以帮助有需要的人。实现Demo效果如下图。

11967869-a08de49bc52e66d8

collectionintable.gif

实现原理分析

初步思路是在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来高度自适应,需要下面两句代码。

如果tableview是用代码创建的,那么rowheight属性的默认参数就是UITableViewAutomaticDimension,不需要第二行代码。而在storyboard或xib里拖的默认rowheight是拖的storyboard属性菜单里的,需要更改为UITableViewAutomaticDimension

接着自定义一个CDZTableViewCell,并用xib拖上一个collectionview并设置对contenview的autolayout约束。用Masonry之类的第三方布局库或原生进行代码约束也可以。然后在tableview里用registerNib方法注册一下自定义的cell。当然要实现动态高度变化,我们还需要让cell在合适的时候通知tableview应该更新数据和布局了,即调用tableview自身的reloadData方法。这里我用delegate实现,通知的话也可以,但是通知的要明确接受者和发送者的对应关系,不然有些情况会接受对象不明确(比如实现了两个类似的tableview在视图里)。在cell的头文件里创建delegate。

然后让tableview遵守CDZTableViewCellDelegate并在tableview的datasource或delegate方法里设置cell的delegate,比如

也可以在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,如下:

同样也要实现collectionviewcell里元素对cell四边的约束,“撑”起来自动计算高度,但是不知道为何用了之后在一个cell的时候会莫名其妙居中,且cell的indexPath有些错乱,根据cell的indexPath找出来的cell是错误的,不知道是啥问题,若有人知道可以告诉一声囧。

这里就不用collectionview的大小自适应了,常规的用设置itemsize的大小就好了。在tableviewcellawakeFromNib方法中,我们让collectionviewreloadData更新一下高度布局约束为collectionview的真实高度并调用刚才自定义的delegate去让tableviewreloadData从而让tableview的cell高度自适应。

collectionview的真实大小其实是他的layout对象的collectionviewcontentsize的值。所以我们需要在每次数据发生改变时,更新一下高度约束的值。

还有就是实现collectionview的delegate,点击后执行操作,在赋值在cell对应的model里等操作(比如调用相册等)。注意当点击最后一个collectioncell时,要在它的后面插入一个数据,也就是说,最后一个总是会保持在最后。

3.自定义collectionviewcell并实现删除按钮

先自定义一个CDZCollectionViewCell,并用xib拖上一个imageview用于展示图片,一个button用于点击关闭cell。并定义好解析item的方法。item中设定一个delBtnHidden属性用于设定cell里的button是否隐藏。

并定义一个delegate用于将按钮点击事件回传给collectionview并删除数据。

并在点击按钮的事件中调用delegate,把cell本身传回tableview,从而找到cell对应的item。

然后使collectionview所在的tableviewcell遵守CDZCollectionCellDelegate。并和之前一样,在collectionview的datasource或delegate中设置delegate。

并调用cell的delegate的方法,通过cell去找到对应的indexPath

第一个cell是没有关闭按钮的,那么只要把第一个item的delBthHidden属性设为YES就可以了。

最后

所有源码和Demo

如果您觉得有帮助,不妨给个star鼓励一下,欢迎关注&交流

有任何问题欢迎评论私信或者提issue

QQ:757765420
Email:nemocdz@gmail.com
Github:Nemocdz
微博:@Nemocdz

谢谢观看

1 6 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部