Dynamic Width Cell in UICollectionView

Question

I try to implement labels with UICollectionView . But I have to set the widths with dynamic labels length. I try to remove gaps in picture. I share some code. I use Nibs.

Thanks in advance.

layoutFCV.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
let filterCV = UICollectionView(frame: self.view.bounds, collectionViewLayout: layoutFCV)

--

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {       
    if collectionView == filterCollectionView {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FilterSelectionCollectionViewCell", for: indexPath) as! FilterSelectionCollectionViewCell
        return CGSize(width: cell.title.frame.width , height: self.filterCollectionView.frame.height)
    }  else {
        return CGSize(width: 10, height: 10)
    }
}

Answer 1

extension ViewController: UICollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: UICollectionView, layout      collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
     return "String".size(withAttributes: [
       NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 14)
  ])
  }
 }

Answer 2

Use this code:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let text = "Title"
    let width = self.estimatedFrame(text: text, font: UIFont.systemFont(ofSize: 14)).width
    return CGSize(width: width, height: 50.0)
}

func estimatedFrame(text: String, font: UIFont) -> CGRect {
    let size = CGSize(width: 200, height: 1000) // temporary size
    let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
    return NSString(string: text).boundingRect(with: size,
                                               options: options,
                                               attributes: [NSFontAttributeName: font],
                                               context: nil)
}

Answer 3

First make sure your constraints in UICollectionViewCell.xib file has been set correctly. I mean with the growth of UILabel in cell, the cell itself should grow as well.

You should explicitly set the title before you get the cell size. So here is your collectionView(collectionView:, layout:, sizeForItemAt:) method should be:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {       
    if collectionView == filterCollectionView {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FilterSelectionCollectionViewCell", for: indexPath) as! FilterSelectionCollectionViewCell
        cell.title.text = "Newest" //this is for the "Newest" cell. Of curse you should set the proper title for each indexPath
        cell.setNeedsLayout()
        cell.layoutIfNeede()
        return CGSize(width: cell.contenView.frame.width , height: cell.contentView.frame.height)
    }  else {
        return CGSize(width: 10, height: 10)
    }
}