自定义layout实现纵向滚动置顶效果

前景

公司项目内有个小效果，页面内有不同样式的分组，其中包含普通列表和瀑布流，切纵向滑动需要将组header置顶，这里的置顶有可能是两种view，一个是滑动到第几组之后有一个常驻置顶，以及之后每组内容的header置顶， 简单画了一个示意图
下图中，红色位置是sectionHeader,需要根据滑动过程中动态置顶，
绿色框内容是当滑动到位置后常驻置顶的
黄色框就是不同分组内的内容

image.png

下面直接上代码
PinCollectionLayout.swift

protocol PinCollectionLayoutDelegate: NSObjectProtocol {
    func pinCollectionLayout_scrollDidScroll(section: Int)
    
    func pinCollectionLayout_itemSize(at indexPath: IndexPath) -> CGSize?
    func pinCollectionLayout_horItemSpacing(at indexPath: IndexPath) -> CGFloat?
    func pinCollectionLayout_verItemSpacing(at indexPath: IndexPath) -> CGFloat?
    func pinCollectionLayout_sectionInset(at section: Int) -> UIEdgeInsets
    func pinCollectionLayout_column(at section: Int) -> Int
}

class PinCollectionLayout: UICollectionViewFlowLayout {
    var pinSection = 0
    var maxWidth = UIDevice.isIPad() ? Scale(560) : ScreenWidth
    private var left: CGFloat = 0
    weak var delegate: PinCollectionLayoutDelegate? = nil
    private var pinAttribute: UICollectionViewLayoutAttributes?
    private var results: [UICollectionViewLayoutAttributes] = []
    private var lastPinMaxBoundryY: CGFloat = 0
    private var lastPinMinBoundryY: CGFloat = 0
    private var sectionHeights: [[CGFloat]] = []
    private var sectionAttributes: [UICollectionViewLayoutAttributes?] = []
    //边界发生变化时是否重新布局（视图滚动的时候也会调用）
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
    
    
    override func prepare() {
        super.prepare()
        results.removeAll()
        let maxWidth = self.maxWidth > 0 ? self.maxWidth : (collectionView?.width ?? ScreenWidth)
        left = ((collectionView?.width ?? ScreenWidth) - maxWidth) / 2
        if let sections = collectionView?.numberOfSections {
            if sectionAttributes.isEmpty {
                sectionAttributes = Array.init(repeating: nil, count: sections)
            }
            sectionHeights = Array.init(repeating: [], count: sections)
            for i in 0.. 0 {
                    top = sectionHeights[i-1].max() ?? 0
                    if let sectionInsets = self.delegate?.pinCollectionLayout_sectionInset(at: i - 1) {
                        top += sectionInsets.bottom
                    }
                }
                let indexPath = IndexPath.init(row: 0, section: i)
                if let att = super.layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, at: indexPath) {
                    top += att.frame.size.height
                    if let sectionInsets = self.delegate?.pinCollectionLayout_sectionInset(at: i) {
                        top += sectionInsets.top
                    }
                }
                sectionHeights[i] = Array.init(repeating: top, count: column)
                if let rows = collectionView?.numberOfItems(inSection: i) {
                    for j in 0.. UICollectionViewLayoutAttributes? {
        let column = self.delegate?.pinCollectionLayout_column(at: indexPath.section) ?? 1
        let index = indexPath.row % column
        let cellSize = self.delegate?.pinCollectionLayout_itemSize(at: indexPath) ?? itemSize
        let maxWidth = self.maxWidth > 0 ? self.maxWidth : (collectionView?.width ?? ScreenWidth)
        var leftSpace: CGFloat = 0
        if let sectionInsets = self.delegate?.pinCollectionLayout_sectionInset(at: indexPath.section) {
            leftSpace = sectionInsets.left
        } else {
            leftSpace = ((collectionView?.width ?? ScreenWidth) - maxWidth) / 2
        }
        
        
        if left + cellSize.width > (leftSpace + maxWidth) {
            left = leftSpace
        }
       
        let spacing: CGFloat = self.delegate?.pinCollectionLayout_horItemSpacing(at: indexPath) ?? 0
        let attr = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        attr.frame = CGRectMake(left, sectionHeights[indexPath.section][index], cellSize.width, cellSize.height)
        let verSpace: CGFloat = self.delegate?.pinCollectionLayout_verItemSpacing(at: indexPath) ?? 0
        sectionHeights[indexPath.section][index] += (cellSize.height + verSpace)
        if index < column - 1 {
            left += cellSize.width + spacing
        } else {
            left += cellSize.width
        }
        return attr
    }
    
    //所有元素的位置属性
    override func layoutAttributesForElements(in rect: CGRect)
        -> [UICollectionViewLayoutAttributes]? {
            return results
    }
    
    override var collectionViewContentSize: CGSize {
        let maxHeight = self.sectionHeights.last?.max() ?? 0
        return CGSizeMake(self.collectionView?.width ?? 0, maxHeight)
    }
    
    //补充视图的布局属性(这里处理实现粘性分组头,让分组头始终处于分组可视区域的顶部)
    override func layoutAttributesForSupplementaryView(ofKind elementKind: String,
                    at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        var layoutAttributes: UICollectionViewLayoutAttributes?
        if let att = self.sectionAttributes[indexPath.section] {
            layoutAttributes = att
        } else if let l = super.layoutAttributesForSupplementaryView(ofKind: elementKind, at: indexPath) {//先从父类获取补充视图的布局属性
            layoutAttributes = l
        }
        guard let layoutAttributes = layoutAttributes else { return nil }
        
       
        //如果不是头部视图则直接返回
        if elementKind != UICollectionView.elementKindSectionHeader {
            return layoutAttributes
        }
        
        //根据section索引，获取对应的边界范围
        guard let boundaries = boundaries(forSection: indexPath.section) else {
                return layoutAttributes
            }
        guard let collectionView = collectionView else {
            return layoutAttributes
        }
        
        self.sectionAttributes[indexPath.section] = layoutAttributes

        
        //保存视图内入垂直方向的偏移量
        let contentOffsetY = collectionView.contentOffset.y
        //补充视图的frame
        var frameForSupplementaryView = layoutAttributes.frame
        
        //计算分组头垂直方向的最大最小值
        let minimum = boundaries.minimum
        let maximum = boundaries.maximum - frameForSupplementaryView.height
        
        //如果内容区域的垂直偏移量小于分组头最小的位置，则将分组头置于其最小位置
        var pinOffset: CGFloat = 0
        if indexPath.section > pinSection, let pin = self.pinAttribute {
            pinOffset = pin.frame.size.height
        }
        if contentOffsetY < minimum - pinOffset {
            frameForSupplementaryView.origin.y = minimum
            lastPinMinBoundryY = minimum

        }
        //如果内容区域的垂直偏移量大于分组头最大的位置，则将分组头置于其最大位置
        else if contentOffsetY > maximum - pinOffset {
            frameForSupplementaryView.origin.y = maximum - pinOffset - 1
            lastPinMaxBoundryY = maximum + pinOffset

        }
        //如果都不满足，则说明内容区域的垂直便宜量落在分组头的边界范围内。
        //将分组头设置为内容偏移量，从而让分组头固定在集合视图的顶部
        else {
            frameForSupplementaryView.origin.y = contentOffsetY + pinOffset - 1
            self.delegate?.pinCollectionLayout_scrollDidScroll(section: indexPath.section)
        }
        
        if indexPath.section == pinSection {
            if contentOffsetY > frameForSupplementaryView.origin.y {
                frameForSupplementaryView.origin.y = contentOffsetY
            }
            self.pinAttribute = layoutAttributes
            self.pinAttribute?.zIndex = 1000 //将置顶sectionheader放到最上层视图
        }
        //更新布局属性并返回
        let maxWidth = self.maxWidth > 0 ? self.maxWidth : collectionView.width

        frameForSupplementaryView.origin.x = (collectionView.width - maxWidth) / 2
        frameForSupplementaryView.size.width = maxWidth
        layoutAttributes.frame = frameForSupplementaryView
        return layoutAttributes
    }
    
    //根据section索引，获取对应的边界范围（返回一个元组）
    func boundaries(forSection section: Int) -> (minimum: CGFloat, maximum: CGFloat)? {
        var min:CGFloat = 0
        if section > 0 {
            min = (sectionHeights[section - 1].max() ?? 0) - headerReferenceSize.height
        }
        let max: CGFloat = (sectionHeights[section].max() ?? 0) - headerReferenceSize.height
        //返回最终的边界值
        return (minimum: min, maximum: max)
    }
    

}


extension PinCollectionLayout {
    func scrollToSection(at section: Int, animated: Bool) {
        var offset: CGFloat = 0
        if section > 0, sectionHeights.count > section {
            offset = sectionHeights[section - 1].max() ?? 0
        }
        let indexPath = IndexPath.init(row: 0, section: section)
        offset -= ((pinAttribute?.frame.size.height ?? 0))
        self.collectionView?.setContentOffset(CGPoint.init(x: 0, y: offset + 1), animated: animated)
    }
}