一忌穿、需求：
- 前段時(shí)間笙隙，產(chǎn)品經(jīng)理給項(xiàng)目改了個(gè)需求：
之前的視圖展示是簡單的豎直方向上的瀑布流效果，后面要改成水平滑動(dòng)分頁的效果展示隔心。
-
改的原因:
之所以改白群，主要是像以前那樣能看到所有的功能模塊，但是有些功能模塊用戶基本不用硬霍，這樣用戶體驗(yàn)不是很好帜慢，所以將用戶比較少用的功能模塊給放在第二頁，提升用戶體驗(yàn)唯卖。
- 改之后的具體需求:
在頁面底部有一個(gè)固定的高度區(qū)域崖堤，該區(qū)域里面有行列排放整齊的小方格子視圖，方格子視圖的展示有固定的順序：該順序是先從左往右排耐床，首行排滿后再往下一行排,該頁排滿后再往下一頁排密幔。
-
效果圖展示:
第一頁(效果圖).png
第二頁(效果圖).png
二、思考怎么做：
- **預(yù)想偏差: ** 當(dāng)看到這樣的效果圖展示的時(shí)候撩轰，我們的第一反應(yīng)可能就是直接使用
UICollectionView來做胯甩，用UICollectionViewFollowLayout布局，設(shè)置橫向滾動(dòng)堪嫂，完全就能達(dá)到我們的效果偎箫，但其實(shí)效果是這樣的：
第一頁(使用UICollectionViewFlowLayout布局).png
第二頁(使用UICollectionViewFlowLayout布局).png
- **偏差原因: ** 那是因?yàn)槭褂?code>UICollectionViewFollowLayout的水平方向滑動(dòng)布局方式是：它是每列先從上往下排，排到最后一行后皆串。再從下一列開始繼續(xù)往下排淹办，排到最后一行...,最后從最后一列開始排到最后一行。排滿當(dāng)前可視化區(qū)域后恶复，接著再往下一頁這樣排怜森。所以它的這種布局方式達(dá)不到我們想要的效果。
- **找準(zhǔn)方向: ** 既然系統(tǒng)的不是我們想要的,那么這里我們可以繼承
UICollectionViewFollowLayout谤牡，自定義我們的布局副硅，以達(dá)到我們想要的效果。
三翅萤、具體實(shí)現(xiàn)（使用自定義布局HorizontalPageFlowLayout）：
1.定義所需屬性（.h文件里）：
- 提供了一些可供設(shè)置的屬性（列間距恐疲，行間距，
UICollectionView的內(nèi)邊距套么，展示多少行培己，每行展示多少個(gè)方格子視圖）。 - 每一個(gè)
item都有一個(gè)attributes胚泌，因此定義一個(gè)數(shù)組來保存每一個(gè)item的attributes省咨。 - 以及在創(chuàng)建該布局對象時(shí)同時(shí)設(shè)置這些屬性的方法聲明。
- 對應(yīng)代碼:
- .h文件.png
2.重寫系統(tǒng)的4個(gè)方法（.m文件里）：
-
- (void)prepareLayout(布局前的準(zhǔn)備工作) - 1.布局前的準(zhǔn)備.png
-
- (CGSize)collectionViewContentSize(計(jì)算UICollectionView的滾動(dòng)范圍) - 2.計(jì)算collectionView的滾動(dòng)范圍.png
-
- (UICollectionViewLayoutAttributes * )layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath(設(shè)置每個(gè)方格子視圖的屬性) - 3.設(shè)置每個(gè)item的屬性.png
-
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect(返回所有方格子視圖的屬性數(shù)組) - 4.返回collectionView中所有的屬性數(shù)組.png
四诸迟、怎么使用：
- 拖
HorizontalPageFlowlayout的.h和.m文件到你項(xiàng)目中,也可以直接拖HorizontalPageFlowlayout這個(gè)文件夾到你的項(xiàng)目中茸炒。 - 在你要?jiǎng)?chuàng)建
UICollectionView這個(gè)對象的文件里導(dǎo)入頭文件:#import "HorizontalPageFlowlayout.h"。 - 然后使用
HorizontalPageFlowlayout布局即可,布局的同時(shí)可以設(shè)置(列間距阵苇，行間距壁公，UICollectionView的內(nèi)邊距，展示多少行绅项，每行展示多少個(gè)方格子視圖)紊册。
舉例:
- 具體使用.png
具體代碼請到這里下載https://github.com/coderJW/HorizontalPageView，覺得不錯(cuò)的快耿，star一下囊陡。
