先上图再解释!
公司要求做一个这样的一个页面,刚接到这个需求,还容易就想到tableView 嵌套 collectionView。
下面一步一步说明实现的逻辑,首先肯定创建tableview,实现数据源方法,在自定义tableviewCell ,在上面添加collectionView ,这是一个很重要的点需要注意,tableviewcell 可以重用也可以不重用,可以给每个cell设置不同的重用标识符,但是collectionViewCell 必须重用,也就是说tableviewCell上面创建了多个collectionview,多个collectionview可以重用同一个一个collectionviewcell 。
在创建tableviewcell的时候内部创建collectionview,这个collectionview最好是懒加载的,因为cell的数据源方法会调用多次,也就会多次创建collectionview,懒加载保证cell没有创建新的内部的子控件collectionview 也不会创建多个,在懒加载的时候设置好数据源和代理和布局属性,我们这是要给cell设置不同的数据源(dataArray),cell的setDataArray的时候刷新内部的collectionvView
其中还有一个UI的问题,就是每行cell距离左边的距离和右边的距离还有中间的距离一致,之前想给collectionView 的大小改变一下,不过这样设置背景颜色的时候会有一些奇怪,具体的看你的项目,如果可以也可以这么设置,我现在用到的是flowLayOut的一个属性sectionInset属性,设置组内的偏移量(flowlayout.sectionInset = UIEdgeInsetsMake(0, margin, 0, margin);),让左边和右边都留出来一个间距margin,在设置flowLayOut 的minimumInteritemSpacingcell间距为margin,这样在计算cell的大小为(屏幕的宽度 - 3*margin )/ 2 ,这就是每个cell的宽度,通过宽高比计算出高度
这样基本就能显示出来cell了,那么问题又来了,UI上面要加一条横线,我们都知道collectionviewcell 是哪一个小块,不想tableviewcell可以在底部加横线,在考虑再三我选择那个横线用一个cell去做,也就是说两个正常的cell中间返回一个横线cell,这就要我们改掉数据源方法,需要计算出我们需要加多少个横线cell,在加上普通的cell,一共才是总共的cell个数,还有就是cell的大小不一样了,正常的cell的大小还需要那么计算,但是线的cell的大小就变了,我们只需要遵循UICollectionViewDelegateFlowLayout这个代理,并实现代理方法-(CGSize)collectionView: layout: sizeForItemAtIndexPath: 判断位置返回对应大小的cell,代码如下
数据源具体代码: