Height fitting collection view

I have numerous times needed to show some sort of collection view which adjusts its height based on the content. Most of the time it has been a dynamic list within some more complex scrollable UI. Therefore, in this post, we’ll take a look at how to set up a collection view which has its height set to the content height. On the screenshot below, we have a collection view with light grey background and two sections.

Collection view with height fitting size.

The approach for making this working is pretty simple, which involves adding a height constraint with the constant value set to collection view content height. Content height can be retrieved from the layout object. The constraint’s constant value can be updated in viewWillLayoutSubviews.

	private var collectionViewHeightConstraint: NSLayoutConstraint!

	override func viewDidLoad() {
	super.viewDidLoad()
	collectionView.register(TextCollectionViewCell.self, forCellWithReuseIdentifier: Self.reuseIdentifier)
	collectionView.backgroundColor = UIColor(white: 0.9, alpha: 1)
	collectionView.isScrollEnabled = false
	collectionViewHeightConstraint = collectionView.heightAnchor.constraint(equalToConstant: 50)
	collectionViewHeightConstraint.isActive = true
	}

	override func viewWillLayoutSubviews() {
	super.viewWillLayoutSubviews()
	collectionViewHeightConstraint.constant = collectionViewLayout.collectionViewContentSize.height
	}

view raw FittingHeightCollectionViewController.swift hosted with ❤ by GitHub

The full example collection view implementation can be seen here: FittingHeightCollectionView.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Share this:

One reply on “Height fitting collection view”

Leave a comment Cancel reply