Adding an Image to UICollection Header Swift - swift

Question

I'm looking to implement an image within the header of a collection view. This is the code that I have so far, but no header appears when I test. Am I missing something?
func collectionView(_ collectionView: UICollectionView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView()
let image = UIImageView()
image.frame = CGRect(x: collectionView.frame.width - 10 , y: 0, width: 20, height: 20)
image.image = UIImage.init(named: "trophyCase")
view.addSubview(image)
return view
}

Answer 1

UICollectionViewDelegate doesn't offer such a method as viewForHeaderInSection
Instead you can use viewForSupplementaryElementOfKind method of UICollectionViewDataSource
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
guard kind == UICollectionView.elementKindSectionHeader else {
fatalError("Unrecognized element of kind: \(kind)")
}
let view: ReusableHeaderView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kind, for: indexPath) as! ReusableHeaderView
view.imageView.image = UIImage.init(named: "trophyCase")
view.imageView.frame = CGRect(x: collectionView.frame.width - 10 , y: 0, width: 20, height: 20)
return view
}
You are also required to register elementKindSectionHeader
collectionView.register(ReusableHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: UICollectionView.elementKindSectionHeader)
Following will be your ReusableHeaderView
class ReusableHeaderView: UICollectionReusableView {
let imageView = UIImageView()
override init(frame: CGRect) {
super.init(frame: frame)
self.setupUI()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.setupUI()
}
private func setupUI() {
self.addSubview(imageView)
// Instead of settings imageView.frame, add following to use autolayout constraints
self.imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
imageView.topAnchor.constraint(equalTo: self.topAnchor),
imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10.0),
imageView.widthAnchor.constraint(equalToConstant: 20.0),
imageView.heightAnchor.constraint(equalToConstant: 20.0)
])
}
}

Answer 2

Create a view subclassing UICollectionReusableView:
class HeaderView: UICollectionReusableView {
let imageView: UIImageView = {
let iv = UIImageView(image: /*put your image here*/)
iv.clipsToBounds = true
iv.contentMode = .scaleAspectFill
return iv
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
addSubview(imageView)
imageView.fillSuperview() // Check extension below
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Then in your ViewController, first create a reuseIdentifier for your view:
fileprivate let headerId = "headerId"
After that register your custom view in collectionView(lets do it in viewDidLoad):
override func viewDidLoad() {
super.viewDidLoad()
collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId)
}
Declare your custom view as optional in your vc:
var headerView: HeaderView?
Then override viewForSupplementaryElementOfKind method of the collectionView to initialize headerView:
override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: headerId, for: indexPath) as? HeaderView
return headerView!
}
Then implement another collectionView method to give your headerView a size:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return .init(width: view.frame.width, height: 340) // edit width and height as you please.
}
Extension for fillSuperView used in initialization of custom view:
extension UIView {
func fillSuperview(withPadding padding: UIEdgeInsets = .zero) {
translatesAutoresizingMaskIntoConstraints = false
if let superview = superview {
topAnchor.constraint(equalTo: superview.topAnchor, constant: padding.top).isActive = true
leftAnchor.constraint(equalTo: superview.leftAnchor, constant: padding.left).isActive = true
rightAnchor.constraint(equalTo: superview.rightAnchor, constant: -padding.right).isActive = true
bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: -padding.bottom).isActive = true
}
}
}
Now it should work as header view for your collectionView.