最近项目中需要实现一种布局，需要用到UICollectionView，特在此整理记录下！
贴上最终实现的效果图：
1，声明
@interface FirstViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property(nonatomic,strong)UICollectionView *myCollectionView; @property(nonatomic,strong)UICollectionViewFlowLayout *myLayout;
2，创建
a，设置一个背景图片
UIImageView *imgV = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bgImg2.jpg"]];
imgV.frame = CGRectMake(, , KscreenW, KscreenH);
imgV.autoresizingMask = UIViewAutoresizingFlexibleWidth;
[self.view insertSubview:imgV atIndex:];
b,创建UICollectionView和FlowLayout
-(void)creatUI
{
self.myLayout = [[UICollectionViewFlowLayout alloc]init];
self.myLayout.minimumLineSpacing = ;
self.myLayout.minimumInteritemSpacing = ;
self.myLayout.itemSize = CGSizeMake(KscreenW/-, (KscreenW/)+);
self.myLayout.sectionInset = UIEdgeInsetsMake(, , , ); self.myCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(, , KscreenW, KscreenH-) collectionViewLayout:self.myLayout];
self.myCollectionView.delegate = self;
self.myCollectionView.dataSource = self;
self.myCollectionView.backgroundColor = [UIColor clearColor];
// 注册cell
[self.myCollectionView registerNib:[UINib nibWithNibName:@"LeftCell" bundle:nil] forCellWithReuseIdentifier:@"LeftCell"];
[self.myCollectionView registerNib:[UINib nibWithNibName:@"RightCell" bundle:nil] forCellWithReuseIdentifier:@"RightCell"];
[self.myCollectionView registerNib:[UINib nibWithNibName:@"PublickCell" bundle:nil] forCellWithReuseIdentifier:@"PublickCell"];
// 注册头视图
[self.myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_ONE"];
[self.myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_TWO"]; [self.view insertSubview:self.myCollectionView atIndex:];
}
c，这里我用了三种自定义cell，上面的方法有具体的注册cell方法，还有头视图的注册
3，具体代理方法的实现
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return ;
} -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
if (section == ) { return ;
}else{ return ;
}
} -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section == ) { if (indexPath.item % == ) { LeftCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LeftCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor clearColor];
return cell;
}else{
RightCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"RightCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
return cell;
}
}else{ PublickCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"PublickCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor]; return cell;
} return nil;
}
比较简单！
4，创建头视图，PS：这里需要注意个问题：多组头部视图样式不一样复用时发生错乱问题，代码如下：
a，注册头视图，有两种方法：
// 防止cell和头部视图复用出现错乱
[collectionView registerClass:[WOCOHomeSelectTypeCell class] forCellWithReuseIdentifier:@"SECTION_ONE"];
[collectionView registerClass:[WOCOHomeDisplayCell class] forCellWithReuseIdentifier:@"SECTION_TWO"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_ONE"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"SECTION_TWO"];
这两种方法都可以！
b，代理方法的实现：
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 防止重用，定义重用标识符
static NSString *reusableID;
if (indexPath.section == ) {
reusableID = @"SECTION_ONE";
}else{
reusableID = @"SECTION_TWO";
} UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:reusableID forIndexPath:indexPath];
header.backgroundColor = [UIColor clearColor]; if (indexPath.section == ) {
headImg = [[UIImageView alloc]initWithFrame:CGRectMake(, , KscreenW, )];
headImg.image = [UIImage imageNamed:@"topLog"];
[header addSubview:headImg]; bottomImg = [[UIImageView alloc]initWithFrame:CGRectMake(KscreenW/-/, , , )];
bottomImg.image = [UIImage imageNamed:@"sj"];
[header addSubview:bottomImg]; }else{ UIImageView *bottomImg2 = [[UIImageView alloc]initWithFrame:CGRectMake(KscreenW/-/, , , )];
bottomImg2.image = [UIImage imageNamed:@"sj1"];
[header addSubview:bottomImg2];
} return header;
}
此方法设置了一个str，作为标识符对不同的section进行标记，这样就可以解决重用的问题，根据不同的id进入不同的section，避免了头视图上面的内容多次创建，各自创建各自的！
c，设置不同section的高度，只需要实现此代理方法即可：
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
if (section == ) {
return CGSizeMake(KscreenW, );
}else{
return CGSizeMake(KscreenW, );
}
}
完成上面的操作，就可以在不同的section之间随意操作了！