一、需求：
- 前段时间，产品经理给项目改了个需求：
之前的视图展示是简单的竖直方向上的瀑布流效果，后面要改成水平滑动分页的效果展示。
-
改的原因:
之所以改，主要是像以前那样能看到所有的功能模块，但是有些功能模块用户基本不用，这样用户体验不是很好，所以将用户比较少用的功能模块给放在第二页，提升用户体验。
- 改之后的具体需求:
在页面底部有一个固定的高度区域，该区域里面有行列排放整齐的小方格子视图，方格子视图的展示有固定的顺序：该顺序是先从左往右排，首行排满后再往下一行排,该页排满后再往下一页排。
-
效果图展示:
第一页(效果图).png
第二页(效果图).png
二、思考怎么做：
- **预想偏差: ** 当看到这样的效果图展示的时候，我们的第一反应可能就是直接使用
UICollectionView来做，用UICollectionViewFollowLayout布局，设置横向滚动，完全就能达到我们的效果，但其实效果是这样的：
第一页(使用UICollectionViewFlowLayout布局).png
第二页(使用UICollectionViewFlowLayout布局).png
- **偏差原因: ** 那是因为使用
UICollectionViewFollowLayout的水平方向滑动布局方式是：它是每列先从上往下排，排到最后一行后。再从下一列开始继续往下排，排到最后一行...,最后从最后一列开始排到最后一行。排满当前可视化区域后，接着再往下一页这样排。所以它的这种布局方式达不到我们想要的效果。 - **找准方向: ** 既然系统的不是我们想要的,那么这里我们可以继承
UICollectionViewFollowLayout，自定义我们的布局，以达到我们想要的效果。
三、具体实现（使用自定义布局HorizontalPageFlowLayout）：
1.定义所需属性（.h文件里）：
- 提供了一些可供设置的属性（列间距，行间距，
UICollectionView的内边距，展示多少行，每行展示多少个方格子视图）。 - 每一个
item都有一个attributes，因此定义一个数组来保存每一个item的attributes。 - 以及在创建该布局对象时同时设置这些属性的方法声明。
- 对应代码:
- .h文件.png
2.重写系统的4个方法（.m文件里）：
-
- (void)prepareLayout(布局前的准备工作) - 1.布局前的准备.png
-
- (CGSize)collectionViewContentSize(计算UICollectionView的滚动范围) - 2.计算collectionView的滚动范围.png
-
- (UICollectionViewLayoutAttributes * )layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath(设置每个方格子视图的属性) - 3.设置每个item的属性.png
-
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect(返回所有方格子视图的属性数组) - 4.返回collectionView中所有的属性数组.png
四、怎么使用：
- 拖
HorizontalPageFlowlayout的.h和.m文件到你项目中,也可以直接拖HorizontalPageFlowlayout这个文件夹到你的项目中。 - 在你要创建
UICollectionView这个对象的文件里导入头文件:#import "HorizontalPageFlowlayout.h"。 - 然后使用
HorizontalPageFlowlayout布局即可,布局的同时可以设置(列间距，行间距，UICollectionView的内边距，展示多少行，每行展示多少个方格子视图)。
举例:
- 具体使用.png
具体代码请到这里下载https://github.com/coderJW/HorizontalPageView，觉得不错的，star一下。
