UICollectionView SectionHeader悬浮

写在前面

这一系列文章是最近写的一款简单的音乐播放器中涉及到的一些比较实用的技术,希望能对大家的开发提供帮助,这是播放器的Github地址。


自定义UICollectionViewFlowLayout

关于UICollectionView,业务中还是会很经常用到的,一般app的首页都会采用UICollectionView来定制,它灵活度高,使用起来也不是很麻烦,还可以实现很多很炫酷的效果,这篇文章就是讲的如何使UICollectionView的某一个SectionHeader能够实现悬浮的效果。这是效果图:


其实如果想让UICollectionView的所有SectionHeader都能悬浮,那很简单,只要设置FlowLayout的sectionHeadersPinToVisibleBounds为true就OK了,但这仅在iOS9中才支持这种设置,

let layout = UICollectionViewFlowLayout()
layout.sectionHeadersPinToVisibleBounds = true

那如果我们的系统需要适配之前的iOS版本,又或者我们仅仅需要让某一个SectionHeader支持悬浮呢?这时候就需要我们自定义layout了:

let _naviHeight : CGFloat = 0
// 需要保持悬浮的sectionIndex
let pinSectionIndex = 2

class FindMusicCollectionLayout: UICollectionViewFlowLayout, UICollectionViewDelegateFlowLayout {

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        // 获取父类返回的所有item的layout信息
        
        var superArray = NSArray(array: super.layoutAttributesForElementsInRect(rect)!, copyItems: true) as! [UICollectionViewLayoutAttributes]
        
        let indexPath = NSIndexPath.init(forItem: 0, inSection: pinSectionIndex)
        // 获取当前section在正常情况下已经离开屏幕的header的信息
        let attributes = self.layoutAttributesForSupplementaryViewOfKind(UICollectionElementKindSectionHeader, atIndexPath: indexPath)
        
        if let attributes = attributes {
            superArray.append(attributes)
        }
        
        // 遍历superArray的sectionHeader信息,使它可以在当前section还没完全离开屏幕的时候一直显示
        for attributes in superArray {
            
            if attributes.representedElementKind == UICollectionElementKindSectionHeader && attributes.indexPath.section == pinSectionIndex {
                // 得到当前header所在分区的cell的数量
                let numberOfItemsInSection = self.collectionView!.numberOfItemsInSection(attributes.indexPath.section)
                // 得到第一个item的indexPath
                let firstItemIndexPath = NSIndexPath.init(forItem: 0, inSection: attributes.indexPath.section)
                
                var firstItemAttributes : UICollectionViewLayoutAttributes!
                
                if numberOfItemsInSection > 0 {
                    firstItemAttributes = self.layoutAttributesForItemAtIndexPath(firstItemIndexPath)
                } else {
                    firstItemAttributes = UICollectionViewLayoutAttributes()
                    let y = CGRectGetMaxY(attributes.frame) + self.sectionInset.top
                    firstItemAttributes.frame = CGRectMake(0, y, 0, 0)
                }
                
                var rect = attributes.frame
                
                let offset = self.collectionView!.contentOffset.y + _naviHeight
                
                let headerY = firstItemAttributes.frame.origin.y - rect.height - self.sectionInset.top
                // 设置section的Y值,确保section悬浮在屏幕上方
                let maxY = max(offset, headerY)
                
                rect.y = maxY
                
                attributes.frame = rect
                // 这里的zIndex需要大于10,不然会被别的attributes覆盖掉
                attributes.zIndex = 20
            }
        }
        return superArray
    }
    
    override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
        return true
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,946评论 4 60
  • 我们都想更好爱和被爱,可是付出再多,似乎仍然还差那么一点点。《爱的五种语言》告诉我们掌握五种爱的语言,更好地表达爱...
    礼小礼er阅读 217评论 0 2
  • 人总是会被禁锢在自己的思想里,这话一点不错。小时候我一直对完美的心理状态有个执念,那就是一个纯粹的人应该有...
    李童年阅读 633评论 0 2
  • 马崴坡自古是送情人远行之地。一位天之骄子、一位落尘凡女、本老死也无交集、可她嫁了他的儿子、他爱上了自己的儿媳、...
    微佾阅读 246评论 0 0