Manage Collection View height inside the Table View Cell using swift 4

Collection View height inside the Table View Cell

In Most of time we use the collection view inside the table view cell if the collection view flow is vertical then we need to increase the height of table view cell or if flow layout is horizontal then we fix some constant height for table view cell .

Here I am discussing about how to manage the table view cell height automatically if collection view flow layout is vertical

Follow the Steps:

1: Go to Table view Cell class & create the outlet of collection view & collection view Height Constraints.

class ProductTableViewCell: UITableViewCell {
@IBOutlet weak var prodcutCollectionView: UICollectionView!
@IBOutlet weak var productCollectionViewHeight: NSLayoutConstraint!

}

class ProductTableViewCell: UITableViewCell {

@IBOutlet weak var prodcutCollectionView: UICollectionView!

@IBOutlet weak var productCollectionViewHeight: NSLayoutConstraint!

}

2: Now Register the Collection view cell so we can use .

 override func awakeFromNib() {
        super.awakeFromNib()
        productCollectionViewHeight.constant = 20
        prodcutCollectionView.register(UINib(nibName: "ProductImageCell", bundle: nil), forCellWithReuseIdentifier: "productimagecell")
        prodcutCollectionView.delegate = self
        prodcutCollectionView.dataSource = self
      
        
    
    
    }

override func awakeFromNib() {

super.awakeFromNib()

productCollectionViewHeight.constant = 20

prodcutCollectionView.register(UINib(nibName: "ProductImageCell", bundle: nil), forCellWithReuseIdentifier: "productimagecell")

prodcutCollectionView.delegate = self

prodcutCollectionView.dataSource = self

}

3: Now write their All delegate & data source method inside the table view cell class.

extension ProductTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource , UICollectionViewDelegateFlowLayout{
    
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return productCollectionModel.count
    
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "productimagecell", for: indexPath) as! ProductImageCell
        cell.layer.cornerRadius = 8
        NetworkManager.sharedInstance.getImageFromUrl(imageUrl:productCollectionModel[indexPath.row].bannerImage , imageView: cell.productImage)
        cell.productName.text = productCollectionModel[indexPath.row].name
        cell.productPrice.text = productCollectionModel[indexPath.row].price
        headerTitle.text = titles
        return cell
        
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.size.width/2 - 16 , height: collectionView.frame.size.width/2 + 70)
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
           delegate.productClick(name: productCollectionModel[indexPath.row].name, image: productCollectionModel[indexPath.row].bannerImage, id: productCollectionModel[indexPath.row].Id)
 
    }
    
}

extension ProductTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource , UICollectionViewDelegateFlowLayout{

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

return productCollectionModel.count

}

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

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "productimagecell", for: indexPath) as! ProductImageCell

cell.layer.cornerRadius = 8

NetworkManager.sharedInstance.getImageFromUrl(imageUrl:productCollectionModel[indexPath.row].bannerImage , imageView: cell.productImage)

cell.productName.text = productCollectionModel[indexPath.row].name

cell.productPrice.text = productCollectionModel[indexPath.row].price

headerTitle.text = titles

return cell

}

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

return CGSize(width: collectionView.frame.size.width/2 - 16 , height: collectionView.frame.size.width/2 + 70)

}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

delegate.productClick(name: productCollectionModel[indexPath.row].name, image: productCollectionModel[indexPath.row].bannerImage, id: productCollectionModel[indexPath.row].Id)

}

4: Now the Collection View delegate & data source are set , now move to Table View Delegate & Data source.

5: Now register the tableview cell

class ViewController: UIViewController ,featureViewControllerHandlerDelegate,bannerViewControllerHandlerDelegate,productViewControllerHandlerDelegate,UITabBarControllerDelegate{

@IBOutlet weak var homeTableView: UITableView!

override func viewDidLoad() {
        super.viewDidLoad()
homeTableView?.register(ProductTableViewCell.nib, forCellReuseIdentifier: ProductTableViewCell.identifier)
        self.homeTableView?.dataSource = self;
        self.homeTableView?.delegate = self
        homeTableView.rowHeight = UITableViewAutomaticDimension
        self.homeTableView.estimatedRowHeight = 100
        self.homeTableView.separatorColor = UIColor.clear


}

class ViewController: UIViewController ,featureViewControllerHandlerDelegate,bannerViewControllerHandlerDelegate,productViewControllerHandlerDelegate,UITabBarControllerDelegate{

@IBOutlet weak var homeTableView: UITableView!

override func viewDidLoad() {

super.viewDidLoad()

homeTableView?.register(ProductTableViewCell.nib, forCellReuseIdentifier: ProductTableViewCell.identifier)

self.homeTableView?.dataSource = self;

self.homeTableView?.delegate = self

homeTableView.rowHeight = UITableViewAutomaticDimension

self.homeTableView.estimatedRowHeight = 100

self.homeTableView.separatorColor = UIColor.clear

}

6: After register the Tableview Cell & we have to define their delegate & Data source.

extension viewController : UITableViewDelegate , UITableViewDataSource {
    public func numberOfSections(in tableView: UITableView) -> Int{
        return 1;
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
        return 1
    }

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return UITableViewAutomaticDimension
 
        }
}

extension viewController : UITableViewDelegate , UITableViewDataSource {

public func numberOfSections(in tableView: UITableView) -> Int{

return 1;

}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{

return 1

}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

return UITableViewAutomaticDimension

}

7: Now its Time to return the cell , here i am creating the vertical flow of collection view where the collection view height is fixed, so its automatically increase the table view cell size.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 let cell:ProductTableViewCell = tableView.dequeueReusableCell(withIdentifier: ProductTableViewCell.identifier) as! ProductTableViewCell
            cell.productCollectionModel = ((item as? HomeViewModelProductItem)?.productCollectionModel)!
            cell.frame = tableView.bounds
            cell.layoutIfNeeded()
            cell.prodcutCollectionView.reloadData()
            cell.productCollectionViewHeight.constant = cell.prodcutCollectionView.collectionViewLayout.collectionViewContentSize.height
            return cell;

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell:ProductTableViewCell = tableView.dequeueReusableCell(withIdentifier: ProductTableViewCell.identifier) as! ProductTableViewCell

cell.productCollectionModel = ((item as? HomeViewModelProductItem)?.productCollectionModel)!

cell.frame = tableView.bounds

cell.layoutIfNeeded()

cell.prodcutCollectionView.reloadData()

cell.productCollectionViewHeight.constant = cell.prodcutCollectionView.collectionViewLayout.collectionViewContentSize.height

return cell;

}

8 Notes : these are the important part to automate your table view cell

cell.frame = tableView.bounds

cell.layoutIfNeeded()

cell.prodcutCollectionView.reloadData()

cell.productCollectionViewHeight.constant = cell.prodcutCollectionView.collectionViewLayout.collectionViewContentSize.height

9: Now your Table View Cell automatically increase without calculating the height of each collection view.

kunal prasad 26 October 2021

. . .

Manage Collection View height inside the Table View Cell using swift 4

Collection View height inside the Table View Cell

Leave a comment

8 Comments

Manage Collection View height inside the Table View Cell using swift 4

Collection View height inside the Table View Cell

Leave a comment

8 Comments

Message Sent!