Adjust UICollectionView UICollectionReusableView (header) width - ios

Question

I would like to adjust collectionview header width in iPad.
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: 668, height: 44.0)
}
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 50, bottom: 0, right: 50)
}
I explicitly set the width even though it's showing headerView base on collectionView width.
Current Behaviour:
Expected:

Answer 1

Thi is sample code to do it:
declare your collection view, register cell, register header and set constraints:
class ViewController: UIViewController {
var collectionview: UICollectionView!
var cellId = "Cell"
let headerId = "myFooterView"
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
var myUIViewArr = ["1", "2", "3", "4", "5", "6", "7"]
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .black
layout.scrollDirection = .vertical
collectionview = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
collectionview.dataSource = self
collectionview.delegate = self
collectionview.register(MenuCell.self, forCellWithReuseIdentifier: cellId)
collectionview.showsVerticalScrollIndicator = false
collectionview.backgroundColor = .black
collectionview.register(MyHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId)
collectionview.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(collectionview)
collectionview.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
collectionview.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
collectionview.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
collectionview.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
}
}
now set collectionView delegate and datasource method:
extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return myUIViewArr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionview.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! MenuCell
cell.contentView.backgroundColor = .red
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
layout.scrollDirection = .vertical
let cellInRow = 3
let totalSpace = layout.sectionInset.left + layout.sectionInset.right + (layout.minimumInteritemSpacing * CGFloat(cellInRow - 1))
let mySize = collectionView.bounds.width - totalSpace
let size = mySize / CGFloat(cellInRow)
return CGSize(width: size, height: size)
}
//set header view height
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: view.frame.width, height: 44)
}
//set header view
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId, for: indexPath) as! MyHeaderView
return view
}
}
set header class:
class MyHeaderView: UICollectionReusableView {
let labelHeader = UILabel()
let imageV: UIImageView = {
let iv = UIImageView()
iv.image = UIImage(systemName: "arrow.right.circle.fill")
iv.contentMode = .scaleAspectFill
return iv
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
labelHeader.text = "Add Your Text here"
labelHeader.textColor = .black
labelHeader.numberOfLines = 0
labelHeader.backgroundColor = .white
labelHeader.translatesAutoresizingMaskIntoConstraints = false
imageV.tintColor = .orange
imageV.translatesAutoresizingMaskIntoConstraints = false
addSubview(imageV)
imageV.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
imageV.heightAnchor.constraint(equalToConstant: 30).isActive = true
imageV.widthAnchor.constraint(equalToConstant: 30).isActive = true
imageV.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
addSubview(labelHeader)
labelHeader.topAnchor.constraint(equalTo: topAnchor).isActive = true
labelHeader.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
labelHeader.trailingAnchor.constraint(equalTo: imageV.leadingAnchor).isActive = true
labelHeader.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
and your cell class:
class MenuCell: UICollectionViewCell {
let containerView = UIView()
let myView = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
myView.translatesAutoresizingMaskIntoConstraints = false
contentView.backgroundColor = .clear
containerView.backgroundColor = .clear
containerView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(containerView)
containerView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
containerView.addSubview(myView)
myView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
myView.heightAnchor.constraint(equalToConstant: 60).isActive = true
myView.widthAnchor.constraint(equalToConstant: 60).isActive = true
myView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
This is the result:
if you want some padding on the left of your header label in MyHeaderView simply add leading constraint constant like this:
labelHeader.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
and this is the result: