美文网首页iOS归纳
iOS实现UICollectionView顶部header悬浮效

iOS实现UICollectionView顶部header悬浮效

作者: _菩提本无树_ | 来源:发表于2020-02-25 10:59 被阅读0次
    //
    //  DDCollectionViewFlowLayoutOverRide.h
    //  AdvancePlan
    //
    //  Created by 董德帅 on 2020/2/21.
    //  Copyright © 2020 www.dong.com 董德帅. All rights reserved.
    //
    
    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface DDCollectionViewFlowLayoutOverRide : UICollectionViewFlowLayout
    
    @end
    
    NS_ASSUME_NONNULL_END
    

    //
    //  DDCollectionViewFlowLayoutOverRide.m
    //  AdvancePlan
    //
    //  Created by 董德帅 on 2020/2/21.
    //  Copyright © 2020 www.dong.com 董德帅. All rights reserved.
    //
    
    #import "DDCollectionViewFlowLayoutOverRide.h"
    
    @implementation DDCollectionViewFlowLayoutOverRide
    {
        NSInteger leastSectionNum;
    }
    - (instancetype)init
    {
        self = [super init];
        if (self) {
            leastSectionNum = -1;
        }
        return self;
    }
    
    - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
        
        //获取所有的Attributes
        NSMutableArray *allLayoutAttributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
        
        //当前界面最顶部的cell所属的section
        if (leastSectionNum == -1) {
            leastSectionNum = 0;
            return allLayoutAttributes;
        }
        leastSectionNum = [self getLeastSectionNum];
        
        //判断当前顶部的section的header是否被回收
        BOOL hadAttribute = 0;
        for (UICollectionViewLayoutAttributes *attribute in allLayoutAttributes) {
            if (attribute.indexPath.section == leastSectionNum && [attribute.representedElementKind isEqualToString:UICollectionElementKindSectionHeader]) {
                hadAttribute = YES;
                break;
            }
        }
    
        if (!hadAttribute) {
            //顶部section的header被回收,获取其结构再次添加
            UICollectionViewLayoutAttributes *headerAttribute = [self layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:[NSIndexPath indexPathForItem:0 inSection:leastSectionNum]];
            if (headerAttribute) {
                [allLayoutAttributes addObject:headerAttribute];
            }
        }
        
        //遍历superArray,改变header结构信息中的参数,使它可以在当前section还没完全离开屏幕的时候一直显示
        for (UICollectionViewLayoutAttributes *attributes in allLayoutAttributes) {
            //如果当前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];
                UICollectionViewLayoutAttributes *firstItemAttributes, *lastItemAttributes;
                
                //得到第一个item和最后一个item的结构信息
                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;
                //第一个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 = 10;
    
            }
        }
    
        return [allLayoutAttributes copy];
    }
    
    //获取顶部的section
    - (NSInteger)getLeastSectionNum{
        
        NSInteger  m = self.collectionView.numberOfSections;
        for (NSIndexPath *indexPath in self.collectionView.indexPathsForVisibleItems) {
            if (indexPath.section <= m) {
                m = indexPath.section;
            }
        }
        return m;
        
    }
    
    //页面布局
    - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
    {
        return YES;
    }
    @end
    

    借鉴XLPlainFlowLayout,优化部分逻辑

    2020,04,06补充,建议使用XLPlainFlowLayout,这个有点小问题,还没想到解决办法 ̄□ ̄||/:,@f

    相关文章

      网友评论

        本文标题:iOS实现UICollectionView顶部header悬浮效

        本文链接:https://www.haomeiwen.com/subject/hvjzqhtx.html