UICollectionView使用

先上图再解释！

70D72950-B109-4362-8B3E-E2C628E019AB.png

公司要求做一个这样的一个页面，刚接到这个需求，还容易就想到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，代码如下

8DB2FEFB-322E-4706-BC7B-11E5A3F60F49.png

数据源具体代码：

065B6BEC-7AF7-4375-8307-A445100E6320.png

4069779E-D85D-476A-83B0-E7A8562DBD35.png