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
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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