Manage Collection View Cell Height Dynamic According To Text Label Data

In most of the times we take label inside the collection view. And we want the height of collection view exactly equals to label data height, because it will not look good if label data height is less than collection view cell, it will show a blank space and if label data height is more than collection view then it will truncate the data.

Here I am discussing about how to manage collection view cell height according to text label data.

Follow the steps :

Step 1: Go to Collection View cell class and create the outlet of label.

class NewCollectionViewCell: UICollectionViewCell { 
     @IBOutlet weak var myLbl: UILabel!
}

class NewCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var myLbl: UILabel!

}

Step 2: Now go to MainViewController and create the outlet of collection view.

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource , UICollectionViewDelegateFlowLayout {    
      @IBOutlet weak var myCollectionView: UICollectionView!
}

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource , UICollectionViewDelegateFlowLayout {

@IBOutlet weak var myCollectionView: UICollectionView!

}

Step 3: Now create the extension to calculate the height of the label.

extension UILabel {
    func textHeight(withWidth width: CGFloat) -> CGFloat {
       guard let text = text else {
          return 0
       }
       return text.height(withWidth: UIScreen.main.bounds.width, font: UIFont.systemFont(ofSize: 17))
    }
}

extension UILabel {

func textHeight(withWidth width: CGFloat) -> CGFloat {

guard let text = text else {

return 0

}

return text.height(withWidth: UIScreen.main.bounds.width, font: UIFont.systemFont(ofSize: 17))

}

Step 4: Now Register the collection view cell so that we can use.

override func viewDidLoad() {
    super.viewDidLoad()
    myCollectionView.delegate = self
    myCollectionView.dataSource = self
    myCollectionView.register(UINib.init(nibName: "NewCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "NewCollectionViewCell")
}

override func viewDidLoad() {

super.viewDidLoad()

myCollectionView.delegate = self

myCollectionView.dataSource = self

myCollectionView.register(UINib.init(nibName: "NewCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "NewCollectionViewCell")

}

Step 5: After register the collection view cell write their All delegate and datasource method inside main controller class.

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

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

return 1

}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {              
    if let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "NewCollectionViewCell", for: indexPath as IndexPath) as? NewCollectionViewCell {           
          return cell        
    }        
    return UICollectionViewCell()    
}

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

if let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "NewCollectionViewCell", for: indexPath as IndexPath) as? NewCollectionViewCell {

return cell

}

return UICollectionViewCell()

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {        
     if let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "NewCollectionViewCell", for: indexPath as IndexPath) as? NewCollectionViewCell {            
          lblHeight = cell.myLbl.textHeight(withWidth: UIScreen.main.bounds.width)        
     }                
     return CGSize(width: UIScreen.main.bounds.width , height: lblHeight)    
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

if let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "NewCollectionViewCell", for: indexPath as IndexPath) as? NewCollectionViewCell {

lblHeight = cell.myLbl.textHeight(withWidth: UIScreen.main.bounds.width)

}

return CGSize(width: UIScreen.main.bounds.width , height: lblHeight)

}

Step 6: Now your collection view cell height will automatically increase after calculating the height of label.

Conclusion

So please follow the above step and and if you have any issue or suggestion you can leave your query/suggestion in the comment section I will try to solve that.

Shikha Melkani 31 July 2019

. . .

3 comments

Hafiz Feb 21, 2022 at 6:10 pm

Error in this Line
return text.height(withWidth: UIScreen.main.bounds.width, font: UIFont.systemFont(ofSize: 17))
label has no member height

Debabrata Roy (Moderator) Apr 13, 2022 at 10:11 am

<span><span>Please use this </span></span>extension.

1	<span><span>Please use this </span></span>extension.

<span><span>extension String { func height(withWidth width: CGFloat, font: UIFont) -> CGFloat { let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude) let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil) return ceil(boundingBox.height) } }</span></span><span><span></span></span>

extension String { func height(withWidth width: CGFloat, font: UIFont) -> CGFloat { let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude) let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil) return ceil(boundingBox.height) } }

Debabrata Roy Apr 13, 2022 at 10:16 am
Use this extension
extension String {
func height(withWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)

return ceil(boundingBox.height)
}

}

Reply