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
    }
}