iOS使用CollectionView實現瀑布流

將螢幕等分成三列然後將載入到每一列中，在加入到列之前，首先判斷那一列的高度最低，然後把加到高度最低的那列中。

使用uicollectionview，採用自定義布局的方式，設定cell的排列規則完成瀑布流。

自定義布局中，指定滾動方向，預設列數，行間距，列間距，以及指定cell的大小itemsize

建立乙個陣列columnmaxys（記錄當前每一列的最大y值）

通過判斷記錄的最大y值是否為最小的一列計算item的x座標和y座標並記錄新增上的item那一列的最大y座標設定item的frame屬性

當我們的item進入復用池的時候，我們的介面展示的我們眼睛看到的以及我們想的，是和事實不相符的。當我們向上滑動的時候你感覺 y值在無線變大，但其實我們的y值在最上方還是0。這裡就需要用到preparelayout方法。這個方法會在item出現在螢幕上之前反覆執行。

在第一次載入的時候我們會計算所有的item的布局屬性，但是當我們上下滑動的時候，還是需要重新計算這些布局屬性，所以我們需要提供乙個布局屬性陣列存放cell的布局屬性，避免必要的計算。

我們需要知道如何返回我們計算出來的item的布局屬性，並且在那裡計算合適，不會出現資料丟失的現行， layoutattributesforelementsinrect：（返回所有元素的布局屬性陣列）。

這裡需要設定collection的滾動屬性，就需要設定她的contentsize 。沒關係系統已經給出了這樣的方法collectionviewcontentsize

#import 
@inte***ce
zqcollectionviewcontroller : uicollectionviewcontroller
@end

#import "zqcollectionviewcontroller.h"
#import "zqcollectionviewcell.h"
#import "zqcollectionviewlayout.h"
@inte***ce
zqcollectionviewcontroller ()
@end
@implementation
zqcollectionviewcontroller
static
nsstring * const reuseidentifier = @"cell";
- (void)viewdidload 
zqcollectionviewlayout *layout=[[zqcollectionviewlayout alloc]init];
layout.imagelist=arr;
self
.collectionview
.collectionviewlayout=layout;
[self
.collectionview registernib:[uinib nibwithnibname:@"zqcollectionviewcell" bundle:nil] forcellwithreuseidentifier:reuseidentifier];
}- (nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview 
- (nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section 
- (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath 
@end

#import 
@inte***ce
zqcollectionviewcell : uicollectionviewcell
//注意這裡是使用xib繪製的
@property (weak, nonatomic) iboutlet
uiimageview *imgv;
@end

#import "zqcollectionviewcell.h"
@implementation
zqcollectionviewcell
@end

#import 
@inte***ce
zqcollectionviewlayout : uicollectionviewlayout
@property(nonatomic,copy)nsarray *imagelist;
@end

#import "zqcollectionviewlayout.h"
#define newdefaultcollectionviewwidth self.collectionview.frame.size.width
//static 只在當前作用域使用 const 不可修改的
static
const
uiedgeinsets newdefaultinsets=;
//定義行列之間的間距
static
const
cgfloat newdefaultcolumn=10;
//定義預設的列數
static
int newderaultnumber=3;
@inte***ce
zqcollectionviewlayout ()
//建立陣列存放 y值最大值 存放cell的布局屬性
@property(nonatomic,strong)nsmutablearray *columnarr;
@property(nonatomic,strong)nsmutablearray *cellarr;
@end
@implementation
zqcollectionviewlayout
- (nsmutablearray *)columnarr
return _columnarr;
}- (nsmutablearray *)cellarr
return _cellarr;
}- (uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath
}cgfloat x=newdefaultinsets.left +sum*(width+newdefaultcolumn);
cgfloat y=newdefaultinsets.top+summaxy;
attr.frame=cgrectmake(x, y, width, height);
//更新陣列，獲取最大的y 下一次比較時用到 記住每一次都會走下面這個方法 而這個方法 第一次的時候都是0 第二次的時候兩個0 第三次的時候就不一樣了
self
.columnarr[sum]=@(cgrectgetmaxy(attr.frame));
return attr;
}#pragma mark -- 這裡下面的方法 是當我們向上或向下滑動item的時候 我們需要將我們的最大y座標重置 為什麼呢 因為如果你繼續使用最大y座標 它還是向下排列
- (void)preparelayout
//設定cell的布局屬性 這裡的self.layoutattributesforitematindexpath 是本類的乙個屬性 通過對應的indexpath我們可以拿到對應的item的布局屬性 然後儲存起來
[self
.cellarr removeallobjects];
nsinteger count=[self
.collectionview numberofitemsinsection:0];
for (int i=0; insindexpath *indexpath=[nsindexpath indexpathforitem:i insection:0];
uicollectionviewlayoutattributes *attrs=[self layoutattributesforitematindexpath:indexpath];
[self
.cellarr addobject:attrs];
}}#pragma mark -- 設定collectionview的範圍 contentsize
- (cgsize)collectionviewcontentsize
}//這裡返回的橫座標是什麼都可以
return cgsizemake(0, summaxy);
}- (nullable nsarray
<__kindof uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect
@end

iOS使用CollectionView實現瀑布流

iOS的集中collection布局

Collection介面的使用

Collection集合的使用

iOS使用CollectionView實現瀑布流

iOS的集中collection布局

Collection介面的使用

Collection集合的使用

相關推薦