How to dynamically size CollectionViewCell as per UILabel

Question

I'm creating a suggestion/tags view. Which is basically a horizontal uicollectionview. I've a custom cell in which I just have one label with no autoresizing or auto constraints. And I've an array var tagsArray = ["Label", "A Long Label", "A very long label"] which I am using in the collectionView delegate methods as:

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return tagsArray.count
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let size = (tagsArray[indexPath.row] as NSString).size(withAttributes: nil)
    return size
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TagCell", for: indexPath) as! TagCollectionViewCell
    cell.tagLabel.text = tagsArray[indexPath.row]
    return cell

}

The second function collectionViewLayout is something that I've picked form stack overflow but when I run it there is no effect on the UILabel.

Here is the output:

You can use this library for tag view: https://github.com/ElaWorkshop/TagListView — Kishan Bhatiya, Jan 09 '20 at 09:50
@ChaudhryTalha You need to use [this method](https://developer.apple.com/documentation/foundation/nsstring/1524729-boundingrect) to get the exact width of the string. Add some margin after that so that your UI looks good. I had done same in Obj-c , [link](https://github.com/thedahiyaboy/TDTagIndex/blob/master/TDTagListCollection/TDTagListCollection/ViewController.m), as its one line code so you can convert it ito swift too. — dahiya_boy, Jan 09 '20 at 10:09
@dahiya_boy I've added `let tagSize = (tagsArray[indexPath.row] as NSString).boundingRect(with: (tagsArray[indexPath.row] as NSString).size(withAttributes: nil), options: .usesLineFragmentOrigin, attributes: nil, context: nil).size` by following the objective c link and then `return CGSize(width: tagSize.width, height: 40)` in the `sizeForItemAt` function but it still didn't work. — Chaudhry Talha, Jan 09 '20 at 10:24
This may [help](https://stackoverflow.com/questions/25895311/uicollectionview-self-sizing-cells-with-auto-layout). — Manav, Jan 09 '20 at 10:24

Roman Podymov · Accepted Answer · 2020-01-09T15:22:26.747

1

You don't need to calculate the size of the strings that you want to display. Do the following:

Set collectionView's height equal to the expected height of tags.
Set tagLabel's leading, trailing, top and bottom constraints equal to the corresponding cell's contentView constraints.
Remove your implementation of func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize. The cell size will be calculated automatically if you don't use a custom value for estimatedItemSize. If you want to be sure, add (collectionView.collectionViewLayout as? UICollectionViewFlowLayout)?.estimatedItemSize = UICollectionViewFlowLayout.automaticSize to the function where you setup all views.

You will see the following result:

edited Jan 09 '20 at 15:22

answered Jan 09 '20 at 10:27

Roman Podymov

3,416
3
28
49

@LalKrishna Tried this code on iOS 11 and iOS 12 and it works fine. – Roman Podymov Aug 23 '20 at 10:42
how to deal with `contentView` if it is not displayed in xib? – Vyachaslav Gerchicov Dec 24 '20 at 13:54
@VyachaslavGerchicov I think you should ask a new question. You can also use https://ru.stackoverflow.com. – Roman Podymov Dec 24 '20 at 15:31
No, I think your answer is incomplete – Vyachaslav Gerchicov Dec 28 '20 at 06:25
@VyachaslavGerchicov `contentView` should be visible in the xib file. Or did you hide it for some reason? – Roman Podymov Dec 28 '20 at 09:42
`contentView` is visible in table cells but not in collection cells. So I ask how to deal with it. I can't create cells purely programmatically. – Vyachaslav Gerchicov Dec 28 '20 at 09:53
@VyachaslavGerchicov Normally `contentView` is visible in the xib file. That's why you should ask a new question for **how to deal with contentView if it is not displayed in xib?**. – Roman Podymov Dec 28 '20 at 11:23
I finally found it. When you create `UICollectionViewCell` with "New file..." menu there is no `contentView`. It appears when you drag cell into xib only. Checked what happens inside xib code - `contentView` exists and anyways you place subviews inside it. BUT: in the first case you work with `contentView` even if IB doesn't show it – Vyachaslav Gerchicov Dec 28 '20 at 13:44
@VyachaslavGerchicov Sounds great. Hope the solution works for you now. – Roman Podymov Dec 28 '20 at 14:45

How to dynamically size CollectionViewCell as per UILabel

1 Answers1