利用UICollectionView做的水平滑动分页视图

一、需求：

• 前段时间，产品经理给项目改了个需求：

之前的视图展示是简单的竖直方向上的瀑布流效果，后面要改成水平滑动分页的效果展示。

• 改的原因:

  之所以改，主要是像以前那样能看到所有的功能模块，但是有些功能模块用户基本不用，这样用户体验不是很好，所以将用户比较少用的功能模块给放在第二页，提升用户体验。

• 改之后的具体需求:

在页面底部有一个固定的高度区域，该区域里面有行列排放整齐的小方格子视图，方格子视图的展示有固定的顺序：该顺序是先从左往右排，首行排满后再往下一行排,该页排满后再往下一页排。

• 效果图展示:
  第一页(效果图).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

四、怎么使用：

1. 拖HorizontalPageFlowlayout的.h和.m文件到你项目中,也可以直接拖HorizontalPageFlowlayout这个文件夹到你的项目中。
2. 在你要创建UICollectionView这个对象的文件里导入头文件:#import "HorizontalPageFlowlayout.h"。
3. 然后使用HorizontalPageFlowlayout布局即可,布局的同时可以设置(列间距，行间距，UICollectionView的内边距，展示多少行，每行展示多少个方格子视图)。
   举例:

• 具体使用.png

具体代码请到这里下载https://github.com/coderJW/HorizontalPageView，觉得不错的，star一下。