iOS 流布局 UICollectionView使用(使用FlowLayout进行更灵活布局)

在UICollectionView的布局中，如果每个item的大小都一样那么是十分简单的事情，但是，如果我们想要的每个item大小不一样呢，这个时候，就要对UICollectionViewFlowLayout进行设置了。

比如我们做一个大小不一样的九宫格

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建一个Layout布局

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    //设置布局方向为垂直流布局

    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    //创建collectionView 通过一个布局策略layout来创建

    UICollectionView * collect = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:layout];

    //代理设置

    collect.delegate=self;

    collect.dataSource=self;

    //注册item类型 这里使用系统的类型

    [collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];

    [self.view addSubview:collect];

}

//设置分区数

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

    return ;

}

//返回每个分区的item个数

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

    return ;

}

//这是正确的方法

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

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

    cell.backgroundColor = [UIColor colorWithRed:arc4random()%/255.0 green:arc4random()%/255.0 blue:arc4random()%/255.0 alpha:];

    return cell;

}

//在代理方法中设置item的大小

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

    if (indexPath.row%==) {

        return CGSizeMake(, );

    }else{

        return CGSizeMake(, );

    }

}

效果

UICollectionViewFlowLayout相关属性方法

UICollectionViewFlowLayout是系统提供给我们一个封装好的流布局设置类，其中有一些布局属性我们可以进行设置：

设置行与行之间最小距离

@property (nonatomic) CGFloat minimumLineSpacing;

设置列与列之间的最小距离

@property (nonatomic) CGFloat minimumInteritemSpacing;

设置每个item的大小

@property (nonatomic) CGSize itemSize;

设置每个item的估计大小(与TableView 自适应大小的时候设置的预估高度相似)

@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;

设置头视图和尾视图是否是种固定在屏幕的上边或者下边

@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;

巴特西

iOS 流布局 UICollectionView使用(使用FlowLayout进行更灵活布局)

UICollectionViewFlowLayout相关属性方法

动态的配置layout的相关属性UICollectionViewDelegateFlowLayout

最新文章

热门文章