UICollectionViewFlowLayout

Flow layout with self-sizing items and fixed spacing in UIKit

One of the really common layouts I have needed to implement with collection view is a simple flow layout but with fixed spacings. Apple provides us UICollectionViewFlowLayout, but the sad part is that it has dynamic spacing between items. Everything is there but not quite. Before UICollectionViewCompositionalLayout, one needs to create a subclass of the flow layout and then fixing spacings manually, which is pretty cumbersome to do. Therefore, let’s instead see what it takes to implement a simple self-sizing flow layout with fixed spacings when using UICollectionViewCompositionalLayout. The end goal is visible below, where we have a single section with 7 items.

UICollectionViewCompositionalLayout was created to be a flexible layout which allows building all sorts of layouts quickly. Data in that layout is divided into sections, where each section can have one or more groups of items. Grouping allows creating more complex layouts, where each group describes how items in the group are laid out in relation to each other. But in our case we have something really simple in mind, which is having self-sizing items which we can configure with NSCollectionLayoutSize and passing estimated dimensions. Then the next step is creating NSCollectionLayoutItem with that layout size and with some space around the item. The edge spacing with fixed edges gives us the wanted fixed spacing between items. After that, we’ll create NSCollectionLayoutGroup with horizontal layout direction and with a layout size which takes max width, but height is fitted based on item sizes. Creating layouts like this is so much better compared to subclassing UICollectionViewLayout and then calculating frames one by one. Down below is the configured layout object, which has fixed spacing and items are self-sizing.

	extension UICollectionViewLayout {
	static func fixedSpacedFlowLayout() -> UICollectionViewLayout {
	let itemSize = NSCollectionLayoutSize(
	widthDimension: .estimated(50),
	heightDimension: .estimated(50)
	)
	let item = NSCollectionLayoutItem(layoutSize: itemSize)
	item.edgeSpacing = NSCollectionLayoutEdgeSpacing(
	leading: .fixed(8),
	top: .fixed(4),
	trailing: .fixed(8),
	bottom: .fixed(4)
	)
	let groupSize = NSCollectionLayoutSize(
	widthDimension: .fractionalWidth(1.0),
	heightDimension: .estimated(100)
	)
	let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
	let section = NSCollectionLayoutSection(group: group)
	return UICollectionViewCompositionalLayout(section: section)
	}
	}

view raw UICollectionViewCompositionalLayout.swift hosted with ❤ by GitHub

Example project can be found here: GitHub

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.

Support me on Patreon

Donate with Paypal

Buy me a coffee

UICollectionViewFlowLayout and auto layout on iOS

UICollectionViewFlowLayout is layout object supplied by UIKit and enables showing items in grid. It allows customising spacings and supports fixed size cells and cells with different sizes. This time I am going to show how to build a collection view containing items with different sizes where sizes are defined by auto layout constraints.

Cell sizes in UICollectionViewFlowLayout

By default UICollectionViewFlowLayout uses itemSize property for defining the sizes of the cells. Another way is to use UICollectionViewDelegateFlowLayout and supplying item sizes by implementing collectionView(_:layout:sizeForItemAt:). Third way is to let auto layout for defining the size of the cell. This is what I am going to build this time.

Enabling auto layout based cell sizes

When setting UICollectionViewFlowLayout’s estimatedItemSize to UICollectionViewFlowLayout.automaticSize enables layout object to use auto layout.

	final class CollectionViewController: UICollectionViewController {
	let content: [String]

	init(content: [String]) {
	self.content = content
	let layout = UICollectionViewFlowLayout()
	layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
	super.init(collectionViewLayout: layout)
	}
	}

view raw CollectionViewController.swift hosted with ❤ by GitHub

Setting up collection view cell with auto-layout constraints

When layout object is configured, second step is to create a cell. In the current prototype it is going to be a simple cell with a label and border around the label. Constraints are set up to have a 8 points space around the label. Constraints together with label’s intrinsicContentSize define the minimum size for the cell. If text is longer, intrinsicContentSize is wider.

	final class TextCollectionViewCell: UICollectionViewCell {
	let textLabel: UILabel

	override init(frame: CGRect) {
	textLabel = {
	let label = UILabel(frame: .zero)
	label.adjustsFontForContentSizeCategory = true
	label.font = UIFont.preferredFont(forTextStyle: .body)
	label.translatesAutoresizingMaskIntoConstraints = false
	return label
	}()
	super.init(frame: frame)
	contentView.addSubview(textLabel)
	NSLayoutConstraint.activate([
	textLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
	textLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
	textLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
	textLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
	])
	contentView.layer.borderColor = UIColor.darkGray.cgColor
	contentView.layer.borderWidth = 1
	contentView.layer.cornerRadius = 4
	}

	required init?(coder aDecoder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	}

view raw TextCollectionViewCell.swift hosted with ❤ by GitHub

When putting all the things together, the end result is a collection view where every cell has its own size. Moreover, it supports dynamic type and cells will grow if user changes default text sizes.

Summary

UICollectionViewFlowLayout’s estimatedItemSize enables using auto-layout for defining cell sizes. Therefore creating cells where text defines the size of the cell is simple to do on iOS.

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.