如果對(duì)collectionView還不了解的,可以先看看我上次寫的關(guān)于UICollectionView的基本使用 點(diǎn)擊這里查看
這次主要是寫關(guān)于UICollectionView的頭部使用還有漂浮效果
相關(guān)代碼請(qǐng)參考本人github上的代碼 點(diǎn)擊這里進(jìn)入源代碼
在UICollectionViewFlowLayout里面實(shí)現(xiàn)的代碼是沒(méi)有依賴和耦合性的,如果項(xiàng)目需要可以直接導(dǎo)入修改layout就行了
collectionview頭部漂浮效果.gif
介紹UICollectionView的頭部的基本用法
#UICollectionView的頭部視圖也需要注冊(cè)
//注冊(cè)頭部視圖
[self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([JHHeaderReusableView class]) bundle:nil]
forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeaderID];
#注意: 這里的JHHeaderReusableView 是我自定義的頭部視圖的類
#頭部視圖的類自定義必須繼承UICollectionReusableView
#我上面的是通過(guò)xib 所以注冊(cè)的時(shí)候需要注意 (一般界面沒(méi)上面大的改變推薦使用xib實(shí)現(xiàn))
#下面是頭部視圖的代理方法:
#pragma mark - 頭部或者尾部視圖
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//如果是頭部視圖 (因?yàn)檫@里的kind 有頭部和尾部所以需要判斷 默認(rèn)是頭部,嚴(yán)謹(jǐn)判斷比較好)
/*
JHHeaderReusableView 頭部的類
kHeaderID 重用標(biāo)識(shí)
*/
if (kind == UICollectionElementKindSectionHeader) {
JHHeaderReusableView *headerRV = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:kHeaderID forIndexPath:indexPath];
headerRV.homeModel = self.bodyArray[indexPath.section];
return headerRV;
}else //有興趣的也可以添加尾部視圖
{
return nil;
}
}
#在JHHeaderReusableView里面實(shí)現(xiàn)你需要的頭部視圖的內(nèi)容
上面的方法已經(jīng)可以實(shí)現(xiàn)頭部視圖
下面的效果是使頭部視圖的漂浮效果
因?yàn)閏ollectionViewd的具體布局是UICollectionViewFlowLayout 決定的
所以創(chuàng)建一個(gè)JHHeaderFlowLayout繼承于UICollectionViewFlowLayout
#具體的代碼實(shí)現(xiàn)
#pragma mark - 初始化
-(instancetype)init
{
self = [super init];
if (self)
{
_naviHeight = 0.0;
}
return self;
}
/*
// 作用:返回指定區(qū)域的cell布局對(duì)象
// 什么時(shí)候調(diào)用:指定新的區(qū)域的時(shí)候調(diào)用
(<__kindof UICollectionViewLayoutAttributes *> iOS9之后的泛型 )
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
*/
/** iOS9 之前的寫法 作用第24行代碼有寫*/
//UICollectionViewLayoutAttributes：我稱它為collectionView中的item（包括cell和header、footer這些）的《結(jié)構(gòu)信息》
- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect
{
//截取到父類所返回的數(shù)組（里面放的是當(dāng)前屏幕所能展示的item的結(jié)構(gòu)信息），并轉(zhuǎn)化成不可變數(shù)組
NSMutableArray *superArray = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
//創(chuàng)建存索引的數(shù)組笛谦，無(wú)符號(hào)（正整數(shù)），無(wú)序（不能通過(guò)下標(biāo)取值），不可重復(fù)（重復(fù)的話會(huì)自動(dòng)過(guò)濾）
NSMutableIndexSet *noneHeaderSections = [NSMutableIndexSet indexSet];
//遍歷superArray，得到一個(gè)當(dāng)前屏幕中所有的section數(shù)組
for (UICollectionViewLayoutAttributes *attributes in superArray)
{
//如果當(dāng)前的元素分類是一個(gè)cell衔蹲，將cell所在的分區(qū)section加入數(shù)組录语，重復(fù)的話會(huì)自動(dòng)過(guò)濾
if (attributes.representedElementCategory == UICollectionElementCategoryCell)
{
[noneHeaderSections addIndex:attributes.indexPath.section];
}
}
//遍歷superArray，將當(dāng)前屏幕中擁有的header的section從數(shù)組中移除粗截，得到一個(gè)當(dāng)前屏幕中沒(méi)有header的section數(shù)組
//正常情況下，隨著手指往上移捣炬，header脫離屏幕會(huì)被系統(tǒng)回收而cell尚在熊昌，也會(huì)觸發(fā)該方法
for (UICollectionViewLayoutAttributes *attributes in superArray)
{
//如果當(dāng)前的元素是一個(gè)header，將header所在的section從數(shù)組中移除
if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader])
{
[noneHeaderSections removeIndex:attributes.indexPath.section];
}
}
//遍歷當(dāng)前屏幕中沒(méi)有header的section數(shù)組
[noneHeaderSections enumerateIndexesUsingBlock:^(NSUInteger idx, BOOL *stop){
//取到當(dāng)前section中第一個(gè)item的indexPath
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:idx];
//獲取當(dāng)前section在正常情況下已經(jīng)離開(kāi)屏幕的header結(jié)構(gòu)信息
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:indexPath];
//如果當(dāng)前分區(qū)確實(shí)有因?yàn)殡x開(kāi)屏幕而被系統(tǒng)回收的header
if (attributes)
{
//將該header結(jié)構(gòu)信息重新加入到superArray中去
[superArray addObject:attributes];
}
}];
//遍歷superArray湿酸，改變header結(jié)構(gòu)信息中的參數(shù)婿屹，使它可以在當(dāng)前section還沒(méi)完全離開(kāi)屏幕的時(shí)候一直顯示
for (UICollectionViewLayoutAttributes *attributes in superArray) {
//如果當(dāng)前item是header
if ([attributes.representedElementKind isEqualToString:UICollectionElementKindSectionHeader])
{
//得到當(dāng)前header所在分區(qū)的cell的數(shù)量
NSInteger numberOfItemsInSection = [self.collectionView numberOfItemsInSection:attributes.indexPath.section];
//得到第一個(gè)item的indexPath
NSIndexPath *firstItemIndexPath = [NSIndexPath indexPathForItem:0 inSection:attributes.indexPath.section];
//得到最后一個(gè)item的indexPath
NSIndexPath *lastItemIndexPath = [NSIndexPath indexPathForItem:MAX(0, numberOfItemsInSection-1) inSection:attributes.indexPath.section];
//得到第一個(gè)item和最后一個(gè)item的結(jié)構(gòu)信息
UICollectionViewLayoutAttributes *firstItemAttributes, *lastItemAttributes;
if (numberOfItemsInSection>0)
{
//cell有值，則獲取第一個(gè)cell和最后一個(gè)cell的結(jié)構(gòu)信息
firstItemAttributes = [self layoutAttributesForItemAtIndexPath:firstItemIndexPath];
lastItemAttributes = [self layoutAttributesForItemAtIndexPath:lastItemIndexPath];
}else
{
//cell沒(méi)值,就新建一個(gè)UICollectionViewLayoutAttributes
firstItemAttributes = [UICollectionViewLayoutAttributes new];
//然后模擬出在當(dāng)前分區(qū)中的唯一一個(gè)cell推溃，cell在header的下面昂利，高度為0，還與header隔著可能存在的sectionInset的top
CGFloat y = CGRectGetMaxY(attributes.frame)+self.sectionInset.top;
firstItemAttributes.frame = CGRectMake(0, y, 0, 0);
//因?yàn)橹挥幸粋€(gè)cell铁坎，所以最后一個(gè)cell等于第一個(gè)cell
lastItemAttributes = firstItemAttributes;
}
//獲取當(dāng)前header的frame
CGRect rect = attributes.frame;
//當(dāng)前的滑動(dòng)距離 + 因?yàn)閷?dǎo)航欄產(chǎn)生的偏移量蜂奸，默認(rèn)為64（如果app需求不同，需自己設(shè)置）
CGFloat offset = self.collectionView.contentOffset.y + _naviHeight;
//第一個(gè)cell的y值 - 當(dāng)前header的高度 - 可能存在的sectionInset的top
CGFloat headerY = firstItemAttributes.frame.origin.y - rect.size.height - self.sectionInset.top;
//哪個(gè)大取哪個(gè)硬萍，保證header懸停
//針對(duì)當(dāng)前header基本上都是offset更加大扩所，針對(duì)下一個(gè)header則會(huì)是headerY大，各自處理
CGFloat maxY = MAX(offset,headerY);
//最后一個(gè)cell的y值 + 最后一個(gè)cell的高度 + 可能存在的sectionInset的bottom - 當(dāng)前header的高度
//當(dāng)當(dāng)前section的footer或者下一個(gè)section的header接觸到當(dāng)前header的底部朴乖，計(jì)算出的headerMissingY即為有效值
CGFloat headerMissingY = CGRectGetMaxY(lastItemAttributes.frame) + self.sectionInset.bottom - rect.size.height;
//給rect的y賦新值祖屏，因?yàn)樵谧詈笙У呐R界點(diǎn)要跟誰(shuí)消失助赞，所以取小
rect.origin.y = MIN(maxY,headerMissingY);
//給header的結(jié)構(gòu)信息的frame重新賦值
attributes.frame = rect;
//如果按照正常情況下,header離開(kāi)屏幕被系統(tǒng)回收，而header的層次關(guān)系又與cell相等袁勺，如果不去理會(huì)雹食，會(huì)出現(xiàn)cell在header上面的情況
//通過(guò)打印可以知道cell的層次關(guān)系z(mì)Index數(shù)值為0，我們可以將header的zIndex設(shè)置成1期丰，如果不放心群叶，也可以將它設(shè)置成非常大，這里隨便填了個(gè)7
attributes.zIndex = 7;
}
}
//轉(zhuǎn)換回不可變數(shù)組咐汞，并返回
return [superArray copy];
}
//return YES;表示一旦滑動(dòng)就實(shí)時(shí)調(diào)用上面這個(gè)layoutAttributesForElementsInRect:方法
- (BOOL) shouldInvalidateLayoutForBoundsChange:(CGRect)newBound
{
return YES;
}
UICollectionView是一個(gè)很強(qiáng)大的控件,還有很多強(qiáng)大的功能等著被挖掘, 希望在學(xué)習(xí)的道路上可以一起跟大牛的余香找點(diǎn)感覺(jué) 嘻嘻....
具體代碼點(diǎn)擊后面 點(diǎn)擊此處跳轉(zhuǎn)到github源碼
如果覺(jué)得不錯(cuò)或者可以用到 請(qǐng)star一下
如果覺(jué)得還有不好的地方,請(qǐng)?zhí)岢鰧氋F的建議
在編程的道路上,如果愛(ài),請(qǐng)深愛(ài)~
this article author : 會(huì)跳舞的獅子 如需轉(zhuǎn)載請(qǐng)注明原文地址 謝謝~!
