Swift3.0 - UICollectionView分组悬停

©版权声明:本文为Andy_wangpeng『网络搜集整理』,未经允许不得转载。
如需转载请注明版权

      程序用到了CollectionView分组悬停效果。在此也顺便学习一下:大家都知道在Tableview列表中的头部视图是可以悬停的。这个效果是很常用的。那么CollectionView视图如何实现头部悬停呢???
     其实就是---->UICollectionViewFlowLayout他咯,因为所有的CollectionView视图布局都是通过它来产生各种效果的 包括__瀑布流、环形、 矩形__等效果,那么我们就重写这个类。


(悬停不动了的效果图)

效果图


CollectionView的创建

    fileprivate lazy var collectionView: UICollectionView = {
        let layOut = CollectionViewFlowlayout()
        let width = (kScreenW-30)/2
        layOut.itemSize = CGSize(width: width, height: width*0.7)
        layOut.headerReferenceSize  = CGSize(width: kScreenW, height: 50)
        //section之间的间隔
        layOut.minimumInteritemSpacing = 0.0;
        //竖向cell之间的距离
        layOut.minimumLineSpacing = 10.0;
        let collectionView = UICollectionView(frame:  CGRect(x: 0, y: 0, width: kScreenW, height: kScreenH-64), collectionViewLayout: layOut)
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "kanstart")
        ###(这是加载组视图的重点)collectionView.register( UINib(nibName: "CollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.backgroundColor = UIColor.clear
        
        layOut.sectionInset = UIEdgeInsetsMake(10, 10, 0, 10);
        //整一个 collectionView的边距
        
        return collectionView;
    }()

自定义CollectionViewFlowlayout

import UIKit
class CollectionViewFlowlayout: UICollectionViewFlowLayout {
    var naviHeight:CGFloat=0.0//默认分组停放高度
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        //UICollectionViewLayoutAttributes:我称它为collectionView中的item(包括cell和header、footer这些)的结构信息
        //截取到父类所返回的数组(里面放的是当前屏幕所能展示的item的结构信息),并转化成不可变数组
        var superArray = super.layoutAttributesForElements(in: rect)
        //创建存索引的数组,无符号(正整数),无序(不能通过下标取值),不可重复(重复的话会自动过滤)
        let noneHeaderSections=NSMutableIndexSet();
        for  attributes:UICollectionViewLayoutAttributes in superArray! {
            //如果当前的元素分类是一个cell,将cell所在的分区section加入数组,重复的话会自动过滤
            if attributes.representedElementCategory == .cell{
                noneHeaderSections.add(attributes.indexPath.section)
            }
        }
        //遍历superArray,将当前屏幕中拥有的header的section从数组中移除,得到一个当前屏幕中没有header的section数组
        //正常情况下,随着手指往上移,header脱离屏幕会被系统回收而cell尚在,也会触发该方法
        for attributes:UICollectionViewLayoutAttributes in superArray! {
            //如果当前的元素是一个header,将header所在的section从数组中移除
            if attributes.representedElementKind == UICollectionElementKindSectionHeader {
                noneHeaderSections.remove(attributes.indexPath.section)
            }
        }
        //遍历当前屏幕中没有header的section数组
        noneHeaderSections .enumerate({ (idx, obj) -> Void in
            //取到当前section中第一个item的indexPath
            let indexPath = NSIndexPath(item: 0, section: idx)
            let attributes=self.layoutAttributesForSupplementaryView(ofKind: UICollectionElementKindSectionHeader, at: indexPath as IndexPath)
            //如果当前分区确实有因为离开屏幕而被系统回收的header
            if attributes != nil {
                //将该header结构信息重新加入到superArray中去
                superArray?.append(attributes!)
            }
        })
        //遍历superArray,改变header结构信息中的参数,使它可以在当前section还没完全离开屏幕的时候一直显示
        for  attributes:UICollectionViewLayoutAttributes in superArray! {
            //如果当前item是header
            if attributes.representedElementKind == UICollectionElementKindSectionHeader {
                //得到当前header所在分区的cell的数量
                let numberOfItemsInSection=self.collectionView!.numberOfItems(inSection: attributes.indexPath.section)
                //取到当前section中第一个item的indexPath
                let firstItemIndexPath = NSIndexPath(item: 0, section: attributes.indexPath.section)
                //得到最后一个item的indexPath
                let lastItemIndexPath = NSIndexPath(item: max(0, numberOfItemsInSection-1), section: attributes.indexPath.section)
                //得到第一个item和最后一个item的结构信息
                var firstItemAttributes, lastItemAttributes:UICollectionViewLayoutAttributes
                if numberOfItemsInSection>0 {
                    //cell有值,则获取第一个cell和最后一个cell的结构信息
                    firstItemAttributes=self.layoutAttributesForItem(at: firstItemIndexPath as IndexPath)!
                    lastItemAttributes=self.layoutAttributesForItem(at: lastItemIndexPath as IndexPath)!
                }else{
                    //cell没值,就新建一个UICollectionViewLayoutAttributes
                    firstItemAttributes=UICollectionViewLayoutAttributes()
                    //然后模拟出在当前分区中的唯一一个cell,cell在header的下面,高度为0,还与header隔着可能存在的sectionInset的top
                    let y=attributes.frame.maxY + sectionInset.top
                    firstItemAttributes.frame=CGRect(x: 0, y: y, width: 0, height: 0)
                    //因为只有一个cell,所以最后一个cell等于第一个cell
                    lastItemAttributes=firstItemAttributes;
                }
                //获取当前header的frame
                var rect=attributes.frame;
                //当前的滑动距离 + 因为导航栏产生的偏移量,默认为0(如果app需求不同,需自己设置)
                let offset=(self.collectionView?.contentOffset.y)! + naviHeight
                //第一个cell的y值 - 当前header的高度 - 可能存在的sectionInset的top
                let headerY=firstItemAttributes.frame.origin.y-rect.size.height-sectionInset.top
                //哪个大取哪个,保证header悬停
                //针对当前header基本上都是offset更加大,针对下一个header则会是headerY大,各自处理
                let maxY=max(offset, headerY)
                //最后一个cell的y值 + 最后一个cell的高度 + 可能存在的sectionInset的bottom - 当前header的高度
                //当当前section的footer或者下一个section的header接触到当前header的底部,计算出的headerMissingY即为有效值
                let headerMissingY = lastItemAttributes.frame.maxY + 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
    }
    //return true;表示一旦滑动就实时调用上面这个layoutAttributesForElementsInRect:方法
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • 参考原文:http://c0ming.me/different-section-background-color/...
    大脸猫121阅读 3,370评论 7 2
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,486评论 16 22
  • 创业是很多人的梦想,多少人为了理想和不甘选择了创业来实现自我价值,我就是其中一个。 创业后,我由女人变成了超人,什...
    亦宝宝阅读 1,802评论 4 1
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,551评论 0 11
  • 可爱进取,孤独成精。努力飞翔,天堂翱翔。战争美好,孤独进取。胆大飞翔,成就辉煌。努力进取,遥望,和谐家园。可爱游走...
    赵原野阅读 2,715评论 1 1