Friday, August 24, 2018

Collection view cell not appear after resize the CollectionView height

I am facing the UICollectionView cell size issue. I am using two collection_view and one table_view 1:- Main CollectionView ,which is use for swipe and only display one cell at one time 2:- Inside Main Collection_View, i use table_view and now further inside table_view I am using Collection view which display 6 cell at one time.

Now the whole process is I am using a layout which is swipable and display 6 item at one page and so on.

The problem is when I set main cell height 200 then inside collectionview cell not appearing as expected.

Outer CollectionView Class

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var collectionMain: UICollectionView!
    @IBOutlet weak var tableView: UITableView!
    let itemsPerRow: CGFloat = 1
    let sectionInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
    override func viewDidLoad() {
        super.viewDidLoad()

    }

}

extension ViewController:UICollectionViewDataSource,UICollectionViewDelegate {
    //1
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    //3
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell:cellCollectionCollectionViewCell! = collectionView.dequeueReusableCell(withReuseIdentifier: "cellSwipe",
                                                                                        for: indexPath) as! cellCollectionCollectionViewCell

        switch indexPath.item {
        case 0:
            cell.backgroundColor = UIColor.black
            cell.setupCollectionTableCell(indexPath)
            break
        case 1:  cell.backgroundColor = UIColor.red
        cell.setupCollectionTableCell(indexPath)
            break

        default:
            cell.backgroundColor = UIColor.yellow
            cell.setupCollectionTableCell(indexPath)
            break
        }
        // Configure the cell
        return cell
    }


}
extension ViewController : UICollectionViewDelegateFlowLayout {
    //1
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        //2
        let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
        let availableWidth = self.collectionMain.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow

        return CGSize(width: widthPerItem, height: widthPerItem)
    }

    //3
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        insetForSectionAt section: Int) -> UIEdgeInsets {
        return sectionInsets
    }

    // 4
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return sectionInsets.left
    }
}

Model Constant class

import UIKit

class Constant {
    static let totalItem: CGFloat = 9
    static let column: CGFloat = 3

    static let minLineSpacing: CGFloat = 1.0
    static let minItemSpacing: CGFloat = 1.0

    static let offset: CGFloat = 1.0 // TODO: for each side, define its offset

    static func getItemWidth(boundWidth: CGFloat) -> CGFloat {

        let totalWidth = boundWidth - (offset + offset) - ((column - 1) * minItemSpacing)

        return totalWidth / column        
    }
}

Table Cell Class

import UIKit

class CollectionCell: UITableViewCell {

    @IBOutlet weak var collectionView: UICollectionView!

    override func awakeFromNib() {
        super.awakeFromNib()

        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.sectionInset = UIEdgeInsetsMake(
                Constant.offset,    // top
                Constant.offset,    // left
                Constant.offset,    // bottom
                Constant.offset     // right
            )

            layout.minimumInteritemSpacing = Constant.minItemSpacing
            layout.minimumLineSpacing = Constant.minLineSpacing
        }

        collectionView.isScrollEnabled = false
        collectionView.dataSource = self
        collectionView.delegate = self
    }

}

extension CollectionCell: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return Int(Constant.totalItem)
    }

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

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

        let itemWidth = Constant.getItemWidth(boundWidth: collectionView.bounds.size.width)

        return CGSize(width: itemWidth, height: 50)
    }
}

Main CollectionCell class

import UIKit

class cellCollectionCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var tblView: UITableView!
    var indexPath:IndexPath?

    func setupCollectionTableCell(_ row:IndexPath){

            self.indexPath = row
            self.tblView.delegate = self
            self.tblView.dataSource = self
            //   self.tblView.estimatedRowHeight = 300
            self.tblView.reloadData()

    }
}
extension cellCollectionCollectionViewCell:UITableViewDelegate,UITableViewDataSource{

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        switch indexPath.row {
        case 0:
            return 50
        case 1:
            let itemHeight = Constant.getItemWidth(boundWidth: tableView.bounds.size.width)

            let totalRow = ceil(Constant.totalItem / Constant.column)

            let totalTopBottomOffset = Constant.offset + Constant.offset

            let totalSpacing = CGFloat(totalRow - 1) * Constant.minLineSpacing

            let totalHeight  = ((itemHeight * CGFloat(totalRow)) + totalTopBottomOffset + totalSpacing)
            print("total height  \(totalHeight)")

            return totalHeight
        default:
            return UITableViewAutomaticDimension
        }
    }

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//        switch indexPath.row {
//        case 0:
//            let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath)
//            return cell
//        default:
//            let cell = tableView.dequeueReusableCell(withIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
//            return cell
//        }
        let cell = tableView.dequeueReusableCell(withIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
        return cell

    }

When I set height of Main Collection view 200

Bellow are the link of images

When I set height 300, working fine

No comments:

Post a Comment