前言
平時沒事也喜歡逛一些技術(shù)網(wǎng)站，而瀑布流因為其炫酷的視覺效果（其實就是模仿）和樣式使其成為ios當中比較火熱的一種技術(shù)来吩。
在最近的一個項目中弟疆，生活也對我這個菜鳥下了毒手盗冷，要求實現(xiàn)瀑布流（WTF。柑司。锅劝。）吐槽歸吐槽但是效果還是得做出來故爵。。劲室。
現(xiàn)在我來介紹一下我的實現(xiàn)思路（其實是參考網(wǎng)上案例??）
初步接觸UICollectionView的小伙伴們肯定都知道蘋果官方為我們封裝好的UICollectionViewFlowLayout痹籍，在很多情況下我們使用UICollectionViewFlowLayout就可以實現(xiàn)需求了晦鞋。
下面的列子簡單實用UICollectionViewFlowLayout實現(xiàn)效果
//設(shè)置流水布局
UICollectionViewFlowLayout *layout = ({
//設(shè)置流水布局
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init] ;
layout.itemSize = CGSizeMake(itemWH, itemWH) ;
layout.minimumInteritemSpacing = margin; // 最小間距
layout.minimumLineSpacing = margin; //最小行距
layout ;
}) ;
//創(chuàng)建CollectionView
UICollectionView *collocetView = ({
//創(chuàng)建CollectionView
UICollectionView *collocetView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 10, kScreenW, 450) collectionViewLayout:layout] ;
collocetView.backgroundColor= [UIColor whiteColor ];
//設(shè)置數(shù)據(jù)源和代理
collocetView.delegate = self ;
collocetView.dataSource = self ;
collocetView.alwaysBounceHorizontal = YES;
self.collectionView = collocetView ;
//注冊cell 一定要做
[collocetView registerClass:[SWCollectionViewCell class] forCellWithReuseIdentifier:itemID] ;
collocetView ;
});
//注冊頭部
[self.collectionView registerClass:[SWCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:heardID] ;
//注冊尾部
[self.collectionView registerClass:[SWCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:heardID];
這里得強調(diào)一下UICollectionView的cell和頭尾試圖通常都是注冊實現(xiàn)的。娜谊。纱皆。近迁。
二. 瀑布流的實現(xiàn)思路：
控件選擇：現(xiàn)在實現(xiàn)瀑布流主流的思路是用UICollectionView來實現(xiàn)鉴竭，優(yōu)點不言而喻搏存，因為其豐富的API和類似tableView的復用機制等 矢洲。。蛆橡【蚱可能也有人用srollView實現(xiàn)（我不會葱轩，，垃喊，唉～）袜炕。
因為官方的UICollectionViewFlowLayout是繼承自UICollectionViewLayout偎窘，所以我們也可以參照官方的實現(xiàn)瀑布流效果
現(xiàn)在我們需要指定滾動方向溜在、默認列數(shù)掖肋、行間距志笼、列間距、以及指定cell的寬度itemWidth還需要通過方法計算高度
import "SWWaterFallLayout.h"
@class SWWaterFallLayout ;
//1.定義協(xié)議
@protocol SWWaterFallLayoutDelegate<NSObject>
//必須實現(xiàn)的方法
@required
/**
每一列的寬度
*/
- (CGFloat)waterFallLayout:(SWWaterFallLayout *)waterFallLayout heightForItemAtIndexPath:(NSUInteger)indexPath itemWidth:(CGFloat)itemWidth ;
//可選
@optional
/**
一共有多少列
*/
-(NSInteger)columnCountWaterFallLayout:(SWWaterFallLayout *)waterFallLayout ;
/**
每一列的間距
*/
-(CGFloat)columnMarginWaterFallLayout:(SWWaterFallLayout *)waterFallLayout ;
/**
每一行的間距
*/
-(CGFloat)rowMarginWaterFallLayout:(SWWaterFallLayout *)waterFallLayout ;
/**
每一個Item的內(nèi)間距
*/
-(UIEdgeInsets)edgeInsetsInWaterFallLayout:(SWWaterFallLayout *)waterFallLayout ;
@end
@interface SWWaterFallLayout : UICollectionViewLayout
- (NSUInteger)colunmCount;
- (CGFloat)columnMargin;
- (CGFloat)rowMargin;
- (UIEdgeInsets)edgeInsets;
//2.聲明代理屬性
@property(nonatomic,weak) id<SWWaterFallLayoutDelegate> delegate ;
- 可以提供一個數(shù)組attrsArr存放所有的布局屬性,columnHeights存放所有列的當前高度
import "SWWaterFallLayout.h"
/** 默認的列數(shù) */
static const CGFloat SWDefaultColunmCount = 3;
/** 每一列之間的間距 */
static const CGFloat SWDefaultColunmMargin = 10;
/** 每一行之間的間距 */
static const CGFloat SWDefaultRowMargin = 10;
/** 內(nèi)邊距 */
static const UIEdgeInsets SWDefaultEdgeInsets = {10,10,10,10};
@interface SWWaterFallLayout ()
/** 存放所有的布局屬性 */
@property (nonatomic, strong) NSMutableArray * attrsArr;
/** 存放所有列的當前高度 */
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 內(nèi)容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;
@end
@implementation SWWaterFallLayout
- (NSMutableArray *)attrsArr{
if (!_attrsArr) {
_attrsArr = [NSMutableArray array];
}
return _attrsArr;
}
- (NSMutableArray *)columnHeights{
if (!_columnHeights) {
_columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
#pragma mark - 數(shù)據(jù)處理
/**
* 列數(shù)
*/
-(NSUInteger)colunmCount{
if ([self.delegate respondsToSelector:@selector(columnCountWaterFallLayout:)]) {
return [self.delegate columnCountWaterFallLayout:self] ;
}else{
return SWDefaultColunmCount ;
}
}
/**
* 行間距
*/
- (CGFloat)rowMargin{
if ([self.delegate respondsToSelector:@selector(rowMarginWaterFallLayout:)]) {
return [self.delegate rowMarginWaterFallLayout:self];
}else{
return SWDefaultRowMargin;
}
}
/**
* 列間距
*/
- (CGFloat)columnMargin{
if ([self.delegate respondsToSelector:@selector(columnMarginWaterFallLayout:)]) {
return [self.delegate columnMarginWaterFallLayout:self];
}else{
return SWDefaultColunmMargin;
}
}
/**
* item的內(nèi)邊距
*/
- (UIEdgeInsets)edgeInsets{
if ([self.delegate respondsToSelector:@selector(edgeInsetsInWaterFallLayout:)]) {
return [self.delegate edgeInsetsInWaterFallLayout:self];
}else{
return SWDefaultEdgeInsets;
}
}
/**
* 初始化
*/
- (void)prepareLayout{
[super prepareLayout];
//內(nèi)容的高度
self.contentHeight = 0;
// 清除之前計算的所有高度
[self.columnHeights removeAllObjects];
// 設(shè)置每一列默認的高度
for (NSInteger i = 0; i < SWDefaultColunmCount ; i ++) {
[self.columnHeights addObject:@(SWDefaultEdgeInsets.top)];
}
// 清楚之前所有的布局屬性
[self.attrsArr removeAllObjects];
// 開始創(chuàng)建每一個cell對應的布局屬性
NSInteger count = [self.collectionView numberOfItemsInSection:0] ;
for (int i = 0; i < count; i++) {
// 創(chuàng)建位置
NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0] ;
// 獲取indexPath位置上cell對應的布局屬性
UICollectionViewLayoutAttributes * attrs = [self layoutAttributesForItemAtIndexPath:indexPath] ;
[self.attrsArr addObject:attrs] ;
}
}
/**
* 返回indexPath位置cell對應的布局屬性
Attributes ：屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
// 創(chuàng)建布局屬性
UICollectionViewLayoutAttributes * attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//collectionView的寬度
CGFloat collectionViewW = self.collectionView.frame.size.width;
// 設(shè)置布局屬性的frame
CGFloat cellW = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.colunmCount - 1) * self.columnMargin) / self.colunmCount ;
CGFloat cellH = [self.delegate waterFallLayout:self heightForItemAtIndexPath:indexPath.item itemWidth:cellW];
// 找出最短的那一列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
for (int i = 1; i < SWDefaultColunmCount; i++) {
// 取得第i列的高度
CGFloat columnHeight = [self.columnHeights[i] doubleValue];
//判斷是否替換最小的列寬
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = I;
}
}
CGFloat cellX = self.edgeInsets.left + destColumn * (cellW + self.columnMargin);
CGFloat cellY = minColumnHeight;
if (cellY != self.edgeInsets.top) {
cellY += self.rowMargin;
}
attrs.frame = CGRectMake(cellX, cellY, cellW, cellH);
// 更新最短那一列的高度
self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
// 記錄內(nèi)容的高度 - 即最長那一列的高度
CGFloat maxColumnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < maxColumnHeight) {
self.contentHeight = maxColumnHeight;
}
return attrs;
}
/**
* 決定cell的高度
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.attrsArr;
}
/**
* 內(nèi)容的高度
*/
- (CGSize)collectionViewContentSize{
CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
for (int i = 0; i < SWDefaultColunmCount; i++) {
// 取得第i列的高度
CGFloat columnHeight = [self.columnHeights[i] doubleValue];
if (maxColumnHeight < columnHeight) {
maxColumnHeight = columnHeight;
}
}
return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}
@end
最后在控制器中實現(xiàn)將collectView的layout設(shè)置成自定義的layout其他不變，就行啦郎楼。窒悔。敌买。。
瀑布流
吐槽：加班到爆炸啦～??
