放圖規(guī)則: 尋找最短邊
數(shù)組保存每一列的高度, 已做為尋找最短邊
設(shè)置公用屬性
1 按鈕的size
2. 列數(shù)
3. 列間隔
4. 邊間距
//Item的size
@property (nonatomic, assign) CGSize itemSize;
//列數(shù)
@property (nonatomic, assign) NSUInteger numberOfColumns;
//列間隔
@property (nonatomic, assign) CGFloat insertItemOfSpacing;
//邊間距
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
//代理
@property (nonatomic, weak) id<WaterLayoutDelegate>delegate;
設(shè)置獲取某個(gè)Item的代理方法
- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath;
設(shè)置一些存儲(chǔ)數(shù)組
1. 所有列的高度
2. 所有Item的frame
3. Item數(shù)量(NSInteger)
@property (nonatomic, strong) NSMutableArray *columsHeights;
@property (nonatomic, strong) NSMutableArray *itemAttr;
@property (nonatomic, assign) NSInteger numberOfItems;
實(shí)現(xiàn)方法
1. 求最短列的序號(hào)
#pragma mark 求最短列的列號(hào)
- (NSInteger)calcShortheight {
//MAXFLOAT: 代表最大float值
CGFloat shortestHeight = MAXFLOAT;
NSInteger shortestIndex = 0;
//遍歷列數(shù)
for (int i = 0; i < self.numberOfColumns; i++) {
//獲取當(dāng)前列的高度 -- 數(shù)組中只能保存對(duì)象
CGFloat height = [self.columsHeights[i] floatValue];
//對(duì)比高度
if (shortestHeight > height) {
shortestHeight = height;
shortestIndex = i;
}
}
//返回高度最小的下標(biāo)
return shortestIndex;
}
2. 求列中高度最高的列號(hào)
#pragma mark 求列中高度最高的列號(hào)
- (NSInteger)calcLongestHeight {
CGFloat maxHeight = 0;
NSInteger longestIndex = 0;
for (int i = 0; i < self.numberOfColumns; i++) {
CGFloat height = [self.columsHeights[i] floatValue];
if (maxHeight < height) {
maxHeight = height;
longestIndex = i;
}
}
return longestIndex;
}
3. 初始化數(shù)據(jù)
初始化數(shù)組之類的. 同時(shí)初始化列高度
for (int i = 0; i < self.numberOfColumns; i++) {
//利用字面量的方式將普通數(shù)據(jù)類型的變量類型轉(zhuǎn)換能NSNumber對(duì)象并存儲(chǔ)
[self.columsHeights addObject:@(self.sectionInsets.top)];
}
4. 重寫perpareLayout(每個(gè)Item會(huì)調(diào)用)
4.1 調(diào)用父類的perpareLayout
[super prepareLayout];
4.2 調(diào)用數(shù)據(jù)初始化方法
[self initAllArray];
4.3 獲取collectionView總所有的item
self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
4.4 對(duì)item進(jìn)行布局, 利用for循環(huán)遍歷Item數(shù)組
計(jì)算最短列的長(zhǎng)度
//獲取當(dāng)前最短列列號(hào)
NSInteger shortestIndex = [self calcShortheight];
//計(jì)算Item的Y值(最短列高加間距)
CGFloat itemY = [self.columsHeights[shortestIndex] floatValue] + self.insertItemOfSpacing;
//計(jì)算Item的X值
//邊距+(item寬+間隔)*列序號(hào)
CGFloat itemX = self.sectionInsets.left + (self.itemSize.width + self.insertItemOfSpacing) * shortestIndex;
//獲取item的高度
CGFloat itemHeight = 0;
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//使用代理方法計(jì)算item的高度
if (self.delegate && [self.delegate respondsToSelector:@selector(heightOfItemIndexPath:)]) {
//利用代理獲取Item的高度
itemHeight = [self.delegate heightOfItemIndexPath:indexPath];
重新布局item
//獲取當(dāng)前Item的布局屬性
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = CGRectMake(itemX, itemY, self.itemSize.width, itemHeight);
[self.itemAttr addObject:attr];
//更新列的高度
self.columsHeights[shortestIndex] = @(itemY + itemHeight);
5. 返回整個(gè)布局的contentSize(可滾動(dòng)區(qū)域),
即重寫方法collectionViewContentSize
5.1 計(jì)算最高列的高度
//求最高列列號(hào)
NSInteger longestIndex = [self calcLongestHeight];
//計(jì)算contentSize的高度
//最高列的高度+底部間距
CGFloat contentHeight = [self.columsHeights[longestIndex] floatValue] + self.sectionInsets.bottom;
5.2 重新設(shè)置可滾動(dòng)區(qū)域
CGSize contentSize = self.collectionView.bounds.size;
contentSize.height = contentHeight;
//返回新的可滾動(dòng)區(qū)域
return contentSize;
6. 返回所有Item的布局屬性,重寫layoutAttributesForElementsInRect
返回新的item布局?jǐn)?shù)組
return self.itemAttr;
使用
在ViewController中初始化屬性, 設(shè)置代理, 實(shí)現(xiàn)代理方法
- (WaterLayout *)getWaterLayout {
WaterLayout *layout = [[WaterLayout alloc] init];
//設(shè)置列數(shù)
layout.numberOfColumns = 3;
//設(shè)置邊距
layout.sectionInsets = UIEdgeInsetsMake(50, 10, 50, 10);
//設(shè)置間距
layout.insertItemOfSpacing = 10;
//設(shè)置item大小
CGFloat width = [UIScreen mainScreen].bounds.size.width;
layout.itemSize = CGSizeMake((width - 40)/3, 100);
layout.delegate = self;
return layout;
}
#pragma mark 實(shí)現(xiàn)瀑布流的協(xié)議方法
- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath{
CGFloat width = [UIScreen mainScreen].bounds.size.width;
//每個(gè)Item的寬度
CGFloat subWidth = (width - 40) / 3;
//求每個(gè)Item的高度
NSDictionary *dict = self.dataArray[indexPath.row];
CGFloat imageWidth = [dict[@"width"] floatValue];
CGFloat imageHeight = [dict[@"height"] floatValue];
return imageHeight/imageWidth * subWidth;
}
