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
