UICollectionViewFlowLayout使用示例

UICollectionViewFlowLayout使用示例

效果

源码

https://github.com/YouXianMing/iOS-Project-Examples

//

//  ViewController.m

//  LayoutViewController

//

//  Created by YouXianMing on 16/5/3.

//  Copyright © 2016年 YouXianMing. All rights reserved.

//

#import "ViewController.h"

#import "UIView+SetRect.h"

#import "RootModel.h"

#import "FlowStyleCell.h"

#import "CollectionHeaderView.h"

#import "CollectionBottomView.h"

@interface ViewController () <UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) RootModel         *rootModel;

@property (nonatomic, strong) UICollectionView  *collectionView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    [self createDataSource];

    [self createCollectionView];

}

#pragma mark - Create data source.

- (void)createDataSource {

    NSDictionary *datas = @{@"response" : @YES,

                            @"datas"    : @[@{@"title"    : @"Header1",

                                              @"subTitle" : @"Bottom1",

                                              @"infos"    : @[@{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}]},

                                            @{@"title"    : @"Header2",

                                              @"subTitle" : @"Bottom2",

                                              @"infos"    : @[@{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""}]},

                                            @{@"title"    : @"Header3",

                                              @"subTitle" : @"Bottom3",

                                              @"infos"    : @[@{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""},

                                                              @{@"name" : @""}, @{@"name" : @""}]}]};

    self.rootModel = [[RootModel alloc] initWithDictionary:datas];

}

#pragma mark - Create UICollectionView.

- (void)createCollectionView {

    self.view.backgroundColor = [UIColor whiteColor];

    // Setup UICollectionViewFlowLayout.

    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];

    layout.itemSize                    = CGSizeMake(, );

    layout.sectionInset                = UIEdgeInsetsMake(, , , );

    layout.minimumInteritemSpacing     = .f; // 横向排列最小间距

    layout.minimumLineSpacing          = 5.0f; // 纵向排列最小间距

    // Init UICollectionView.

    self.collectionView                 = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

    self.collectionView.backgroundColor = [UIColor clearColor];

    self.collectionView.delegate        = self;

    self.collectionView.dataSource      = self;

    // Register CollectionHeaderView & CollectionBottomView.

    [self.collectionView registerClass:[FlowStyleCell class] forCellWithReuseIdentifier:@"FlowStyleCell"];

    [self.collectionView registerClass:[CollectionHeaderView class]

            forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"CollectionHeaderView"];

    [self.collectionView registerClass:[CollectionBottomView class]

            forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"CollectionBottomView"];

    [self.view addSubview:self.collectionView];

}

#pragma mark - UICollectionView's delegate & dataSource.

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    DatasModel *dataModel = self.rootModel.datas[section];

    return dataModel.infos.count;

}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return self.rootModel.datas.count;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    DatasModel *dataModel = self.rootModel.datas[indexPath.section];

    InfoModel  *infoModel = dataModel.infos[indexPath.row];

    FlowStyleCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"FlowStyleCell" forIndexPath:indexPath];

    cell.data           = infoModel;

    cell.indexPath      = indexPath;

    [cell loadContent];

    return cell;

}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView

           viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

    CustomCollectionReusableView *reusableView = nil;

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"CollectionHeaderView"

                                                                 forIndexPath:indexPath];

        DatasModel *dataModel  = self.rootModel.datas[indexPath.section];

        reusableView.data      = dataModel;

        reusableView.indexPath = indexPath;

        [reusableView loadContent];

    } else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {

        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"CollectionBottomView"

                                                                 forIndexPath:indexPath];

        DatasModel *dataModel  = self.rootModel.datas[indexPath.section];

        reusableView.data      = dataModel;

        reusableView.indexPath = indexPath;

        [reusableView loadContent];

    }

    return reusableView;

}

#pragma mark - UICollectionViewDelegateFlowLayout.

- (CGSize)collectionView:(UICollectionView *)collectionView

                  layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

    // If you have headerView, you must implement this method.

    return CGSizeMake(Width, );

}

- (CGSize)collectionView:(UICollectionView *)collectionView

                  layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {

    // If you have footerView, you must implement this method.

    return CGSizeMake(Width, );

}

#pragma mark - Hide statusBar.

- (BOOL)prefersStatusBarHidden {

    return YES;

}

@end

细节

itemSize的含义

minimumLineSpacing的含义

minimunInteritemSpacing的用途