"UICollectionView实现带头视图和组的头视图同时存在"实现

实现效果如下:

以前做这效果的界面,总是实现的是section的头视图,因为我一直觉得collectionView是不像UITableView那样有tableHeaderView的,所以每次实现只能是判断indexpath.section为0的时候,组合一下视图做第一个section的头视图.

今天看别人写的Swift项目,看到人家代码的实现这效果的简便,我实在是不敢相信这么容易,于是自己赶紧用OC写了个简单的demo,发现还真是能实现呢......好开心....

实现的源码如下,注释的很清楚啦:

 //
 //  ViewController.m
 //  HeaderCollectionView
 //
 //  Created by 思 彭 on 16/10/24.
 //  Copyright © 2016年 思 彭. All rights reserved.
 //

 #import "ViewController.h"
 #import "SectionHeaderView.h"

 @interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

 @property (nonatomic, strong) UICollectionView *collectionView;

 @end

 @implementation ViewController

 #pragma mark - life Cycle

 - (void)viewDidLoad {
     [super viewDidLoad];
     self.title = @"HeaderCollectionView";
     self.automaticallyAdjustsScrollViewInsets = NO;
     self.navigationController.navigationBar.translucent = NO;
     self.view.backgroundColor = [UIColor whiteColor];
     [self setCollectionView];
     [self setHeaderView];
 }

 #pragma mark - setUI

 - (void)setCollectionView {

     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
     layout.itemSize = CGSizeMake((self.view.frame.size.width - ) / , (self.view.frame.size.width - ) / );
     self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
     self.collectionView.backgroundColor = [UIColor clearColor];
     self.collectionView.delegate = self;
     self.collectionView.dataSource = self;
     // 最重要的一句代码!!!
     self.collectionView.contentInset = UIEdgeInsetsMake(, , , );
     self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
     [self.view addSubview:self.collectionView];

     // 注册cell
     [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collectionCellIdentify"];
     [self.collectionView registerNib:[UINib nibWithNibName:@"SectionHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"sectionHeaderView"];
 }

 - (void)setHeaderView {

     // 注意这里设置headerView的头视图的y坐标一定是从"负值"开始,因为headerView是添加在collectionView上的.
     UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(, -, self.view.frame.size.width, )];
     headerView.backgroundColor = [UIColor greenColor];
     [self.collectionView addSubview:headerView];
 }

 #pragma mark - UICollectionViewDataSource

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

     return ;
 }

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

     return ;
 }

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

     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCellIdentify" forIndexPath:indexPath];
     cell.backgroundColor = [UIColor redColor];
     return cell;
 }

 #pragma mark - UICollectionViewDelegateFlowLayout

 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {

     return UIEdgeInsetsMake(, , , );
 }

 #pragma mark - UICollectionViewDelegate

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

     // 复用SectionHeaderView,SectionHeaderView是xib创建的
     SectionHeaderView *headerView = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"sectionHeaderView" forIndexPath:indexPath];
     return headerView;

 }

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

     return CGSizeMake(self.view.frame.size.width, );
 }

 @end

每天进步一点点......你也加油哟!!