实现效果如下:
以前做这效果的界面,总是实现的是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 ()
@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
// ViewController.m
// HeaderCollectionView
//
// Created by 思 彭 on 16/10/24.
// Copyright © 2016年 思 彭. All rights reserved.
// #import "ViewController.h"
#import "SectionHeaderView.h" @interface ViewController ()
[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
每天进步一点点......你也加油哟!!
-->