一神年、開(kāi)篇
1.瀑布流設(shè)計(jì)討論
1.應(yīng)用場(chǎng)景：在我們app開(kāi)發(fā)中，瀑布流一般應(yīng)用于大數(shù)據(jù)展示時(shí)知给，比如淘寶搜索頁(yè)面、蘑菇街app描姚、各大直播app主播列表頁(yè)面等等涩赢。
2.設(shè)計(jì)思路：我們首要考慮UICollectionView,因?yàn)閁ICollectionView特殊性和可復(fù)用性。因?yàn)槠俨剂髅總€(gè)格子item大小不同轩勘，需要計(jì)算每個(gè)item的寬高筒扒，就需要自定義UICollectionViewLayout。
2.瀑布流分類
我把瀑布流分為兩種：垂直瀑布流绊寻、水平瀑布流花墩。
1.垂直瀑布流：在我們app上實(shí)現(xiàn)的瀑布流一般是垂直瀑布流，也就是列數(shù)可設(shè)定澄步，item寬度由列數(shù)決定观游，從上往下布局。
2.水平瀑布流：我在搜索網(wǎng)頁(yè)百度圖片時(shí)驮俗，看到百度圖片的布局從而想到的一種布局方式。每行的高度是可設(shè)定的允跑，item高度由圖片大小決定王凑，比例縮放。
3.瀑布流樣式展示
垂直瀑布.jpeg
水平瀑布.jpeg
二聋丝、具體實(shí)現(xiàn)
1.創(chuàng)建一個(gè)UICollectionViewCell索烹，它上面只有一個(gè)imageView。
// CollectionViewCell.m
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_imageView = [[UIImageView alloc] init];
_imageView.frame = self.bounds;
[self addSubview:_imageView];
}
return self;
}
2.我們需要自定義一個(gè)layout弱睦，并且暴露一些可設(shè)置的屬性用來(lái)控制瀑布流的對(duì)應(yīng)展示百姓，讓瀑布流可用性更強(qiáng)大一些。
2.1 頭文件：DYTWaterflowLayout.h
@interface DYTWaterflowLayout : UICollectionViewLayout
/**
* 行高(水平瀑布流時(shí)),默認(rèn)為100
*/
@property (nonatomic, assign) CGFloat rowHeight;
/**
* 單元格寬度(垂直瀑布流時(shí))
*/
@property (nonatomic, assign, readonly) CGFloat itemWidth;
/**
* 列數(shù) : 默認(rèn)為3
*/
@property (nonatomic, assign) NSInteger numberOfColumns;
/**
* 內(nèi)邊距 : 每一列之間的間距 (top, left, bottom, right)默認(rèn)為{10, 10, 10, 10};
*/
@property (nonatomic, assign) UIEdgeInsets insets;
/**
* 每一行之間的間距 : 默認(rèn)為10
*/
@property (nonatomic, assign) CGFloat rowGap;
/**
* 每一列之間的間距 : 默認(rèn)為10
*/
@property (nonatomic, assign) CGFloat columnGap;
/**
* 高度數(shù)組 : 存儲(chǔ)所有item的高度
*/
@property (nonatomic, strong) NSArray *itemHeights;
/**
* 寬度數(shù)組 : 存儲(chǔ)所有item的寬度
*/
@property (nonatomic, strong) NSArray *itemWidths;
/**
* 瀑布流類型 : 分為水平瀑布流 和 垂直瀑布流
*/
@property (nonatomic, assign) DirectionType type;
@end
2.2 .m文件：DYTWaterflowLayout.m屬性聲明
@interface DYTWaterflowLayout()
@property (nonatomic, strong) NSMutableArray *itemAttributes; // 存放每個(gè)cell的布局屬性
// 垂直瀑布流相關(guān)屬性
@property (nonatomic, strong) NSMutableArray *columnsHeights; // 每一列的高度(count=多少列)
@property (nonatomic, assign) CGFloat maxHeight; // 最長(zhǎng)列的高度(最大高度)
@property (nonatomic, assign) CGFloat minHeight; // 最短列的高度(最低高度)
@property (nonatomic, assign) NSInteger minIndex; // 最短列的下標(biāo)
@property (nonatomic, assign) NSInteger maxIndex; // 最長(zhǎng)列的下標(biāo)
// 水平瀑布流相關(guān)屬性
@property (nonatomic, strong) NSMutableArray *columnsWidths; // 每一行的寬度(count不確定)
@property (nonatomic, assign) NSInteger tempItemX; // 臨時(shí)x : 用來(lái)計(jì)算每個(gè)cell的x值
@property (nonatomic, assign) NSInteger maxRowIndex; //最大行
@end
2.3 .m文件：DYTWaterflowLayout.m主要方法實(shí)現(xiàn)
//
#pragma mark -- 系統(tǒng)內(nèi)部方法
/**
* 重寫父類布局
*/
- (void)prepareLayout {
[super prepareLayout];
// (水平瀑布流時(shí))重置最大行
if ((self.type == HorizontalType)) {
self.maxRowIndex = 0;
}
if (self.type == VerticalType) {
// (垂直瀑布流時(shí))重置每一列的高度
[self.columnsHeights removeAllObjects];
for (NSUInteger i = 0; i < self.numberOfColumns; i++) {
[self.columnsHeights addObject:@(self.insets.top)];
}
}
// 計(jì)算所有cell的布局屬性
[self.itemAttributes removeAllObjects];
NSUInteger itemCount = [self.collectionView numberOfItemsInSection:0];
self.tempItemX = self.insets.left;
for (NSUInteger i = 0; i < itemCount; ++i) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
if (self.type == VerticalType) {
[self setVerticalFrame:indexPath];
}else if ((self.type == HorizontalType)){
[self setHorizontalFrame:indexPath];
}
}
}
/**
* 水平瀑布：設(shè)置每一個(gè)attrs的frame况木，并加入數(shù)組中
*/
- (void)setHorizontalFrame:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat w = [self.itemWidths[indexPath.item] floatValue];
CGFloat width = w + self.columnGap;
CGFloat h = (self.rowHeight == 0) ? 100 : self.rowHeight;
/**
* 如果當(dāng)前的x值+當(dāng)前cell的寬度 超出了 屏幕寬度垒拢，那么就要換行了。
* 換行操作 : 最大行+1火惊，tempItemX重置為10(self.insets.left)求类。
*/
if (self.tempItemX + w > [UIScreen mainScreen].bounds.size.width) {
self.maxRowIndex++;
self.tempItemX = self.insets.left;
}
CGFloat x = self.tempItemX;
CGFloat y = self.insets.top + self.maxRowIndex * (h + self.rowGap);
attrs.frame = CGRectMake(x, y, w, h);
/**
* 注：1.cell的寬度和高度算起來(lái)比較簡(jiǎn)單 : 寬度由外部傳進(jìn)來(lái)，高度固定為rowHeight(默認(rèn)為100)屹耐。
* 2.cell的x : 通過(guò)tempItemX算好了尸疆。
* 3.cell的y : minHeight最短列的高度，也就是最低高度，作為當(dāng)前cell的起始y寿弱，當(dāng)然要加上行之間的間隙犯眠。
*/
NSLog(@"%@",NSStringFromCGRect(attrs.frame));
[self.itemAttributes addObject:attrs];
self.tempItemX += width;
}
/**
* 垂直瀑布：設(shè)置每一個(gè)attrs的frame，并加入數(shù)組中
*/
- (void)setVerticalFrame:(NSIndexPath *)indexPath {
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// cell的frame
CGFloat w = self.itemWidth;
CGFloat h = [self.itemHeights[indexPath.item] floatValue];
CGFloat x = self.insets.left + self.minIndex * (w + self.columnGap);
CGFloat y = self.minHeight + self.rowGap;
attrs.frame = CGRectMake(x, y, w, h);
/**
* 注：1.cell的寬度和高度算起來(lái)比較簡(jiǎn)單 : 寬度固定(itemWidth已經(jīng)算好)症革，高度由外部傳進(jìn)來(lái)
* 2.cell的x : minIndex最短列作為當(dāng)前列筐咧。
* 3.cell的y : minHeight最短列的高度，也就是最低高度地沮，作為當(dāng)前cell的起始y嗜浮，當(dāng)然要加上行之間的間隙。
*/
// 更新數(shù)組中的最大高度
self.columnsHeights[self.minIndex] = @(CGRectGetMaxY(attrs.frame));
NSLog(@"%@",NSStringFromCGRect(attrs.frame));
[self.itemAttributes addObject:attrs];
}
/**
* 返回collectionView的尺寸
*/
- (CGSize)collectionViewContentSize {
CGFloat height;
if (self.type == HorizontalType) {
CGFloat rowHeight = (self.rowHeight == 0) ? 100 : self.rowHeight;
height = self.insets.top + (self.maxRowIndex+1) * (rowHeight + self.rowGap);
}else {
height = self.maxHeight;
}
return CGSizeMake(self.collectionView.frame.size.width, height);
}
/**
* 所有元素（比如cell摩疑、補(bǔ)充控件危融、裝飾控件）的布局屬性
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.itemAttributes;
}
3.1 直接在控制器里使用
// 設(shè)置布局
DYTWaterflowLayout *layout = [[DYTWaterflowLayout alloc]init];
layout.type = _type;
// 設(shè)置相關(guān)屬性(不設(shè)置的話也行，都有相關(guān)默認(rèn)配置)
layout.numberOfColumns = 3;
layout.columnGap = 10;
layout.rowGap = 10;
layout.insets = UIEdgeInsetsMake(10, 10, 10, 10);
layout.rowHeight = 100;
self.collectionView.collectionViewLayout = self.waterflowLayout = layout;
3.2 (舉例)垂直瀑布流時(shí)雷袋，SDWebImage獲取圖片block里的具體實(shí)現(xiàn)
if (weakSelf.heights.count < weakSelf.allImageUrls.count) {
// 根據(jù)圖片原始比例 計(jì)算 當(dāng)前圖片的高度(寬度固定)
CGFloat scale = image.size.height / image.size.width;
CGFloat width = weakSelf.waterflowLayout.itemWidth;
CGFloat height = width * scale;
NSNumber *heightNum = [NSNumber numberWithFloat:height];
[weakSelf.heights addObject:heightNum];
}
if (weakSelf.heights.count == weakSelf.allImageUrls.count) {
// 賦值所有cell的高度數(shù)組itemHeights
weakSelf.waterflowLayout.itemHeights = weakSelf.heights;
[weakSelf.collectionView reloadData];
}
3.3 UICollectionViewDataSource中要注意的點(diǎn)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
cell.imageView.image = self.picImageArr[indexPath.item];
// 注：非常關(guān)鍵的一句吉殃，由于cell的復(fù)用，imageView的frame可能和cell對(duì)不上楷怒，需要重新設(shè)置蛋勺。
cell.imageView.frame = cell.bounds;
cell.backgroundColor = [UIColor orangeColor];
return cell;
}
三、總結(jié)
1.瀑布流使用場(chǎng)景比較廣泛鸠删，也是常用的技術(shù)之一抱完，我也是又回顧了一遍，并且總結(jié)了整體的思路決定分享出來(lái)刃泡，結(jié)尾有demo巧娱，童鞋們可以自行下載。另外我參考的資料鏈接也會(huì)貼出烘贴，供大家研究比對(duì)禁添。
2.水平瀑布流還沒(méi)達(dá)到百度圖片搜索的那種效果，右邊距離屏幕間隙太大了桨踪，所以影響美觀老翘。后續(xù)會(huì)繼續(xù)研究，期待有所突破锻离。
3.有種情況是后臺(tái)直接給圖片的所有數(shù)據(jù)給我們铺峭，包括url、圖片寬高等等纳账，其實(shí)這樣就是后臺(tái)已經(jīng)做好了圖片的順序優(yōu)化處理逛薇。不過(guò)我們可以自己研究一下這個(gè)排序思路。如何達(dá)到右邊間隙幾乎相同疏虫，比如都為10永罚。
4.當(dāng)然有疑惑的地方可以留言或者直接私信我啤呼，我們可以一起討論。
四呢袱、總結(jié)最終實(shí)現(xiàn)效果:
瀑布流.gif
本文章demo：
瀑布流Demo
參考相關(guān)文章：
iOS--瀑布流的實(shí)現(xiàn) -- 作者Go_Spec
iOS 瀑布流基本實(shí)現(xiàn) -- 作者iOS_成才錄
額官扣。。羞福。如果想知道圖片里的小姐姐是誰(shuí)惕蹄，請(qǐng)直接在文章下面留言。因?yàn)槲蚁霑簳r(shí)留點(diǎn)懸念給大家治专。(皮一下就很開(kāi)心??)
