Search code examples
iosswiftuicollectionviewuicollectionviewcell

How to create horizontally dynamic UICollectionView cells? Swift

Hey I'm trying display a set of "tags" in a view controller using collection view cells but I'm having trouble finding a way to make them be able to dynamically resizable depending on the length of the string.

Right now the individual cells are statically sized so whenever a String that populates the cell with characters exceeding the size of the cell, it goes into the second line. I want it so that the cell can change length depending on the length of the String. So if it's the tag "#Vegan", it will automatically resize so that the tag isn't that big. Likewise, if it's a longer string like "#LaptopFriendly", it will become horizontally longer to accommodate the string and not use the second line. The vertical length can stay fixed. Thank you!

enter image description here

UPDATE (interface builder settings when I run into errors using Rob's code):

enter image description here

Simulator screenshot: enter image description here

Solution

  • You need unambiguous constraints between your label and the cell (e.g. leading, trailing, top, and bottom constraints):

    enter image description here

    Then you can use UICollectionViewFlowLayoutAutomaticSize for the itemSize of your collectionViewLayout. Don't forget to set estimatedItemSize, too, which enables automatically resizing cells:

    override func viewDidLoad() {
    super.viewDidLoad()

    let layout = collectionView?.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = UICollectionViewFlowLayoutAutomaticSize
    layout.estimatedItemSize = CGSize(width: 100, height: 40)
}

    That yields:

    enter image description here