前景
公司项目内有个小效果，页面内有不同样式的分组，其中包含普通列表和瀑布流，切纵向滑动需要将组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..<sections {
if let sectionInsets = self.delegate?.pinCollectionLayout_sectionInset(at: i) {
left = sectionInsets.left
} else {
left = ((collectionView?.width ?? ScreenWidth) - maxWidth) / 2
}
let column = self.delegate?.pinCollectionLayout_column(at: i) ?? 1
var top: CGFloat = 0
if i > 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..<rows {
let indexPath = IndexPath.init(row: j, section: i)
if let att = self.layoutAttributesForItem(at: indexPath) {
results.append(att)
}
}
if let att = self.layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, at: indexPath) {
results.append(att)
}
}
}
}
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> 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)
}
}
