iOS UICollectionView header吸顶悬停

UITableView 的plainstyle，section的header可以自动悬停，footer自动贴底，TableViewHeader可以自动划出屏幕。而UICollectionView不能设置header, UICollectionView也没有plain模式。

因为有些图片排版不太适合用UITableView，那么如何用UICollectionView 做出既包含header，sectionHeader又可以悬停的效果呢？

image.png

方法一（适合items结构简单；也适合header上可以切换tab，tab展示数据比较类似,切换tab时只用刷新数据源就行）

• 思想：设置两个section。第一组的section的footer来充当整个UICollectionView的header效果划出；然后设置第二组的header，设置正常的items，UICollectionView 的flowLayout的sectionHeadersPinToVisibleBounds属性设置为true则有悬停效果。

// Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView).
    @available(iOS 9.0, *)
    open var sectionHeadersPinToVisibleBounds: Bool

• demo(代码很简单，都贴出来了，方法非常取巧):

import UIKit

class ViewController: UIViewController {
    
    private let itermSpace: CGFloat = 5
    lazy private var flowLayout: UICollectionViewFlowLayout = {
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.sectionInset = UIEdgeInsets.init(top: itermSpace, left: itermSpace, bottom: itermSpace, right: itermSpace)
        flowLayout.minimumInteritemSpacing = itermSpace
        flowLayout.minimumLineSpacing = itermSpace
        flowLayout.sectionHeadersPinToVisibleBounds = true
        return flowLayout
    }()
    
    lazy private var collectionView: UICollectionView = {
        let colletionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: flowLayout)
        return colletionView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 200))
        headerView.backgroundColor = UIColor.green
        
        collectionView.register(TPPAddReviewCell.classForCoder(), forCellWithReuseIdentifier: "TPPAddReviewCell")
        collectionView.register(TPPCollectionReusableViewHeader.classForCoder(), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "TPPCollectionReusableViewHeader")
        collectionView.register(TPPCollectionReusableViewFooter.classForCoder(), forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "TPPCollectionReusableViewFooter")
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.frame = view.bounds
        view.addSubview(collectionView)
    }
}

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return 0
        }
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TPPAddReviewCell", for: indexPath) as! TPPAddReviewCell
        return cell
    }
    
    
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }
    
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        if section == 1 {
            return CGSize(width: UIScreen.main.bounds.width, height: 50)
        }
        return CGSize.zero
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        if section == 0 {
            return CGSize(width: UIScreen.main.bounds.width, height: 200)
        }
        return CGSize.zero
    }
    
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionHeader {
            let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TPPCollectionReusableViewHeader", for: indexPath) as! TPPCollectionReusableViewHeader
            return view
        } else {
            let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TPPCollectionReusableViewFooter", for: indexPath) as! TPPCollectionReusableViewFooter
            return view
        }
        
    }
}


class TPPCollectionReusableViewHeader: UICollectionReusableView {
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
        configerUI()
    }
    
    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configerUI() {
        backgroundColor = UIColor.yellow
    }
}


class TPPCollectionReusableViewFooter: UICollectionReusableView {
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
        configerUI()
    }
    
    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configerUI() {
        backgroundColor = UIColor.orange
    }
}


class TPPAddReviewCell: UICollectionViewCell {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureUI()
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureUI() {
        contentView.backgroundColor = UIColor.red
    }
    
}

• 效果：

  
  
  collection.gif

方法二
思想：UITableView嵌套UITableView。在外层UITableView中的其中一个Cell中包裹多个VC，多个VC之间的结构大不相同，需要处理UITableView的手势冲突问题，实现复杂，但是结构清晰。类似这种，切换tab，两边的结构完全不同。这种方式比较麻烦，这里只提供一种思路，demo下次再说。

5AC662BD1F43A8CD360DB0CE7FE50A89.png