規(guī)則流水布局
1.首先自定義布局繼承于流水布局.
在流水布局的基礎(chǔ)上進(jìn)行布局的重新設(shè)置
2.重寫布局中的方法, 讓每個(gè)Item根據(jù)自己想要尺寸進(jìn)行對(duì)應(yīng)設(shè)置.
3.設(shè)置contentSize,設(shè)置滾動(dòng)區(qū)域
// 1.對(duì)每一個(gè)Item進(jìn)行布局
- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
// [self.layoutAtts removeAllObjects];
// 如果只是在原基礎(chǔ)上進(jìn)行修改译柏，則調(diào)用
// NSArray *layoutAtts = [super layoutAttributesForElementsInRect:rect];
// 返回 cell的個(gè)數(shù)哈误，進(jìn)行一個(gè)個(gè)重新布局
NSInteger count = [self.collectionView numberOfItemsInSection:0];
CGFloat W = self.collectionView.frame.size.width * 0.5;
CGFloat H = 0;
CGFloat Y = 0;
CGFloat X = 0;
for (int i = 0; i < count ; i ++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
if (i == 0) {
H = W;
X = 0;
Y = 0;
}else if (i == 1){
H = W * 0.5;
X = W;
Y = 0;
}else if (i == 2){
H = W * 0.5;
X = W;
Y = W * 0.5;
}else if (i == 3){
H = W * 0.5;
X = 0;
Y = W;
}else if (i == 4){
H = W * 0.5;
X = 0;
Y = H *3;
}else if (i == 5){
H = W;
Y = W;
X = W;
}else{
// 取出 上一輪的 嗜闻，進(jìn)行改變盲再，然后再 在 原來值的基礎(chǔ)上的Y值進(jìn)行修改胁镐，得到新的Y值闽寡，再進(jìn)行賦值賦值
UICollectionViewLayoutAttributes *lastLayoutAtt = self.layoutAtts[i - 6];
CGRect lastFrame = lastLayoutAtt.frame;
H = lastFrame.size.height;
Y = lastFrame.origin.y + 2 * W;
X = lastFrame.origin.x;
}
layoutAtt.frame = CGRectMake(X, Y, W, H);
[self.layoutAtts addObject:layoutAtt];
}
// UICollectionViewLayoutAttributes *layoutAtt = (UICollectionViewLayoutAttributes *) self.layoutAtts.lastObject;
// self.collectionView.contentSize = CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));
return self.layoutAtts;
}
// 2.設(shè)置滾動(dòng)區(qū)域ContentSize
// 布局 必須寫到 get方法中吠冤，是屬于 系統(tǒng)自調(diào)的方法电谣。
- (CGSize)collectionViewContentSize
{
// NSLog(@"%zd",self.layoutAtts.count);
// NSInteger rows = (self.layoutAtts.count + 2) / 3;
// 根據(jù)最后一個(gè)Itme來決定滾動(dòng)區(qū)域
UICollectionViewLayoutAttributes *layoutAtt = (UICollectionViewLayoutAttributes *) self.layoutAtts.lastObject;
// return CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));
if (layoutAtt.frame.origin.x == 0){
return CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));
}else{
return CGSizeMake(self.collectionView.frame.size.width, (CGRectGetMaxY(layoutAtt.frame) + layoutAtt.size.height));
}
// CGFloat cellH = self.collectionView.frame.size.width * 0.5;
//
// return CGSizeMake(self.collectionView.frame.size.width, cellH * rows);
}
不規(guī)則布局
圖形實(shí)例, 除第一行以外,所有的Item都是現(xiàn)排在最短的一列中.
所以我們需要做的是:
1.自定義布局由于修改部分較多,所以不必繼承于流水布局,可以自己設(shè)置布局元素
2.重寫對(duì)每個(gè)Item的布局
2.1.建立數(shù)組用于保存每一列現(xiàn)有的高度
2.2. 求出最小的高度,最為下一個(gè)item的初始高度, 當(dāng)Item寫入,更新當(dāng)前列的高度.
- 計(jì)算滾動(dòng)區(qū)域,最長(zhǎng)列決定
//.h文件
@class LXLWaterFlowLayout;
// 設(shè)置代理
@protocol LXLWaterFlowLayoutDelegate<NSObject>
@required
- (CGFloat)waterFlowLayout:(LXLWaterFlowLayout *)waterFlowLayout indexPath:(NSIndexPath *)indexPath withWidth:(CGFloat)width;
@end
@interface LXLWaterFlowLayout : UICollectionViewLayout
// 提供方法秽梅，供外界調(diào)用
- (void)setHorzontalMargin:(CGFloat) horizontalMargin;
- (void)setVerticalMargin:(CGFloat) verticalMargin;
- (void)setMaxColumns:(NSInteger) maxColumns;
- (void)setInserts:(UIEdgeInsets) inserts;
// 設(shè)置代理，用于從外界拿到高度
@property(nonatomic,weak) id<LXLWaterFlowLayoutDelegate> delegate;
// .m文件
@interface LXLWaterFlowLayout ()
// 添加成員變量
{
// 用來設(shè)置水平間距
CGFloat _horizontalMargin ;
// 用來設(shè)置豎直間距
CGFloat _verticalMargin ;
// 最大的列數(shù)
NSInteger _maxColumns ;
// 每個(gè)item的四邊劇
UIEdgeInsets _insets;
}
// 加入相關(guān)屬性
// 保存每一列的高度
@property (strong, nonatomic) NSMutableArray *perColumnMaxHeights;
// 保存所有元素的相關(guān)屬性
@property (strong, nonatomic) NSMutableArray *layoutAtts;
@end
@implementation LXLWaterFlowLayout
- (instancetype)init
{
if (self = [super init]) {
// 當(dāng)外界沒有數(shù)據(jù)則按初始化數(shù)據(jù)執(zhí)行
_maxColumns = 3;
_horizontalMargin = 10;
_verticalMargin = 10;
_insets = UIEdgeInsetsMake(0, 0, 0, 0);
}
return self;
}
- (NSMutableArray *)layoutAtts
{
if (!_layoutAtts) {
_layoutAtts = [NSMutableArray array];
}
return _layoutAtts;
}
- (NSMutableArray *)perColumnMaxHeights
{
if (!_perColumnMaxHeights) {
_perColumnMaxHeights = [NSMutableArray array];
}
return _perColumnMaxHeights;
}
// 因?yàn)樵?“l(fā)ayoutAttributesForElementsInRect”可能調(diào)用多次剿牺，計(jì)算多次风纠， 而導(dǎo)致每次的隨機(jī)數(shù)，都不一樣牢贸， 而造成覆蓋現(xiàn)象
// 所以在 預(yù)布局中處理竹观， 可以只計(jì)算一次
- (void)prepareLayout
{
[self.perColumnMaxHeights removeAllObjects];
[self.layoutAtts removeAllObjects];
NSInteger count = [self.collectionView numberOfItemsInSection:0];
// 初始化數(shù)組高度,因?yàn)榈谝恍?不需要按照高度大小添加
for (int i = 0; i < _maxColumns; i ++) {
[self.perColumnMaxHeights addObject:@(_insets.top)];
}
CGFloat W = (self.collectionView.frame.size.width - _insets.left - _insets.right - (_maxColumns - 1) * _horizontalMargin ) / _maxColumns;
CGFloat H ;
CGFloat X,Y;
for (int i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// 求出高度最小的列， 計(jì)算出 Y值
Y = [self.perColumnMaxHeights[[self minColumn]] floatValue]+ _verticalMargin;
// 計(jì)算出 X 值
X = _insets.left +[self minColumn] * (W + _horizontalMargin) ;
// 通過代理計(jì)算出 高度
if ([self.delegate respondsToSelector:@selector(waterFlowLayout:indexPath:withWidth:)]) {
H = [self.delegate waterFlowLayout:self indexPath:indexPath withWidth:W];
}else{
H = 70 + arc4random_uniform(100);
}
// 將新算出來的高度，替換 原來數(shù)組中對(duì)應(yīng)的最低高度位置
[self.perColumnMaxHeights replaceObjectAtIndex:[self minColumn] withObject:@(Y + H)];
layoutAtt.frame = CGRectMake(X, Y, W, H);
[self.layoutAtts addObject:layoutAtt];
}
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.layoutAtts;
}
// 計(jì)算最小高度的列
- (NSInteger)minColumn
{
NSInteger minColumn = 0;
CGFloat minHeight = [self.perColumnMaxHeights[0] floatValue];
for (int i = 1; i < self.perColumnMaxHeights.count; i ++) {
CGFloat height = [self.perColumnMaxHeights[i] floatValue];
if (height < minHeight) {
minHeight = height;
minColumn = i;
}
}
return minColumn;
}
// 計(jì)算最大高度的列 臭增，（用在設(shè)置 contensize）
- (NSInteger)maxColumn
{
NSInteger maxColumn = 0;
CGFloat maxHeight = [self.perColumnMaxHeights[0] floatValue];
for (int i = 1; i < self.perColumnMaxHeights.count; i ++) {
CGFloat height = [self.perColumnMaxHeights[i] floatValue];
if (height > maxHeight) {
maxHeight = height;
maxColumn = i;
}
}
return maxColumn;
}
- (CGSize)collectionViewContentSize
{
if (self.perColumnMaxHeights.count == 0) {
return CGSizeZero;
}
return CGSizeMake(self.collectionView.bounds.size.width, [self.perColumnMaxHeights[[self maxColumn]] floatValue] + _insets.bottom);
}
- (void)setHorzontalMargin:(CGFloat)horizontalMargin
{
_horizontalMargin = horizontalMargin;
}
- (void)setVerticalMargin:(CGFloat)verticalMargin
{
_verticalMargin = verticalMargin;
}
- (void)setMaxColumns:(NSInteger)maxColumns
{
if (maxColumns == 0) {
return;
}
_maxColumns = maxColumns;
}
-(void)setInserts:(UIEdgeInsets)inserts
{
_insets = inserts;
}
不規(guī)則布局.gif
