iOS - 瀑布流簡(jiǎn)單的實(shí)現(xiàn)

前言

平時(shí)沒事也喜歡逛一些技術(shù)網(wǎng)站，而瀑布流因?yàn)槠潇趴岬囊曈X效果（其實(shí)就是模仿）和樣式使其成為ios當(dāng)中比較火熱的一種技術(shù)。
在最近的一個(gè)項(xiàng)目中，生活也對(duì)我這個(gè)菜鳥下了毒手，要求實(shí)現(xiàn)瀑布流（WTF。。。）吐槽歸吐槽但是效果還是得做出來。。。
現(xiàn)在我來介紹一下我的實(shí)現(xiàn)思路（其實(shí)是參考網(wǎng)上案例??）

初步接觸UICollectionView的小伙伴們肯定都知道蘋果官方為我們封裝好的UICollectionViewFlowLayout，在很多情況下我們使用UICollectionViewFlowLayout就可以實(shí)現(xiàn)需求了。
下面的列子簡(jiǎn)單實(shí)用UICollectionViewFlowLayout實(shí)現(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 ;
      
      //注冊(cè)cell 一定要做
      [collocetView registerClass:[SWCollectionViewCell class] forCellWithReuseIdentifier:itemID] ;
      collocetView ;
  });


 //注冊(cè)頭部
    [self.collectionView registerClass:[SWCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:heardID] ;
    
    //注冊(cè)尾部
    [self.collectionView registerClass:[SWCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:heardID];
這里得強(qiáng)調(diào)一下UICollectionView的cell和頭尾試圖通常都是注冊(cè)實(shí)現(xiàn)的。。。。

二. 瀑布流的實(shí)現(xiàn)思路：

  1. 控件選擇：現(xiàn)在實(shí)現(xiàn)瀑布流主流的思路是用UICollectionView來實(shí)現(xiàn)，優(yōu)點(diǎn)不言而喻，因?yàn)槠湄S富的API和類似tableView的復(fù)用機(jī)制等 。。?？赡芤灿腥擞胹rollView實(shí)現(xiàn)（我不會(huì)，，，唉～）。

  2. 因?yàn)楣俜降腢ICollectionViewFlowLayout是繼承自UICollectionViewLayout，所以我們也可以參照官方的實(shí)現(xiàn)瀑布流效果

  3. 現(xiàn)在我們需要指定滾動(dòng)方向、默認(rèn)列數(shù)、行間距、列間距、以及指定cell的寬度itemWidth還需要通過方法計(jì)算高度

import "SWWaterFallLayout.h"

@class SWWaterFallLayout ;
//1.定義協(xié)議
@protocol SWWaterFallLayoutDelegate<NSObject>
//必須實(shí)現(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 ;
/**
 每一個(gè)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 ;
  1. 可以提供一個(gè)數(shù)組attrsArr存放所有的布局屬性,columnHeights存放所有列的當(dāng)前高度

import "SWWaterFallLayout.h"

/** 默認(rèn)的列數(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;
/** 存放所有列的當(dāng)前高度 */
@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;
    
    // 清除之前計(jì)算的所有高度
    [self.columnHeights removeAllObjects];
    
    // 設(shè)置每一列默認(rèn)的高度
    for (NSInteger i = 0; i < SWDefaultColunmCount ; i ++) {
        [self.columnHeights addObject:@(SWDefaultEdgeInsets.top)];
    }
    // 清楚之前所有的布局屬性
    [self.attrsArr removeAllObjects];
    
    // 開始創(chuàng)建每一個(gè)cell對(duì)應(yīng)的布局屬性
    NSInteger count = [self.collectionView numberOfItemsInSection:0] ;
    
    for (int i = 0; i < count; i++) {
        // 創(chuàng)建位置
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0] ;
        
        // 獲取indexPath位置上cell對(duì)應(yīng)的布局屬性
        UICollectionViewLayoutAttributes * attrs = [self layoutAttributesForItemAtIndexPath:indexPath] ;
        
        [self.attrsArr addObject:attrs] ;
    }
}

/**
 * 返回indexPath位置cell對(duì)應(yīng)的布局屬性
 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)容的高度 - 即最長(zhǎng)那一列的高度
    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

最后在控制器中實(shí)現(xiàn)將collectView的layout設(shè)置成自定義的layout其他不變，就行啦。。。。

瀑布流

吐槽：加班到爆炸啦～??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容