How to implement content view above UICollectionView - ios

Question

I am trying to get the UICollectionView, and UIView above it, to scroll together. I've done a couple of diagrams (before and after scrolling) to show what I'm trying to achieve.
Before scrolling
After scrolling
Currently, I have only been able to get the UICollectionView to scroll within its own section of the screen. I've also tried wrapping both the UIView and UICollectionView into a UIScrollView, although then the UICollectionView doesn't appear on screen.
What's the best way to implement this layout?

Answer 1

Here is a collection view with a section header that scrolls when the collection view scrolls.. If you need a parallax header (stretchy header effect), then there are tons of tutorials online for that..
import UIKit
class Header : UICollectionReusableView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.green
}
#available(iOS, unavailable)
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
private var flowLayout: UICollectionViewFlowLayout!
private var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
self.flowLayout = UICollectionViewFlowLayout()
self.flowLayout.scrollDirection = .vertical;
self.flowLayout.minimumInteritemSpacing = 15;
self.flowLayout.minimumLineSpacing = 15;
self.collectionView = UICollectionView(frame: .zero, collectionViewLayout: self.flowLayout)
self.collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "default")
self.collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "default")
self.collectionView.register(Header.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header")
self.collectionView.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 0.5)
self.collectionView.dataSource = self
self.collectionView.delegate = self
self.collectionView.reloadData()
self.view.addSubview(self.collectionView)
self.collectionView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.collectionView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
self.collectionView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
self.collectionView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
self.collectionView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
])
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "default", for: indexPath)
cell.contentView.backgroundColor = UIColor.white
cell.contentView.layer.borderColor = UIColor.red.cgColor
cell.contentView.layer.borderWidth = 1.0
return cell
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if indexPath.section == 0 && kind == UICollectionElementKindSectionHeader {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "header", for: indexPath)
return header
}
return collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "default", for: indexPath)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if section == 0 {
return CGSize(width: collectionView.bounds.width, height: 200.0)
}
return .zero
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let layout = collectionViewLayout as! UICollectionViewFlowLayout
let insets = self.collectionView(collectionView, layout: layout, insetForSectionAt: indexPath.section)
var width = collectionView.bounds.width - 15.0
width -= insets.left + insets.right
return CGSize(width: floor(width), height: 100.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0)
}
}