iOS 瀑布流布局實現詳解

2021-09-24 08:50:13 字數 2425 閱讀 1481

新建檔案繼承自uicollectionviewlayout .h內容如下:

@class waterflowlayout;

@protocol waterflowlayoutdelegate //使用delegate取得每乙個cell的高度

- (cgfloat)waterflow:(waterflowlayout *)layout heightforcellatindexpath:(nsindexpath *)indexpath;

@end

@inte***ce waterflowlayout : uicollectionviewlayout

//宣告協議

@property (nonatomic, weak) id delegate;

//確定列數

@property (nonatomic, assign) nsinteger colum;

//確定內邊距

@property (nonatomic, assign) uiedgeinsets insetspace;

//確定每個cell之間的距離

@property (nonatomic, assign) nsinteger distance;

@end

複製**

.m實現內容如下:

@inte***ce waterflowlayout ()

//儲存列高的陣列

@property (nonatomic, strong) nsmutablearray *columheightarr;

//儲存所有cell的尺寸資訊

@property (nonatomic, strong) nsmutablearray *cellframearr;

@end

@implementation waterflowlayout

//colum的set方法

- (void)setcolum:(nsinteger)colum

}//distance的set方法

- (void)setdistance:(nsinteger)distance

}//insetspace的set方法

- (void)setinsetspace:(uiedgeinsets)insetspace

}//自定義layout需要重寫下面的幾個方法

//準備布局,將item的位置資訊計算出來

- (void)preparelayout

//將位置資訊和高度資訊的陣列例項化

- (void)initdataarray

//初始化每一列的初始高度

- (void)initcolumheightarray

}//初始化計算出全部cell的高度,並且存入陣列

- (void)initallcellheight

//整理cell的尺寸資訊

cgrect frame = cgrectmake(xoffset, yoffset, width, height);

//attributes是用來儲存當前indexpath的cell的位置資訊的

uicollectionviewlayoutattributes *attributes = [uicollectionviewlayoutattributes layoutattributesforcellwithindexpath:indexpath];

attributes.frame = frame;

//將位置資訊新增到cell尺寸陣列中

[_cellframearr addobject:attributes];

//改變當前列的高度

_columheightarr[currentcolum] = @(frame.size.height + frame.origin.y);

}}//取得當前cell的尺寸

-(uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath

//根據rect去找出需要布局的cell的位置資訊

- (nsarray*)layoutattributesforelementsinrect:(cgrect)rect

}return temp;

}//指定collection的contentsize

- (cgsize)collectionviewcontentsize

- (cgfloat)getlongcolum

}];return longheight + _insetspace.bottom;

}//取得最短的列

- (nsinteger)getshortcolum

}];return currentcolum;

}@end

複製**

附:我的部落格位址

實現瀑布流布局

瀑布流,又稱瀑布流式布局。是比較流行的一種 頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷載入資料塊並附加至當前尾部,瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度,父容器相對定位,成員絕對定位,利用to...

瀑布流布局

最近在看瀑布流布局,覺得很神奇,每個模組都可以找到自己應該在的地方,各列齊頭並進,給人一種很high的感覺。一開始自己也想了思路 模組1,模組2,裡面模組float left。結果試了一下,悲劇啊,不同高度的直接就掛了,布局亂了。等高的還可以。然後我又想分類,就是規定幾列,分別把模組順序載入在各個c...

瀑布流布局

很早以前我就想自己學寫一下瀑布流布局,可是由於懶神來找我聊天咯,所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間,所以我是先看咯一下那些大神的具體講解和分析,然後才開始著手寫的,收穫那是槓槓的。1 大家都知道要想實現瀑布流,就必須規定每乙個區塊的寬度要一致 2 確定每一排...