collectionView头视图与组视图的创建

最新推荐文章于 2021-01-27 16:15:48 发布

别说话是你的益达

最新推荐文章于 2021-01-27 16:15:48 发布

阅读量3.7k

点赞数

分类专栏： iOS UI控件

本文链接：https://blog.csdn.net/qq_31942467/article/details/49637621

版权

iOS UI控件专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在UICollectionView中创建和自定义头视图与组视图。通过注册 nib 或类，设置大小，填充内容，并提供协议方法返回视图，实现了头视图展示图片以及组视图的创建。示例代码详细展示了实现过程。

摘要由CSDN通过智能技术生成

//1.头视图的创建

staticNSString *headerViewIdentifier =@"hederview";

-(void)addCollectionView

{

UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayoutalloc]init];

layout.minimumLineSpacing=20;//设置每一行的间距

layout.itemSize=CGSizeMake(100,100); //设置每个单元格的大小

layout.sectionInset=UIEdgeInsetsMake(0,0, 50, 0);

layout.headerReferenceSize=CGSizeMake(self.view.frame.size.width,200); //设置collectionView头视图的大小

UICollectionView *collectionView=[[UICollectionViewalloc]initWithFrame:self.view.boundscollectionViewLayout:layout];

collectionView.frame=self.view.bounds;

//注册cell单元格

[collectionView registerNib:[UINibnibWithNibName:@"ConstomCell"bundle:nil]forCellWithReuseIdentifier:@"cell"];

//注册头视图

[collectionView registerClass:[UICollectionReusableViewclass] forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:headerViewIdentifier];

collectionView.backgroundColor=[UIColorwhiteColor];

collectionView.delegate=self;

collectionView.dataSource=self;

[self.viewaddSubview:collectionView];

}

#pragma mark 返回多少行

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

{

return 13;

}

#pragma markk 返回的单元格

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

{

ConstomCell *cell=[collectionViewdequeueReusableCellWithReuseIdentifier:@"cell"forIndexPath:indexPath];

return cell;

}

// 返回头视图

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

//如果是头视图

if ([kindisEqualToString:UICollectionElementKindSectionHeader]) {

UICollectionReusableView *header=[collectionViewdequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerViewIdentifierforIndexPath:indexPath];

//添加头视图的内容

[selfaddContent];

//头视图添加view

[headeraddSubview:self.headerImage];

return header;

}

//如果底部视图

// if([kind isEqualToString:UICollectionElementKindSectionFooter]){

// }

return nil;

}

* 补充头部内容

-(void)addContent

{

UIImageView *headerImage=[[UIImageViewalloc]init];

headerImage.contentMode=UIViewContentModeScaleAspectFill;

headerImage.clipsToBounds=YES;

headerImage.frame=CGRectMake(0,0, self.view.frame.size.width,200);

headerImage.image=[UIImageimageNamed:@"mei"];

self.headerImage=headerImage;

}

详细demo地址点击打开链接

//2.组视图的创建

//先创建

ReusableView类继承于UICollectionReusableView

然后collectionView注册

[selfregisterNib:[UINibnibWithNibName:@"ManagerReusableView"bundle:nil]forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"ManagerReusableView"];

//协议方法里面创建头视图

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

ManagerReusableView *header = [collectionViewdequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"ManagerReusableView"forIndexPath:indexPath];

return header;

}

//设置宽高

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

return CGSizeMake(kScreenWidth,30);

}

collectionView组视图demo下载连接