0

I am trying to implement a UICollectionView header using a flow layout with horizontal scroll. I want the header to stretch across the entire width of the collection view but with a small height.

I understand that it is stated in the documentation that for horizontal scroll direction, only the width used and the height is stretched to fill the entire collection view. (first method provided in the code below)

Is there anyway I can override this using flow layout?

I have tried to change the minimum line spacing and the edge insets, neither of them worked.

Any help would be greatly appreciated. Thanks!

// configure header size (flow layout delegate)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    // only width is used for horizontal scrolling. (height only for vertical)
    return CGSize(width: self.view.frame.width, height: self.view.frame.height/5)
}

// configure section line spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return CGFloat(10)
}

// configure section edgeinsets
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 0, bottom: 100, right: 100)
}

Please find attached a screenshot of the UI.

The red background colour is the header and it is currently taking up the entire collection view (child of the VC) when its width is set to equal the collection view's width.

Collection view covered entirely by its header (red bg_colour).

2
  • could you please attach image for better understanding.
    – guru
    Feb 5, 2019 at 7:57
  • Hi guru, thank you for commenting, I've attached an image in the link "collection view covered entirely by its header (red bg_colour).
    – Jack-P
    Feb 6, 2019 at 7:56

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.