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;
}
效果如下：
现在的布局效果是不是炫酷了许多。
