ios開(kāi)發(fā)中桥胞，UICollectionView是一個(gè)極其重要的組件恳守，我們通過(guò)自定義UICollectionViewFlowLayout可以實(shí)現(xiàn)一些極其復(fù)雜的布局考婴。
項(xiàng)目demo地址為：
demo地址
這次主要實(shí)現(xiàn)的布局主要有以下三種：
-不規(guī)則高度瀑布流兩列排序
-瀑布流不規(guī)則高度多列排列
-橫向滑動(dòng)第一個(gè)cell放大
主要介紹這三種布局通過(guò)自定義UICollectionViewFlowLayout如何實(shí)現(xiàn)沥阱，demo的GitHub鏈接放在文末
瀑布流不規(guī)則高度兩列布局
在demo中的實(shí)現(xiàn)的文件名為firstViewController.m和waterFlowLayout.m，定義一個(gè)array數(shù)組伊群，用于保存不規(guī)則的高度
@property (nonatomic, strong) NSMutableArray *array;//用于存儲(chǔ)高度數(shù)據(jù)
- (NSMutableArray *)array {
if (_array) {
return _array;
}
_array = [NSMutableArray arrayWithObjects:@(100),@(150),@(150),@(50),@(130),@(180),@(200),@(100),@(110),@(200), nil];
return _array;
}
總共10個(gè)高度數(shù)據(jù)喳钟，這個(gè)可以自己定義，寬度通過(guò)計(jì)算得到，使其剛好可以放下兩列數(shù)據(jù)
代碼如下
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
float width = self.view.bounds.size.width - 10 - 10 - 10;//10分別為左邊劇、右邊距以及minimumInteritemSpacing
float height = [[self.array objectAtIndex:indexPath.row] floatValue];
return CGSizeMake(width / 2, height);
}
我們先使用UICollectionViewFlowLayout看一下實(shí)現(xiàn)的效果圖
這種布局里面有很多空白腌闯，看上去很不舒服驮吱，我們想的是將其填滿(mǎn)，所以需要自定義UICollectionViewflowlayout實(shí)現(xiàn)酬蹋，在其中我們需要使用到的自定義的方法的作用
//初始化自定義的flowLayout
- (void)prepareLayout {
//必須調(diào)用super
[super prepareLayout];
}
//滑動(dòng)時(shí)會(huì)時(shí)時(shí)調(diào)用此方法 改變布局
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
}
//替換最終滑動(dòng)的contentOffset, proposedContentOffset是預(yù)期滑動(dòng)停止的位置
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
}
// 當(dāng)collectionView bounds改變時(shí)及老，是否重新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
//返回collectionView的最終大小
- (CGSize)collectionViewContentSize {
}
自定義flowLayout參考鏈接
為了實(shí)現(xiàn)瀑布流排列，我們需要知道每一行排列后第一列和第二列的最大的y值范抓，因?yàn)橹挥袃闪薪径瘢晕覀兛梢酝ㄟ^(guò)奇偶判斷來(lái)進(jìn)行實(shí)現(xiàn)（下面多列時(shí)會(huì)使用其他的思路，也適合于兩列的情況）
新建一個(gè)文件繼承自UICollectionViewFlowLayout,命名為waterFlowLayout
在.h文件中定義一個(gè)繼承自UICollectionViewDelegateFlowLayout的協(xié)議WaterFlowLayoutDelegate
并且
@property (nonatomic, weak) id<WaterFlowLayoutDelegate> delegate;
.h文件中定義一些屬性
@property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *itemAttributes;//存儲(chǔ)各個(gè)cell的屬性
@property (nonatomic) CGFloat xOffset;
@property (nonatomic) CGFloat yOffset;
@property (nonatomic) CGFloat maxOddY;//奇數(shù)時(shí)最大的y
@property (nonatomic) CGFloat maxEvenY;//偶數(shù)時(shí)最大的y
在.m文件中
- (void)prepareLayout {
[super prepareLayout];
//初始化定義的屬性
self.scrollDirection = UICollectionViewScrollDirectionVertical;//豎直方向滑動(dòng)
self.itemAttributes = [NSMutableArray array];
self.xOffset = 0;
self.yOffset = 0;
self.maxOddY = 0;
self.maxEvenY = 0;
//獲取UICollectionView的一些基本屬性
//獲取元素個(gè)數(shù)
NSInteger count = [self.collectionView numberOfItemsInSection:0];
//獲取collectionView的組邊距
UIEdgeInsets sectionEdgeInsets = [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:0];
//自定義屬性賦初值
self.xOffset = sectionEdgeInsets.left;
self.yOffset = sectionEdgeInsets.top;
self.maxOddY = self.yOffset;
self.maxEvenY = self.yOffset;
//對(duì)于每個(gè)cell
for (int i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
//獲取對(duì)應(yīng)的cell的大小
CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
if (i % 2 == 0) {
//如果是偶數(shù)列匕垫，即左邊這列僧鲁，因?yàn)閕從0開(kāi)始的，初始的xoffset設(shè)置為左邊距象泵，初始的yOffset設(shè)置為距離頂部的邊距
self.xOffset = sectionEdgeInsets.left;
self.yOffset = self.maxEvenY;
} else {
//如果為奇數(shù)列寞秃，即右邊這列，xOffset為左邊距+cell的寬度+cell之間的間距
self.xOffset = sectionEdgeInsets.left + itemSize.width + self.minimumInteritemSpacing;
self.yOffset = self.maxOddY;
}
//獲取對(duì)應(yīng)的indexPath的cell的屬性
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//給cell賦值新的frame
attributes.frame = CGRectMake(self.xOffset, self.yOffset, itemSize.width, itemSize.height);
[self.itemAttributes addObject:attributes];
if (i % 2 == 0) {
//偶數(shù)列即左邊這列偶惠，maxEvenY最大的y偏移為初始的偏移maxEvenY + cell的高度 + cell豎向之間的距離
self.maxEvenY = self.maxEvenY + itemSize.height +
self.minimumLineSpacing;
} else {
//奇數(shù)列中春寿，最大偏移同上
self.maxOddY = self.maxOddY + itemSize.height + self.minimumLineSpacing;
}
}
}
在上面中，兩列分別使用maxEvenY 和maxOddY來(lái)記錄兩邊的最大y偏移,并且對(duì)每個(gè)cell重新計(jì)算frame忽孽，存儲(chǔ)到itemAttributes中绑改，接下來(lái)只要返回這個(gè)itemAttributes即可。
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.itemAttributes;
}
這樣之后兄一，我們運(yùn)行之后的效果圖為
我們可以看到厘线，在滑到底部時(shí)，collectionView會(huì)有很大的剩余出革，為了解決這個(gè)問(wèn)題皆的，我們需要重新限制collectionView的大小，在自定義flowLayout中
- (CGSize)collectionViewContentSize {
//maxOddY和maxEvenY正好是我們計(jì)算y方向的偏移量蹋盆，我們?nèi)∑渥畲笾? float height = MAX(self.maxOddY, self.maxEvenY);
return CGSizeMake(self.collectionView.bounds.size.width, height);
}
之后運(yùn)行费薄，得到的就是我們下面的效果圖
不規(guī)則的寬度和高度的排列
上面講了兩列的排列硝全，通過(guò)奇偶來(lái)實(shí)現(xiàn)的，有很大的局限性楞抡，下面講的是：寬度固定伟众，但是不是兩列，是多列的情況下召廷，高度不固定的實(shí)現(xiàn)凳厢，文末會(huì)付上相應(yīng)的github地址，其中的實(shí)現(xiàn)文件為secondViewController.m和waterFlowLayoutNew.m
我們首先在secondViewController中定義數(shù)組竞慢，分別存放自定義高度
@property (nonatomic, strong) NSMutableArray *heightArray;//用于存儲(chǔ)高度數(shù)據(jù)
- (NSMutableArray *)heightArray {
if (_heightArray) {
return _heightArray;
}
_heightArray = [NSMutableArray arrayWithObjects:@(100),@(150),@(150),@(50),@(130),@(180),@(200),@(100),@(110),@(200), nil];
return _heightArray;
}
對(duì)于每個(gè)collectionViewCell的大小設(shè)置為：
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSInteger count = 3;//每行排列的cell的個(gè)數(shù)
float width = self.view.bounds.size.width - 10 * 2 - 10 * (count - 1);
float height = [[self.heightArray objectAtIndex:indexPath.row] floatValue];
return CGSizeMake(width / count, height);
}
通過(guò)count設(shè)置自定義的列數(shù)（這里以3列為例子先紫，后面只需修改該數(shù)值即可）
初始時(shí),使用UICollectionViewFlowLayout,此時(shí)的布局效果如下：
這個(gè)布局很顯然不滿(mǎn)足我們的要求，通過(guò)自定義flowLayout實(shí)現(xiàn)相應(yīng)的效果
新建一個(gè)繼承自UICollectionViewLayout的類(lèi)筹煮，命名為waterFlowLayoutNew,在該類(lèi)中遮精，定義一個(gè)協(xié)議繼承自UICollectionViewDelegateFlowLayout，代碼如下：
@protocol WaterFlowLayoutNewDelegate <UICollectionViewDelegateFlowLayout>
@end
@property (nonatomic, weak) id<WaterFlowLayoutNewDelegate> delegate;
然后定義相應(yīng)的屬性
//每個(gè)cell的屬性數(shù)組
@property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *itemAttributes;
@property (nonatomic) CGFloat xOffset;
@property (nonatomic) CGFloat yOffset;
//每一行的個(gè)cell的個(gè)數(shù)
@property (nonatomic) NSInteger perLineCount;
在.m文件中败潦，
- (void)prepareLayout {
[super prepareLayout];
//初始化定義的屬性
self.scrollDirection = UICollectionViewScrollDirectionVertical;
self.itemAttributes = [NSMutableArray array];
self.xOffset = 0;
self.yOffset = 0;
//獲取相應(yīng)的collectionView的屬性
NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
UIEdgeInsets sectionInsets = [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:0];
self.xOffset = sectionInsets.left;
self.yOffset = sectionInsets.top;
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
CGSize size = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
//因?yàn)閏ell的寬度是固定的（我們自定義的寬度都是一樣的本冲，現(xiàn)在就是處理的是寬度固定、高度不固定的多列排列）劫扒，所以我們可以求出每行的cell個(gè)數(shù)
NSInteger count = floor (self.collectionView.bounds.size.width - sectionInsets.left - sectionInsets.right + self.minimumInteritemSpacing) / (size.width + self.minimumInteritemSpacing);
self.perLineCount = count;
//定義一個(gè)數(shù)組檬洞，用于存儲(chǔ)每行每一個(gè)cell的yOffset，因?yàn)槊總€(gè)cell的高度不同沟饥，所以下一行的cell布局需要用到它
NSMutableArray *yOffsetArray = [NSMutableArray arrayWithCapacity:self.perLineCount];
for (int i = 0; i < itemCount;i++) {
//獲取每一個(gè)cell的大小
CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
//當(dāng)這一行還可以放下cell時(shí)
if (self.xOffset + sectionInsets.right + itemSize.width <= self.collectionView.bounds.size.width) {
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
//當(dāng)布局的不是第一行的時(shí)候
if (yOffsetArray.count == self.perLineCount) {
//yOffset為同一列上一行的yOffset偏移量添怔，存儲(chǔ)在數(shù)組中 + 行與行之間的間距
self.yOffset = [[yOffsetArray objectAtIndex:(i % self.perLineCount)] floatValue] + self.minimumLineSpacing;
}
attributes.frame = CGRectMake(self.xOffset, self.yOffset, itemSize.width, itemSize.height);
//存儲(chǔ)cell的屬性
[self.itemAttributes addObject:attributes];
//下一個(gè)cell的xOffset
self.xOffset = self.xOffset + itemSize.width + self.minimumInteritemSpacing;
if (yOffsetArray.count < self.perLineCount) {
//布局第一行時(shí)yOffset為空，沒(méi)法使用replace贤旷，所以使用addObject
[yOffsetArray addObject:@(self.yOffset + itemSize.height)];
} else {
//布局第二行及往后澎灸，數(shù)組不為空，直接替換相應(yīng)的數(shù)組對(duì)象
[yOffsetArray replaceObjectAtIndex:(i % self.perLineCount) withObject:@(self.yOffset + itemSize.height)];
}
} else {
//當(dāng)這一行放不下時(shí)遮晚，需要換行放置
self.xOffset = sectionInsets.left;
//從數(shù)組中獲取上一行同一列的yoffset + 行與行之間的間距
self.yOffset = [[yOffsetArray objectAtIndex:(i % self.perLineCount)] floatValue] + self.minimumLineSpacing;
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
attributes.frame = CGRectMake(self.xOffset, self.yOffset, itemSize.width, itemSize.height);
//存儲(chǔ)cell的屬性
[self.itemAttributes addObject:attributes];
//下一個(gè)cell的xOffset
self.xOffset = self.xOffset + itemSize.width + self.minimumInteritemSpacing;
self.yOffset = self.yOffset + itemSize.height;
//更新yOffsetArray數(shù)組
[yOffsetArray replaceObjectAtIndex:(i % self.perLineCount) withObject:@(self.yOffset)];
}
}
}
上面先算出每一行的cell的個(gè)數(shù)性昭，然后創(chuàng)建一個(gè)同樣大小的數(shù)組，每放置一個(gè)cell县遣，就將cell的最大偏移量yOffset存儲(chǔ)或者更新到y(tǒng)OffsetArray數(shù)組中糜颠，然后將得到的每個(gè)cell的attributes存儲(chǔ)到數(shù)組中itemAttributes中
//返回每個(gè)cell的屬性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.itemAttributes;
}
//更新collectionView的大小
- (CGSize)collectionViewContentSize {
return CGSizeMake(self.collectionView.bounds.size.width, self.yOffset);
}
最終得到的效果圖為（3列的情況下）
修改count為4，即是4列等寬度的情況
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSInteger count = 4;//每行排列的cell的個(gè)數(shù)
float width = self.view.bounds.size.width - 10 * 2 - 10 * (count - 1);
float height = [[self.heightArray objectAtIndex:indexPath.row] floatValue];
return CGSizeMake(width / count, height);
}
相應(yīng)的效果圖為：
這種方法的適用性更廣萧求，比2列情況下的奇偶解決思路要好一些其兴。
橫向滑動(dòng)時(shí)第一個(gè)cell放大的實(shí)現(xiàn)
要實(shí)現(xiàn)的最終效果如下：
先使用UICollectionViewFlowLayout來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滑動(dòng)，滑動(dòng)方向設(shè)置為水平滑動(dòng)夸政。
設(shè)置cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(100, 100);
}
最終得到的效果圖為：
滑動(dòng)過(guò)程中cell大小不會(huì)變化元旬，下面開(kāi)始使用自定義的flowLayout
新建一個(gè)文件繼承自UICollectionViewFlowLayout，命名為FirstCellZoomInLayoutTwo
在.h文件中，定義相應(yīng)的協(xié)議匀归，協(xié)議中定義一個(gè)協(xié)議方法坑资，用于實(shí)現(xiàn)對(duì)第一個(gè)cell的frame放大
@protocol FirstCellZoomInLayoutTwoDelegate <UICollectionViewDelegateFlowLayout>
- (CGSize)sizeForFirstCell;
@end
.h文件中定義相應(yīng)的協(xié)議
@property (nonatomic, weak) id<FirstCellZoomInLayoutTwoDelegate> delegate;
在.m文件中
- (void)prepareLayout {
[super prepareLayout];
//必須要設(shè)置，因?yàn)槟J(rèn)的滑動(dòng)方向是豎直滑動(dòng)
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;//設(shè)置滑動(dòng)方向?yàn)樗交瑒?dòng)
}
在ThirdViewController.m中穆端，遵守協(xié)議袱贮，實(shí)現(xiàn)相應(yīng)的協(xié)議方法
- (CGSize)sizeForFirstCell {
return CGSizeMake(120, 150);
}
接著需要修改第一個(gè)cell的frame
在FirstCellZoomInLayoutTwo.m文件中
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
//獲取原有的所有cell的布局信息
NSArray *originalArr = [super layoutAttributesForElementsInRect:rect];
//獲取collectionView的相關(guān)屬性
UIEdgeInsets sectionInsets = [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:0];
CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
//因?yàn)榧由狭藄elf.collectionView.contentoffset.x,所以first代表的是顯示在界面上的最左邊的cell
CGRect first = CGRectMake(sectionInsets.left + self.collectionView.contentOffset.x, sectionInsets.top + self.collectionView.contentOffset.y, itemSize.width, itemSize.height);
//需要放大的cell的大小
CGSize firstCellSize = [self.delegate sizeForFirstCell];
CGFloat totalOffset = 0;
for (UICollectionViewLayoutAttributes *attributes in originalArr) {
CGRect originFrame = attributes.frame;
//判斷兩個(gè)矩形是否相交，判斷cell與需要放大的cell的frame是否有相交体啰，如果相交攒巍，需要修改cell的frame
if (CGRectIntersectsRect(first, originFrame)) {
//如果相交，獲取兩個(gè)矩形相交的區(qū)域
CGRect insertRect = CGRectIntersection(first, originFrame);
attributes.size = CGSizeMake(itemSize.width + (insertRect.size.width / itemSize.width) * (firstCellSize.width - itemSize.width), itemSize.height + (insertRect.size.width) / (itemSize.width) * (firstCellSize.height - itemSize.height));
//計(jì)算因?yàn)榉糯蟮谝粋€(gè)導(dǎo)致的cell的中心點(diǎn)的偏移量
CGFloat currentOffsetX = attributes.size.width - itemSize.width;
attributes.center = CGPointMake(attributes.center.x + totalOffset + currentOffsetX / 2, attributes.center.y);
totalOffset = totalOffset + currentOffsetX;
} else {
//當(dāng)cell的最小x值大于第一個(gè)cell的最大x值時(shí)荒勇，cell的偏移量需要加上totolOffset
if (CGRectGetMinX(originFrame) >= CGRectGetMaxX(first)) {
attributes.center = CGPointMake(attributes.center.x + totalOffset, attributes.center.y);
}
}
}
return originalArr;
}
上面處理的思路是：
判斷各個(gè)cell與第一個(gè)cell是否相交（只有第一個(gè)cell才能與其相交）柒莉，相交的話(huà)將該cell的寬高設(shè)為放大后的寬高，中心點(diǎn)的偏移量為currentOffsetX的一半沽翔，如果不相交的話(huà)兢孝，中心點(diǎn)的偏移量為currentOffset，不用除以二
這樣之后的運(yùn)行效果為：
可以看到此時(shí)的frame大小滑動(dòng)的過(guò)程中會(huì)出現(xiàn)各種異常搀擂，這是因?yàn)閏ollectionView的bounds發(fā)生變化，我們沒(méi)有及時(shí)更新導(dǎo)致的卷玉，需要加上以下方法
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
這是運(yùn)行的效果圖為：
從上面的圖上可以看出，已經(jīng)基本滿(mǎn)足要求相种，但是滑動(dòng)后停留的位置不準(zhǔn)威恼，接下來(lái)需要對(duì)這個(gè)進(jìn)行處理
在- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity方法中進(jìn)行處理
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {
//獲取collectionView的相關(guān)屬性
UIEdgeInsets sectionInsets = [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:0];
CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
CGFloat finalPointX = 0;
//根據(jù)最終的偏移量計(jì)算出最終停留的cell的index值，向上取整
NSInteger index = ceil(proposedContentOffset.x / (itemSize.width + self.minimumInteritemSpacing));
//根據(jù)index值計(jì)算出相應(yīng)的偏移量
finalPointX = (itemSize.width + self.minimumInteritemSpacing) * index;
//得到最終停留點(diǎn)
CGPoint finalPoint = CGPointMake(finalPointX, proposedContentOffset.y);
return finalPoint;
}
最終的效果圖為：
總結(jié)
通過(guò)自定義UICollectionViewFlowLayout可以實(shí)現(xiàn)一些復(fù)雜的布局效果寝并，
demo地址
