Adjust UICollectionView UICollectionReusableView (header) width

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: