iOS個人整理25-瀑布流效果

一、瀑布流

什麼是瀑布流！？就是這樣

這是我上傳的完整的demo，實作方法也比較清爽，順便賺點積分哈

http://download.csdn.net/detail/u010330109/9449986

總體思想讓我捋一捋

三個類，

自定義的cell類UICollectionViewCell，

自定義的布局UICollectionViewLayout類，

以及一個UICollectionView

1.自定義的cell

這個類裡面比較簡單，給cell加個imageView，讓imageView的frame與cell相同，cell會根據圖檔大小計算高度。

2.自定義布局

（1）一個協定代理，将RootVC（裡面添加的UICollectionView）中根據将要添加的圖檔大小，計算出的cell高度，傳回給布局檔案

（2）寫在.m延展的屬性，也可以寫在.h

@property (nonatomic,retain)NSMutableArray *allAttributeArray;//儲存所有計算好位置的cell的布局屬性

@property (nonatomic,retain)NSMutableArray *allHeightColumnArray;//儲存所有列的高度，用來尋找最長列和最短列

（3）寫在.h的屬性

//代理屬性

@property (nonatomic,assign)id<WaterFallLayoutDelegate>delegate;

//确定有多少列

@property (nonatomic,assign)NSInteger numberColumn;

//cell大小

@property (nonatomic,assign)CGSize itemSize;

//列間距

@property (nonatomic,assign)CGFloat columnSpacing;

//行間距

@property (nonatomic,assign)CGFloat lineSpacing;

//分區間距

@property (nonatomic,assign)UIEdgeInsets sectionEdgeInset;

（4）通過allHeightColumnArray計算出各列中最長的和最短的

-(NSInteger)shortestColumn

-(NSInteger)longestColumn

（5）計算每一個cell的大小和位置，這裡是核心

-(void)customLayoutCell
{
    //為每一列賦初值
    for (int i = 0; i < self.numberColumn; i++) {
        self.allHeightColumnArray[i] = @(self.sectionEdgeInset.top);
    }
    //得到cell的總個數
    long sumCells = [self.collectionView numberOfItemsInSection:0];
    

    //計算每一個cell的位置和大小
    for (int i = 0; i < sumCells; i++) {
        //計算cell的x值
        //step_1:取得所要最短列是哪一列
        NSInteger shortestIndex = self.shortestColumn;
        
        //step_2:計算x 左側距邊緣+（cell的寬度+列間距）*目前列數
        CGFloat short_X = self.sectionEdgeInset.left + (self.itemSize.width +self.columnSpacing)*shortestIndex;
        //确定y值,最短列的高度+行間距
        CGFloat short_Y = [self.allHeightColumnArray[shortestIndex] floatValue]+ self.lineSpacing;
        
        //寬度的大小是确定的不需要計算
        //self.itemSize.width;
        
        //高度cell的計算
        CGFloat short_Height = 0.0;
        
        //确定是第幾個cell
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        
        //判斷代理和方法是否存在
        if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewWithLayout:indexPath:)]) {
        
            //執行代理方法計算目前cell的高度
            short_Height = [self.delegate collectionViewWithLayout:self indexPath:indexPath];
        }
        
        //至此cell的frame已經确定
        //該屬性儲存某個cell的布局屬性
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        attributes.frame = CGRectMake(short_X, short_Y, self.itemSize.width, short_Height);
        
        //添加到數組
        [self.allAttributeArray addObject:attributes];
        
        //更新目前列的長度 目前cell的y+height
        self.allHeightColumnArray[shortestIndex] = @(short_Y + short_Height);
    }
    
}
           

（6）自定義布局需要實作的系統方法

//開始布局

-(void)prepareLayout

//傳回所有cell的布局屬性

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

//計算contentSize，滾動範圍會随着某一列cell的總高度，也就是最長的一列，變化

-(CGSize)collectionViewContentSize

3.UICollectionView

（1）首先把協定遵守了把代理方法實作了

//計算所需的高度

-(CGFloat)collectionViewWithLayout:(WaterFallLayout *)layout indexPath:(NSIndexPath *)indexPath

（2）在viewDidLoad把布局類基本設定和UICollectionView的初始化，代理，寫了

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor blueColor];
    
    [self parserJson];
    
    //初始化布局類
    WaterFallLayout *customLayout = [[WaterFallLayout alloc]init];

    //設定列數
    customLayout.numberColumn = 3;
    
    //設定行間距
    customLayout.lineSpacing = 10;
    
    //列間距
    customLayout.columnSpacing = 10;

    //設定分區間距
    customLayout.sectionEdgeInset = UIEdgeInsetsMake(10, 10, 10, 10);
    
    //計算寬度:（總寬 - 左側edge - 列間距*列數 - 右側edge）/列數
    CGFloat width = (CGRectGetWidth(self.view.frame) - customLayout.sectionEdgeInset.right - customLayout.columnSpacing*(customLayout.numberColumn-1) - customLayout.sectionEdgeInset.right)/3;
    
    //初始化cell的大小,高度是動态計算的，這裡随便給
    customLayout.itemSize = CGSizeMake(width, width);
    
    //初始化collectionView
    UICollectionView *myCollectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:customLayout];
    
    myCollectionView.tag =1000;
    
    //設定代理
    myCollectionView.delegate = self;
    myCollectionView.dataSource = self;
    customLayout.delegate = self;
    
    //添加集合視圖
    [self.view addSubview:myCollectionView];
    
    //注冊單元格
    [myCollectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"item"];
    
}
           

（3）一個從json檔案取url的方法，這樣就能通過url從網上讀圖檔了

從網上加載圖檔，要設定info.plist

添加App Transport Security Settings

設定Allow Arbitrary Loads 為YES

（4）填充cell

整個代碼确實比較多，上傳到資源裡面，賺點積分