How to give a collection view section header dynamic height - ios

Question

I have a collection view with a section header that displays a users information. The header can include a bio from the user. I am having trouble with resizing the header if the bio is long. The label will not display the whole bio because the header stays at a fixed height.
I created the collection view via storyboard however I added the constraints programmatically.
Here is the bio constraints, I thought by setting the height and lines to 0 I would be okay,
addSubview(bioLabel)
bioLabel.anchor(top: editProfileButton.bottomAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 12, paddingLeft: 12, paddingBottom: 0, paddingRight: 12, width: 0, height: 0)
I also thought I could override the storyboard by
// Trying to override storyboard header height so the header can strech depending on the bio height
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
//TODO change height to be bounds.height of bioLabel?
return .init(width: view.frame.width, height: 300)
}
but it appears even if I try to change the size through code, it keeps the storyboard height of 225 ( which is what I would like)

Answer 1

None of the answers given so far are good practices since calculating the size manually or by rendering a label offscreen are both inefficient and violate the single source of truth principle.
Instances of UICollectionReusableView have the preferredLayoutAttributesFitting() method. When the cell becomes displayed, this method will be called. In this method, if you use Auto Layout, you ask the whole cell for its systemLayoutSizeFitting() and then modify the attributes. The layout will then be responsible to apply them via layout invalidation.

Answer 2

Use an instance of UICollectionReusableView to be your header.
And calculate the actual size of header in this method
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { }
Make sure you header is ready for dynamic height as well. Good luck.

Answer 3

You can get Label Height using below function
func heightForLabel(text: String, font: UIFont, width: CGFloat) -> CGFloat {
let label:UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: width, height: CGFloat.greatestFiniteMagnitude))
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.font = font
label.text = text
label.sizeToFit()
return label.frame.height
}
Collection Header Method
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
let height = self.heightForLabel(text: 'your text', font: 'font which you in label' , width: 'your label width')
return .init(width: view.frame.width, height: height+10) //10 is extra height if you want or you can remove it.
}

Answer 4

This function will do the work. Just pass the label text
func estimatedLabelHeight(text: String) -> CGFloat {
let size = CGSize(width: view.frame.width - 16, height: 1000)
let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 10)]
let rectangleHeight = String(text).boundingRect(with: size, options: options, attributes: attributes, context: nil).height
return rectangleHeight
}
And use it like
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
//TODO change height to be bounds.height of bioLabel?
return .init(width: view.frame.width, height: estimatedLabelHeight(text: "Text that your label is gonna show"))
}

Answer 5

You need to calculate the size of cell height in method
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
var size = CGSize()
let cell = YourUICollectionViewCell()
cell.textLabel?.text = data?[indexPath.row].text
let fitting = CGSize(width: cell.frame.size.width, height: 1)
size = cell.contentView.systemLayoutSizeFitting(fitting,
withHorizontalFittingPriority: .required,
verticalFittingPriority: UILayoutPriority(1))
return size.height //or just return size
}
If UILabel is custom then you need to set the bottom Constraint of UILabel to view with less than 1000 priority.
Hope it helps