iOS实现collectionView同时支持添加头部视图和组头
最近想实现一个类似上方页面的功能（图可忽略），首先这个页面可以使用tableView和collectionView来实现，由于考虑tableView实现起来相对复杂，因此决定采用collectionView系统的一些优势来实现;collectionView实现添加头部又有两种方案，第一种可以注册一个组头，通过设置第一个组头，来添加头部视图，但是这种方法会带来一些复用的问题，且数据源处理起来不是那么好处理；另外一种文案就是通过设置collectionView的偏移量来添加头部，操作非常简单，因此我采用的是第二种方案，先将我实现的核心代码分享给大家。
//头部view
@property (nonatomic, strong) UIView *homeHeadView;
#pragma mark -添加collectionView
-(void)addCollectionView {
//创建flowLayout布局类
BMSCollectionViewFlowLayout *layout = [[BMSCollectionViewFlowLayout alloc] init];
//设置组头、组尾高度
layout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width, 40);
layout.footerReferenceSize = CGSizeMake(self.view.bounds.size.width, 10);
//设置item之间的上、左、下、右间距
layout.sectionInset = UIEdgeInsetsMake(0, 30, 10, 30);
self.layout= layout;
//创建collectionView
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
collectionView.backgroundColor=kGlobalBackGroundColor;
collectionView.alwaysBounceVertical=YES;
collectionView.dataSource=self;
collectionView.delegate=self;
//通过collectionView.contentInset方法给collectionView来设置头部偏移量（注意：两句代码一定要同时加上）
collectionView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);//上、下、左、右
collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
//注册cell
[collectionViewregisterNib:[UINib nibWithNibName:@"BMSInfoCell" bundle:nil] forCellWithReuseIdentifier:@"BMSInfoCell"];
[collectionViewregisterNib:[UINib nibWithNibName:@"BatteryInfoCell" bundle:nil] forCellWithReuseIdentifier:@"BatteryInfoCell"];
//注册组头视图（下面类继承UICollectionReusableView）
[collectionViewregisterNib:[UINib nibWithNibName:@"BMSHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
[self.viewaddSubview:collectionView];
self.collectionView= collectionView;
//设置偏移后给collectionview添加上头部
[self addHeaderView];
}
#pragma mark - UICollectionViewDataSource
///设置section个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return self.dataList.count;
}
//设置ietm个数
- (NSInteger)collectionView:(UICollectionView*)collectionViewnumberOfItemsInSection:(NSInteger)section {
return[self.dataList[section][@"list"]count];
}
///设置item的宽高
-(CGSize)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutsizeForItemAtIndexPath:(NSIndexPath*)indexPath {
BMSInfoTypeinfoType = [self.dataList[indexPath.section][@"type"]integerValue];
return(infoType ==BMSInfoTypeBattery) ? CGSizeMake(40,45) :CGSizeMake(100,20);
}
//设置水平间距
-(CGFloat)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutminimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return1;
}
//collectionView数据源方法
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
}
//组头视图的数据源方法
- (UICollectionReusableView*)collectionView:(UICollectionView *)collectionViewviewForSupplementaryElementOfKind:(NSString*)kindatIndexPath:(NSIndexPath*)indexPath {
//复用组头
BMSHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
}
-(UIView *)homeHeadView {
if (!_homeHeadView) {
//核心代码，注意：如果向上偏移头部距离h，那就是-h，高度是h
_homeHeadView = [[UIView alloc] initWithFrame:CGRectMake(0, -(centerHeaderViewHeight+dashboardViewWidth), kScreenW, centerHeaderViewHeight+dashboardViewWidth)];
_homeHeadView.backgroundColor = kGlobalBackGroundColor;
}
return _homeHeadView;
}
