Custom Layout

Sometimes we have taken the multiple UICollectionView in a different cell of UITableView and each cell has a different size so for managing this thing we use autoresizing in UItableview.

for this we need to follow some steps:

1: We have to take UITableView and create their outlet like:

@IBOutlet weak var tableView: UITableView!

1	@IBOutlet weak var tableView: UITableView!

Now define in Viewdidload method:

tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 200
tableView.reloadData()

tableView.rowHeight = UITableViewAutomaticDimension

self.tableView.estimatedRowHeight = 200

tableView.reloadData()

2: Now register the UICollectionView and their properties in before reload call.

3: Now define the UITableViewCell class:

class TableViewCell: UITableViewCell {

@IBOutlet weak var collectionView: UICollectionView!
   
    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        // With autolayout enabled on collection view's cells we need to force a collection view relayout with the shown size (width)
        print("this" , collectionView?.collectionViewLayout.collectionViewContentSize)
        collectionView?.frame = CGRect(x: 0, y: 0, width: targetSize.width, height: 70)
        collectionView?.layoutIfNeeded()
        
        return (collectionView?.collectionViewLayout.collectionViewContentSize)!
    }

}

class TableViewCell: UITableViewCell {

@IBOutlet weak var collectionView: UICollectionView!

override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {

// With autolayout enabled on collection view's cells we need to force a collection view relayout with the shown size (width)

print("this" , collectionView?.collectionViewLayout.collectionViewContentSize)

collectionView?.frame = CGRect(x: 0, y: 0, width: targetSize.width, height: 70)

collectionView?.layoutIfNeeded()

return (collectionView?.collectionViewLayout.collectionViewContentSize)!

}

Note: This function manage the autoresizing of UICollectionView.

Now Define the delegate of UICollectionView:

extension TableViewCell {
    
    
    func setCollectionViewDataSourceDelegate<D: UICollectionViewDataSource & UICollectionViewDelegate>(_ dataSourceDelegate: D, forRow row: Int) {
        collectionView.delegate = dataSourceDelegate
        collectionView.dataSource = dataSourceDelegate
        collectionView.setContentOffset(collectionView.contentOffset, animated:false) // Stops collection view if it was scrolling.
        collectionView.reloadData()
        
    }
    
    var collectionViewOffset: CGFloat {
        set { collectionView.contentOffset.x = newValue }
        get { return collectionView.contentOffset.x }
    }
}

extension TableViewCell {

func setCollectionViewDataSourceDelegate<D: UICollectionViewDataSource & UICollectionViewDelegate>(_ dataSourceDelegate: D, forRow row: Int) {

collectionView.delegate = dataSourceDelegate

collectionView.dataSource = dataSourceDelegate

collectionView.setContentOffset(collectionView.contentOffset, animated:false) // Stops collection view if it was scrolling.

collectionView.reloadData()

}

var collectionViewOffset: CGFloat {

set { collectionView.contentOffset.x = newValue }

get { return collectionView.contentOffset.x }

}

In ViewdidLoad class where you have taken outlet of UITableView :

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = UIColor.red
        print("calling")
        return cell
       
    }
    
    
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Collection view at row \(collectionView.tag) selected index path \(indexPath)")
    }
}

extension ViewController:UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        
            return CGSize(width: collectionView.frame.size.width / 2 - 20, height:200)
    }
    
    func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }

    
    
}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {

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

return 7

}

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

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

cell.backgroundColor = UIColor.red

print("calling")

return cell

}

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

print("Collection view at row \(collectionView.tag) selected index path \(indexPath)")

}

extension ViewController:UICollectionViewDelegateFlowLayout{

func collectionView(_ collectionView: UICollectionView,

layout collectionViewLayout: UICollectionViewLayout,

sizeForItemAt indexPath: IndexPath) -> CGSize {

return CGSize(width: collectionView.frame.size.width / 2 - 20, height:200)

}

func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {

return true

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let CellIdentifier: String = "cell"
        print("table view");
        var cell:TableViewCell = tableView.dequeueReusableCell(withIdentifier: CellIdentifier) as! TableViewCell
        cell.collectionView.tag = (100 * indexPath.section) + 1
        cell.setCollectionViewDataSourceDelegate(self, forRow: indexPath.section)
        cell.collectionViewOffset = storedOffsets[indexPath.section] ?? 0
        return cell;
    }

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

let CellIdentifier: String = "cell"

print("table view");

var cell:TableViewCell = tableView.dequeueReusableCell(withIdentifier: CellIdentifier) as! TableViewCell

cell.collectionView.tag = (100 * indexPath.section) + 1

cell.setCollectionViewDataSourceDelegate(self, forRow: indexPath.section)

cell.collectionViewOffset = storedOffsets[indexPath.section] ?? 0

return cell;

}

Now you need to set the some delegate function to run the tableview .

and whatever the value passed in UICollectionview layout ,UItableview will automatic maintain their height .

kunal prasad 4 November 2017

. . .

Manage Custom UICollection View in UITableview Cell in swift 3

Custom Layout

Leave a Comment Cancel Reply

Manage Custom UICollection View in UITableview Cell in swift 3

Custom Layout

Leave a Comment Cancel Reply

Message Sent!