UITableView的plainstyle，section的header可以自動懸停，footer自動貼底，TableViewHeader可以自動劃出屏幕。而UICollectionView不能設(shè)置header,UICollectionView也沒有plain模式。
因?yàn)橛行﹫D片排版不太適合用UITableView，那么如何用UICollectionView 做出既包含header，sectionHeader又可以懸停的效果呢？
image.png
方法一（適合items結(jié)構(gòu)簡單；也適合header上可以切換tab，tab展示數(shù)據(jù)比較類似,切換tab時(shí)只用刷新數(shù)據(jù)源就行）
- 思想：設(shè)置兩個(gè)
section。第一組的section的footer來充當(dāng)整個(gè)UICollectionView的header效果劃出；然后設(shè)置第二組的header，設(shè)置正常的items，UICollectionView的flowLayout的sectionHeadersPinToVisibleBounds屬性設(shè)置為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中的其中一個(gè)Cell中包裹多個(gè)VC，多個(gè)VC之間的結(jié)構(gòu)大不相同，需要處理UITableView的手勢沖突問題，實(shí)現(xiàn)復(fù)雜，但是結(jié)構(gòu)清晰。類似這種，切換tab，兩邊的結(jié)構(gòu)完全不同。這種方式比較麻煩，這里只提供一種思路，demo下次再說。
5AC662BD1F43A8CD360DB0CE7FE50A89.png
