iOS流佈局UICollectionView系列三——使用FlowLayout進行更靈活佈局

iOS流佈局UICollectionView系列三——使用FlowLayout進行更靈活佈局

1、引言

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

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

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

經過layout的設置，咱們能夠編寫更加靈活的佈局效果。

2、將九宮格式的佈局進行升級

        在第一篇博客中，經過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;
}

效果以下：

如今的佈局效果是否是炫酷了許多。

3、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);

4、動態的配置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;

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592