市面上大多数的APP首页面都会有功能菜单，并且通常可以滑动分页
UICollectionView原生Flow Layout的问题
要制作这样的功能菜单，首选的解决方案自然是UICollectionView。然而，使用UICollectionView原生的Flow Layout，会有两个问题：
- UICollectionView设置成水平方向滚动时，菜单项会变成上下排布，即：
[1][3][5] [7]
[2][4][6]
而我们所期望的是（假设每页显示6个功能项）：
[1][2][3] [7]
[4][5][6] - 剩余的item如果不满一页，则不会单独占用一页。比如有7个item，每页显示6个，那么水平滚动UICollectionView，最终边界只会固定在第7个item，而不是把第7个item当作第2页的第1个item来显示
可以看下图中的效果，原生的Flow Layout如图上半部分显示，而我们期望的是图示下半部显示的效果：
常见的解决方法
对此，有些人会寻找第三方控件实现，而有些人会转而用UIScrollView自行实现。
使用第三方控件需要熟悉其用法，有时灵活性可能不能满足要求（例如想自定义item外观），且有的实现是基于UIScrollView的，没有像UICollectionView那样有复用cell，这在效率上来说，不是很理想（但通常菜单项不会很多，也不会太要紧）。
用UIScrollView自行实现，需自行计算item的排布，会比较烦琐，另外和前面提到的一样，效率会有影响。
自定义UICollectionView布局
其实我们可以自定义UICollectionView布局来解决这个问题，自定义布局也是最为简单高效的方案。
这里只简要说一下实现过程及部分示例代码，不再赘述自定义布局相关的基础知识（对这方面不是很清楚的同学，请自行查阅相关文章），具体的实现代码也会在最后给出。
在实现之前，先要确定一下要实现的功能。自定义布局可以做的很灵活，但灵活就意味着考虑的事情越多，代码也会越复杂。秉承KISS原则，就只实现足够使用的功能。
我们假定，每个item的大小是固定不变的，这有助于layout计算排列item的位置。
实现
首先，先创建自定义布局类：
@interface KSTCollectionViewPageHorizontalLayout : UICollectionViewLayout
@property (nonatomic, assign) CGFloat lineSpacing;
@property (nonatomic, assign) CGFloat interitemSpacing;
@property (nonatomic, assign) CGSize itemSize;
@end
在prepareLayout方法中做相应的计算：
- (void)prepareLayout {
// 根据设定的itemSize和collectionView的frame来确定有多少行、多少列
// 计算可以放多少列
NSInteger baseColumnCount = self.collectionView.frame.size.width / (self.itemSize.width + self.interitemSpacing);
// 计算可以放多少行
CGFloat contentHeight = self.collectionView.frame.size.height - self.sectionInsetTop;
NSInteger baseLineCount = contentHeight / (self.itemSize.height + self.lineSpacing);
}
确定好行数、列数后，我们就可以在layoutAttributesForItemAtIndexPath中对item进行相应的排布：
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 根据行数、列数，计算每页各个item的位置
NSInteger pageItemCount = (self.calculatedLineCount * self.calculatedColumnCount);
NSInteger currentPage = indexPath.row / pageItemCount;
NSInteger currentLine = (indexPath.row - currentPage * pageItemCount) / self.calculatedColumnCount;
NSInteger currentColumn = indexPath.row % self.calculatedColumnCount;
layoutAttributes.frame = CGRectMake(currentPage * self.collectionView.frame.size.width + currentColumn * (self.itemSize.width + self.interitemSpacing), self.sectionInsetTop + currentLine * (self.itemSize.height + self.lineSpacing), self.itemSize.width, self.itemSize.height);
return layoutAttributes;
}
最后，因为我们希望剩余的item如果不够一页，也能单独占用一页显示，就需要重写collectionViewContentSize方法返回适当的contentSize：
- (CGSize)collectionViewContentSize {
// 计算item所占的页数，如7个item，每页6个，则应为2页
// 根据页数计算出适当的contentSize
NSInteger sectionItemCount = [self.collectionView numberOfItemsInSection:0];
NSInteger pageItemCount = (self.calculatedLineCount * self.calculatedColumnCount);
NSInteger pageCount = (sectionItemCount + pageItemCount - 1) / pageItemCount;
return CGSizeMake(pageCount * self.collectionView.frame.size.width, 0);
}
完成自定义布局后，给CollectionView指定布局即可：
KSTCollectionViewPageHorizontalLayout *pageHorizontalLayout = [[KSTCollectionViewPageHorizontalLayout alloc] init];
pageHorizontalLayout.itemSize = CGSizeMake(SCREEN_WIDTH / 5, 83 * (SCREEN_WIDTH / 375.0));
self.menuCollectionView.pagingEnabled = YES;
self.menuCollectionView.collectionViewLayout = pageHorizontalLayout;
细节
- 是否需要item间距及每行的间距
- 对于每一行item，是左对齐进行排布，还是分散对齐进行排布
- 是否需要像原生Flow Layout的sectionInset功能
- ……
类似这些细节问题可以自行考量，毕竟关注的细节越多，实现起来也就越复杂，还是建议视项目需要进行取舍。
自定义布局的优点
- 学习成本低，只需要更换UICollectionView的布局即可，不需要像使用第三方控件那样，去熟悉第三方控件的属性、API
- 灵活性好，要显示什么样的item，都可以自定义cell实现
- 效率高，最终还是使用UICollectionView，cell有良好的复用
- 复用性好，布局可以用于任意的UICollectionView
参考代码
具体实现代码请参考：KSTCollectionViewPageHorizontalLayout
