CollectionView實(shí)現(xiàn)以下效果.
思路:
先說一下這個效果的實(shí)現(xiàn)思路,首先需要確定該瀑布流有多少列,然后需要確定每個cell 的高度,用一個數(shù)組記錄下每一列的已添加上去的cell的高度和.然后添加下一個cell的時候找出所有列中高度最小的列,再添加上去.
例如:在該例子中,總共有兩列,當(dāng)添加完第一第二個cell,即第一行添加完了,要添加第三個cell,就需要找出第一第二列中高度最短的那一列,然后添加到最短那一列下面,以此類推.
實(shí)現(xiàn):
首先我們需要初始化collectionView,步驟與 "iOS-CollectionView 基礎(chǔ)" 類似.
該效果需要自定義布局,實(shí)現(xiàn)瀑布流效果.
創(chuàng)建一個布局類,繼承于UICollectionViewLayout. (流水布局對應(yīng)的類繼承于UICollectionViewFlowLayout, UICollectionViewFlowLayout 是 UICollectionViewLayout的子類)
在布局類需要重寫四個方法,分別是:
1. 重寫prepareLayout方法
-作用:在這個方法做一些初始化操作
-注意:一定要調(diào)用 [super prepareLayout]
2.重寫layoutAttributesForItemAtIndexPath:方法
-作用:返回indexPath 位置cell對應(yīng)的布局屬性
3. 重寫layoutAttributesForElementsInRect:方法
-作用:
這個方法的返回值是個數(shù)組
這個數(shù)組中存放的是UICollectionViewLayoutAttributes對象
UICollectionViewLayoutAttributes 對象決定了cell的排布方式
4.重寫collectionViewContentSize方法
-作用:決定collectionView的可滾動范圍
代碼實(shí)現(xiàn):
布局類.m 文件
1.定義如下靜態(tài)變量
/** 列數(shù)*/
static const CGFloat columCount = 3;
/** 每一列間距*/
static const CGFloat columMargin = 10;
/** 每一列間距*/
static const CGFloat rowMargin = 10;
/** 邊緣間距*/
static const UIEdgeInsets defaultEdgeInsets = {10,10,10,10};
2.聲明兩個屬性
/** 布局屬性數(shù)組*/
@property (nonatomic,strong) NSMutableArray *attrsArray;
/** 存放所有列的當(dāng)前高度*/
@property (nonatomic,strong) NSMutableArray *columnHeight;
懶加載 attrsArray, columnHeight
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {
_attrsArray = [NSMutableArray array];
}
return _attrsArray;
}
- (NSMutableArray *)columnHeight
{
if (!_columnHeight) {
_columnHeight = [NSMutableArray array];
}
return _columnHeight;
}
重寫prepareLayout方法
/** 初始化*/
- (void)prepareLayout
{
[super prepareLayout];
//如果刷新布局就會重新調(diào)用prepareLayout這個方法,所以要先把高度數(shù)組清空
[self.columnHeight removeAllObjects];
for (int i = 0; i < self.columCount; i++) {
[self.columnHeight addObject:@(self.defaultEdgeInsets.top)];
}
NSInteger count = [self.collectionView numberOfItemsInSection:0];
[self.attrsArray removeAllObjects];
for (NSInteger i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
//獲取indexPath 對應(yīng)cell 的布局屬性
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attr];
}
}
該方法返回對應(yīng)cell上的布局屬性.我們可以在這個方法中設(shè)置cell 的布局樣式.在prepareLayout方法中,我們根據(jù)這個方法,傳入對應(yīng)的IndexPath從而獲取到布局屬性attr,然后添加到數(shù)組中.
/**
* 返回indexPath 位置cell對應(yīng)的布局屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//使用for循環(huán),找出高度最短的那一列
//最短高度的列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeight[0] doubleValue];
for (NSInteger i = 1; i < self.columCount; i++) {
CGFloat columnHeight =[self.columnHeight[i] doubleValue];
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = i;
}
}
CGFloat w = (self.collectionView.frame.size.width - self.defaultEdgeInsets.left - self.defaultEdgeInsets.right - (self.columCount - 1) * self.columMargin )/self.columCount;
//(使用代理在外部決定cell 的高度,下面會介紹)
CGFloat h = [self.delegate waterFlowLayout:self heightForRowAtIndex:indexPath.item itemWidth:w];
CGFloat x = self.defaultEdgeInsets.left + destColumn*(w + self.columMargin);
CGFloat y = minColumnHeight ;
if (y != self.defaultEdgeInsets.top) {
y += self.rowMargin;
}
attr.frame = CGRectMake(x,y,w,h);
self.columnHeight[destColumn] = @(y+ h);
return attr;
}
重寫layoutAttributesForElementsInRect:方法
/**
* 決定cell 的排布
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
決定collectionView的可滾動范圍
- (CGSize)collectionViewContentSize
{
CGFloat maxHeight = [self.columnHeight[0] doubleValue];
for (int i = 1; i < self.columCount; i++) {
CGFloat value = [self.columnHeight[i] doubleValue];
if (maxHeight < value) {
maxHeight = value;
}
}
return CGSizeMake(0, maxHeight+self.defaultEdgeInsets.bottom);
}
到此,瀑布流的效果就出來了.
但是可以想到,這樣來搭建布局,瀑布流的列數(shù),cell與cell之間的間距以及邊緣距就固定了,顯然這是不夠靈活的.我們應(yīng)該要把這些參數(shù)拋給使用該布局的類去決定,這樣才是一個通用的代碼.
來到布局類.h 文件中,添加協(xié)議以及代理
@class WaterFlowLayout;
@protocol WaterFlowLayoutDelegate <NSObject>
@required
//決定cell的高度,必須實(shí)現(xiàn)方法
- (CGFloat)waterFlowLayout:(WaterFlowLayout *)waterFlowLayout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width;
@optional
//決定cell的列數(shù)
- (NSInteger)cloumnCountInWaterFlowLayout:(WaterFlowLayout *)waterFlowLayout;
//決定cell 的列的距離
- (CGFloat)columMarginInWaterFlowLayout:(WaterFlowLayout *)waterFlowLayout;
//決定cell 的行的距離
- (CGFloat)rowMarginInWaterFlowLayout:(WaterFlowLayout *)waterFlowLayout;
//決定cell 的邊緣距
- (UIEdgeInsets)edgeInsetInWaterFlowLayout:(WaterFlowLayout *)waterFlowLayout;
@end
@interface WaterFlowLayout : UICollectionViewLayout
/**代理*/
@property (nonatomic,assign) id <WaterFlowLayoutDelegate>delegate;
- (NSInteger)columCount;
- (CGFloat)columMargin;
- (CGFloat)rowMargin;
- (UIEdgeInsets)defaultEdgeInsets;
@end
回到布局類.m文件中,實(shí)現(xiàn)聲明的方法.在這里需要明確,外部必須通過實(shí)現(xiàn)代理給定cell的高度.另外,如果外部通過實(shí)現(xiàn)代理給定列數(shù)、列間距、行間距、邊緣距就用給定的岳掐，否則使用默認(rèn)的列數(shù)鉴竭、列間距碱鳞、行間距悼沈、邊緣距.
- (NSInteger)columCount{
if ([self.delegate respondsToSelector:@selector(cloumnCountInWaterFlowLayout:)]) {
return [self.delegate cloumnCountInWaterFlowLayout:self];
}
else{
return columCount;
}
}
- (CGFloat)columMargin{
if ([self.delegate respondsToSelector:@selector(columMarginInWaterFlowLayout:)]) {
return [self.delegate columMarginInWaterFlowLayout:self];
}
else{
return columMargin;
}
}
- (CGFloat)rowMargin{
if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
return [self.delegate rowMarginInWaterFlowLayout:self];
}
else{
return rowMargin;
}
}
- (UIEdgeInsets)defaultEdgeInsets{
if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
return [self.delegate edgeInsetInWaterFlowLayout:self];
}
else{
return defaultEdgeInsets;
}
}
到此,CollectionView瀑布流框架搭建完成了!!
