纯代码实现CollectionView的headerView悬停
2016-12-24 本文已影响3954人
Jabber_YQ
由于平时不怎么用到CollectionView，以至于每次使用CollectionView都需要搜一下CollectionView的常用方法，终于还是决定写一篇CollectionView的用法，这样每次忘记了看一下自己的就可以了。
CollectionView的初始化
//先实例化一个层
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//设置列与列之间的间距
layout.minimumInteritemSpacing = 1;
//设置行于行之间的间距
layout.minimumLineSpacing = 1;
//设置section的inset
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
[self.view addSubview:collectionView];
CollectionView的数据源方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.lists.count;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((self.view.bounds.size.width - 1)/2, 120);
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
YQArticleModel *model = self.lists[indexPath.row];
UIImageView *imageView = [UIImageView new];
imageView.frame = cell.bounds;
[imageView sd_setImageWithURL:[NSURL URLWithString:model.smallIcon] placeholderImage:[UIImage imageNamed:@"categories_holder"]];
[cell addSubview:imageView];
UIView *blurView = [UIView new];
blurView.frame = cell.bounds;
blurView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.3];
[cell addSubview:blurView];
UILabel *label = [UILabel new];
label.frame = cell.bounds;
label.textAlignment = NSTextAlignmentCenter;
label.text = [NSString stringWithFormat:@"%@ | %@", model.title, model.desc];
label.font = [UIFont systemFontOfSize:14];
label.textColor = [UIColor whiteColor];
[cell addSubview:label];
return cell;
}
这里的方法大多和tableview的数据源类似，但是还是需要注意的是sizeForItemAtIndexPath这个方法。
这个方法设置好后，就确定了collectionView里面的每一个cell的size，这个是不变的。但是有时候会在collectionView初始化的时候设置layout的minimumInteritemSpacing属性，就像我前面那样，那么有可能由于没有计算好而导致冲突，那么sizeForItemAtIndexPath这个方法会比较优先。
举个例子
layout.minimumInteritemSpacing = 1;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(self.view.bounds.size.width /2, 120);
}
上面设置的size为(self.view.bounds.size.width /2, 120)，而列与列之间的间距为1，那么将放不下两个cell，那么他会优先size的设置。所以个人感觉layout.minimumInteritemSpacing没什么用。
效果图：
demo.png
CollectionView的headerView实现
collectionView的headerView和tableview的headview实现差了很多，collectionView的头视图需要新建一个继承自UICollectionReusableView的类，到时候在数据源方法中必须返回UICollectionReusableView的对象。
具体实现：
先新建类，并重写initWithFrame方法
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
//这里面想干嘛就干嘛
self.backgroundColor = [UIColor redColor];
}
return self;
}
然后在控制器中写数据源方法
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//如果是头部视图
if (kind == UICollectionElementKindSectionHeader) {
YQUserCenterHeadView *header = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"head" forIndexPath:indexPath];
return header;
} else {
return nil;
}
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
CGSize size= {self.view.bounds.size.width, 100};
return size;
}
注意！必须要写referenceSizeForHeaderInSection方法，不然就显示不出头视图了。
demo1.gif
CollectionView的headerView的悬停
新建一个继承UICollectionViewFlowLayout的类，然后代码如下：
.h文件
#import <UIKit/UIKit.h>
@interface YQCollectionViewFlowLayout : UICollectionViewFlowLayout
@property (nonatomic, assign) CGFloat navHeight;
@end
.m文件
#import "YQCollectionViewFlowLayout.h"
@implementation YQCollectionViewFlowLayout
- (instancetype)init
{
self = [super init];
if (self)
{
self.navHeight = 64;
}
return self;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
//UICollectionViewLayoutAttributes：我称它为collectionView中的item（包括cell和header、footer这些）的《结构信息》
//截取到父类所返回的数组（里面放的是当前屏幕所能展示的item的结构信息），并转化成不可变数组
NSMutableArray *superArray = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
//创建存索引的数组，无符号（正整数），无序（不能通过下标取值），不可重复（重复的话会自动过滤）
NSMutableIndexSet *noneHeaderSections = [NSMutableIndexSet indexSet];
//遍历superArray，得到一个当前屏幕中所有的section数组
for (UICollectionViewLayoutAttributes *attributes in superArray)
{
//如果当前的元素分类是一个cell，将cell所在的分区section加入数组，重复的话会自动过滤
if (attributes.representedElementCategory == UICollectionElementCategoryCell)
{
[noneHeaderSections addIndex:attributes.indexPath.section];
}
}
//遍历superArray，将当前屏幕中拥有的header的section从数组中移除，得到一个当前屏幕中没有header的section数组
//正常情况下，随着手指往上移，header脱离屏幕会被系统回收而cell尚在，也会触发该方法
for (UICollectionViewLayoutAttributes *attributes in superArray)
{
//如果当前的元素是一个header，将header所在的section从数组中移除
if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader])
{
[noneHeaderSections removeIndex:attributes.indexPath.section];
}
}
//遍历当前屏幕中没有header的section数组
[noneHeaderSections enumerateIndexesUsingBlock:^(NSUInteger idx, BOOL *stop){
//取到当前section中第一个item的indexPath
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:idx];
//获取当前section在正常情况下已经离开屏幕的header结构信息
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
//如果当前分区确实有因为离开屏幕而被系统回收的header
if (attributes)
{
//将该header结构信息重新加入到superArray中去
[superArray addObject:attributes];
}
}];
//遍历superArray，改变header结构信息中的参数，使它可以在当前section还没完全离开屏幕的时候一直显示
for (UICollectionViewLayoutAttributes *attributes in superArray) {
//如果当前item是header
if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader])
{
//得到当前header所在分区的cell的数量
NSInteger numberOfItemsInSection = [self.collectionView numberOfItemsInSection:attributes.indexPath.section];
//得到第一个item的indexPath
NSIndexPath *firstItemIndexPath = [NSIndexPath indexPathForItem:0 inSection:attributes.indexPath.section];
//得到最后一个item的indexPath
NSIndexPath *lastItemIndexPath = [NSIndexPath indexPathForItem:MAX(0, numberOfItemsInSection-1) inSection:attributes.indexPath.section];
//得到第一个item和最后一个item的结构信息
UICollectionViewLayoutAttributes *firstItemAttributes, *lastItemAttributes;
if (numberOfItemsInSection>0)
{
//cell有值，则获取第一个cell和最后一个cell的结构信息
firstItemAttributes = [self layoutAttributesForItemAtIndexPath:firstItemIndexPath];
lastItemAttributes = [self layoutAttributesForItemAtIndexPath:lastItemIndexPath];
}else
{
//cell没值,就新建一个UICollectionViewLayoutAttributes
firstItemAttributes = [UICollectionViewLayoutAttributes new];
//然后模拟出在当前分区中的唯一一个cell，cell在header的下面，高度为0，还与header隔着可能存在的sectionInset的top
CGFloat y = CGRectGetMaxY(attributes.frame)+self.sectionInset.top;
firstItemAttributes.frame = CGRectMake(0, y, 0, 0);
//因为只有一个cell，所以最后一个cell等于第一个cell
lastItemAttributes = firstItemAttributes;
}
//获取当前header的frame
CGRect rect = attributes.frame;
//当前的滑动距离 + 因为导航栏产生的偏移量，默认为64（如果app需求不同，需自己设置）
CGFloat offset = self.collectionView.contentOffset.y + self.navHeight;
//第一个cell的y值 - 当前header的高度 - 可能存在的sectionInset的top
CGFloat headerY = firstItemAttributes.frame.origin.y - rect.size.height - self.sectionInset.top;
//哪个大取哪个，保证header悬停
//针对当前header基本上都是offset更加大，针对下一个header则会是headerY大，各自处理
CGFloat maxY = MAX(offset,headerY);
//最后一个cell的y值 + 最后一个cell的高度 + 可能存在的sectionInset的bottom - 当前header的高度
//当当前section的footer或者下一个section的header接触到当前header的底部，计算出的headerMissingY即为有效值
CGFloat headerMissingY = CGRectGetMaxY(lastItemAttributes.frame) + self.sectionInset.bottom - rect.size.height;
//给rect的y赋新值，因为在最后消失的临界点要跟谁消失，所以取小
rect.origin.y = MIN(maxY,headerMissingY);
//给header的结构信息的frame重新赋值
attributes.frame = rect;
//如果按照正常情况下,header离开屏幕被系统回收，而header的层次关系又与cell相等，如果不去理会，会出现cell在header上面的情况
//通过打印可以知道cell的层次关系zIndex数值为0，我们可以将header的zIndex设置成1，如果不放心，也可以将它设置成非常大，这里随便填了个7
attributes.zIndex = 7;
}
}
//转换回不可变数组，并返回
return [superArray copy];
}
//return YES;表示一旦滑动就实时调用上面这个layoutAttributesForElementsInRect:方法
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBound
{
return YES;
}
navHeight指的是当前collectionView所在的控制器的navBar的高度，默认是64，如果没有导航栏，那就设置为0。
建好UICollectionViewFlowLayout子类后，然后直接初始化就好了，其余一模一样。
//初始化改一下类就好了，其余一样
YQCollectionViewFlowLayout *layout = [[YQCollectionViewFlowLayout alloc] init];
layout.minimumInteritemSpacing = 1;
layout.minimumLineSpacing = 10;
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:collectionView];
self.collectionView = collectionView;
这样就实现了头视图的悬停。
效果演示：（为了效果明显，我给headview上添了一个lable，label的text为当前的section）
demo2.gif
