iOS之瀑布流布局設計

標籤：

#import "CXDWaterflowLayout.h"/** 預設的列數 */static const NSInteger CXDDefaultColumnCount = 3;/** 每一列之間的間距 */static const CGFloat CXDDefaultColumnMargin = 10;/** 每一行之間的間距 */static const CGFloat CXDDefaultRowMargin = 10;/** 邊緣間距 */static const UIEdgeInsets CXDDefaultEdgeInsets = {10, 10, 10, 10};@interface CXDWaterflowLayout()/** 存放所有cell的布局屬性 */@property (nonatomic, strong) NSMutableArray *attrsArray;/** 存放所有列的當前高度 */@property (nonatomic, strong) NSMutableArray *columnHeights;@end@implementation CXDWaterflowLayout- (NSMutableArray *)columnHeights{    if (!_columnHeights) {        _columnHeights = [NSMutableArray array];    }    return _columnHeights;}- (NSMutableArray *)attrsArray{    if (!_attrsArray) {        _attrsArray = [NSMutableArray array];    }    return _attrsArray;}/** * 初始化 */- (void)prepareLayout{    [super prepareLayout];        // 清除以前計算的所有高度    [self.columnHeights removeAllObjects];    for (NSInteger i = 0; i < CXDDefaultColumnCount; i++) {        [self.columnHeights addObject:@(CXDDefaultEdgeInsets.top)];    }    // 清除之前所有的布局屬性    [self.attrsArray removeAllObjects];    // 開始建立每一個cell對應的布局屬性    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (NSInteger i = 0; i < count; i++) {        // 建立位置        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        // 擷取indexPath位置cell對應的布局屬性        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];        [self.attrsArray addObject:attrs];    }}/** * 決定cell的排布 */- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    return self.attrsArray;}/** * 返回indexPath位置cell對應的布局屬性 */- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    // 建立布局屬性    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];        // collectionView的寬度    CGFloat collectionViewW = self.collectionView.frame.size.width;        // 設定布局屬性的frame    CGFloat w = (collectionViewW - CXDDefaultEdgeInsets.left - CXDDefaultEdgeInsets.right - (CXDDefaultColumnCount - 1) * CXDDefaultColumnMargin) / CXDDefaultColumnCount;    CGFloat h = 50 + arc4random_uniform(100);        // 找出高度最短的那一列    NSInteger destColumn = 0;    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];    for (NSInteger i = 1; i < CXDDefaultColumnCount; i++) {        // 取得第i列的高度        CGFloat columnHeight = [self.columnHeights[i] doubleValue];                if (minColumnHeight > columnHeight) {            minColumnHeight = columnHeight;            destColumn = i;        }    }        CGFloat x = CXDDefaultEdgeInsets.left + destColumn * (w + CXDDefaultColumnMargin);    CGFloat y = minColumnHeight;    if (y != CXDDefaultEdgeInsets.top) {        y += CXDDefaultRowMargin;    }    attrs.frame = CGRectMake(x, y, w, h);        // 更新最短那列的高度    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));        return attrs;}- (CGSize)collectionViewContentSize{    CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];    for (NSInteger i = 1; i < CXDDefaultColumnCount; i++) {        // 取得第i列的高度        CGFloat columnHeight = [self.columnHeights[i] doubleValue];                if (maxColumnHeight < columnHeight) {            maxColumnHeight = columnHeight;        }    }    return CGSizeMake(0, maxColumnHeight + CXDDefaultEdgeInsets.bottom);}@end

ps:繼承UICollectionViewLayout類，實現其中方法，找到高度最短的那一列填充對應資料即可

iOS之瀑布流布局設計