collectionView怎么添加头视图

      经常有朋友在群里面问collectionView怎么添加头视图,不止一个问的,好多都在问,所以小编索性就写了一篇collectionView怎么添加头视图的博客,供大家参考学习。(示例代码下载地址)

    我们要使用CollectionView里面的头视图需要先注册头视图 UICollectionReusableView或者 继承UICollectionReusableView的子类,kind类型为UICollectionElementKindSectionHeader,并且需要带一个标识符,我们定义个static 的静态字符串就行,如下所示:

 [collectionView registerClass:[UICollectionReusableViewclass ]   forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerViewIdentifier];

几个重要的不能忽视的点就是  UICollectionViewFlowLayout 布局属性需要设置 headerReferenceSize头部的大小,不然头视图没有大小不显示;一定要在 

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath; 方法里面创建头视图view并给出frame,然后添加到  UICollectionReusableView 中。

详细代码如下

<pre name="code" class="objc">//
//  HomeViewController.m
//  collection添加头部
//
//  Created by user on 15/10/10.
//  Copyright (c) 2015年 user. All rights reserved.
//

#import "HomeViewController.h"
#import "ConstomCell.h"


static NSString *headerViewIdentifier = @"hederview";

@interface HomeViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@property (nonatomic,strong) UIImageView *headerImage;

@end

@implementation HomeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.添加collectionview
    [self addCollectionView];
  
}

-(void)addCollectionView
{
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
    layout.minimumLineSpacing=20; //设置每一行的间距
    layout.itemSize=CGSizeMake(100, 100);  //设置每个单元格的大小
    layout.sectionInset=UIEdgeInsetsMake(0, 0, 50, 0);
    layout.headerReferenceSize=CGSizeMake(self.view.frame.size.width, 250); //设置collectionView头视图的大小
    
    UICollectionView *collectionView=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectionView.frame=self.view.bounds;
    //注册cell单元格
   [collectionView registerNib:[UINib nibWithNibName:@"ConstomCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
    //注册头视图
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerViewIdentifier];
    
    collectionView.backgroundColor=[UIColor whiteColor];
    collectionView.delegate=self;
    collectionView.dataSource=self;
    [self.view addSubview:collectionView];
}

#pragma mark  返回多少行
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
   
    return 13;
}
#pragma markk 返回的单元格
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ConstomCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    
    return cell;
}

//  返回头视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    //如果是头视图
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
         UICollectionReusableView *header=[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerViewIdentifier forIndexPath:indexPath];
        //添加头视图的内容
        [self addContent];
        //头视图添加view
        [header addSubview:self.headerImage];
        return header;
    }
    //如果底部视图
//    if([kind isEqualToString:UICollectionElementKindSectionFooter]){
//        
//    }
    return nil;
}
/*
 *  补充头部内容
 */
-(void)addContent
{
    UIImageView *headerImage=[[UIImageView alloc]init];
    headerImage.contentMode=UIViewContentModeScaleAspectFill;
    headerImage.clipsToBounds=YES;
    headerImage.frame=CGRectMake(0, 0, self.view.frame.size.width, 250);
    headerImage.image=[UIImage imageNamed:@"mei"];
    self.headerImage=headerImage;
}


@end

 
代码的运行结果如下图 



查看我的更多开源项目点击(开源项目)

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值