iOS流布局UICollectionView使用FlowLayout進行更靈活布局

一、引言

前面的博客介紹了UICollectionView的相關方法和其協議中的方法，但對布局的管理類UICollectionViewFlowLayout沒有着重探討，這篇博客介紹關於布局的相關設置和屬性方法。

UICollectionView的簡單使用：http://my.oschina.net/u/2340880/blog/522613  

UICollectionView相關協議方法：http://my.oschina.net/u/2340880/blog/522613

通過layout的設置，我們可以編寫更加靈活的布局效果。

二、將九宮格式的布局進行升級

在第一篇博客中，通過UICollectionView，我們很輕松的完成了一個九宮格的布局，但是如此中規中矩的布局方式，有時候並不能滿足我們的需求，有時我們需要每一個Item展示不同的大小，代碼如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    UICollectionView *collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];
    collect.delegate=self;
    collect.dataSource=self;

    [collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
  ;
    [self.view addSubview:collect];


    }
//設置每個item的大小，雙數的為50*50 單數的為100*100
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row%2==0) {
        return CGSizeMake(50, 50);
    }else{
        return CGSizeMake(100, 100);
    }
}

//代理相應方法
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 100;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
    return cell;
}

效果如下：

現在的布局效果是不是炫酷了許多。

三、UICollectionViewFlowLayout相關屬性方法

UICollectionViewFlowLayout是系統提供給我們一個封裝好的流布局設置類，其中有一些布局屬性我們可以進行設置：

設置行與行之間的間距最小距離

@property (nonatomic) CGFloat minimumLineSpacing;

設置列與列之間的間距最小距離

@property (nonatomic) CGFloat minimumInteritemSpacing;

設置每個item的大小

@property (nonatomic) CGSize itemSize;

設置每個Item的估計大小，一般不需要設置

@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);

設置布局方向

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

這個UICollectionViewScrollDirection的枚舉如下：

typedef NS_ENUM(NSInteger, UICollectionViewScrollDirection) {
    UICollectionViewScrollDirectionVertical,//水平布局
    UICollectionViewScrollDirectionHorizontal//垂直布局
};

設置頭視圖尺寸大小

@property (nonatomic) CGSize headerReferenceSize;

設置尾視圖尺寸大小

@property (nonatomic) CGSize footerReferenceSize;

設置分區的EdgeInset

@property (nonatomic) UIEdgeInsets sectionInset;

這個屬性可以設置分區的偏移量，例如我們在剛才的例子中添加如下設置：

 layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

效果如下，會看到分區的邊界閃出了20像素

下面這兩個方法設置分區的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊

@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

四、動態的配置layout的相關屬性UICollectionViewDelegateFlowLayout

上面的方法在創建FlowLayout時靜態的進行設置，如果我們需要動態的設置這些屬性，就像我們例子中的，每個item的大小會有差異，我們可以通過代理來實現。

UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子協議，其中常用方法如下，我們只需要實現我們需要的即可：

動態設置每個Item的尺寸大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

動態設置每個分區的EdgeInsets

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

動態設置每行的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

動態設置每列的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

動態設置某個分區頭視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

動態設置某個分區尾視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;