Dynamic Table View Cell & Content Size conflicting & Pintrest Layout

Question

In my requirement currently,I wanted to develop a Pintrest layout view. For that I have 2 tableView's on same ScrollView .

mark: I didn't use collectionView as it was very difficult to customize the flow Layout for this purpose & I do not want to include a 3rd Party framework for the same.

Check the attached screenshot -

I am populating them with 2 arrays one for even & one for odd items . I am making these tableView's non scrollable & increasing my scrollView's contentView's height as per the tallest tableView . Both the tableView's have custom cells with dynamically increasing contents ie a label.

in my viewDidLoad()

self.tableViewCol1.estimatedRowHeight = 296
        self.tableViewCol1.rowHeight = UITableViewAutomaticDimension
        self.tableViewCol1.separatorStyle = UITableViewCellSeparatorStyle.None

        self.tableViewCol2.estimatedRowHeight = 296
        self.tableViewCol2.rowHeight = UITableViewAutomaticDimension
        self.tableViewCol2.separatorStyle = UITableViewCellSeparatorStyle.None

in my DataSource method -

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
        {
            var cell2 = MostLikedTVCscnd()//custom Cell for 2nd Table
            var cell1 = MostLikedTVC()//custom Cell for 1st Table

            if tableView == tableViewCol1
            {
                let cell = tableViewCol1.dequeueReusableCellWithIdentifier("cell1", forIndexPath: indexPath) as! MostLikedTVC
                cell.imageCol1.image = imageArr1[indexPath.row] as? UIImage
                cell.aboutLblCol1.text = labelArr1[indexPath.row] as? String//dynamic increasing label
                cell1=cell
            }
            else if tableView == tableViewCol2
            {
                let cell = tableViewCol2.dequeueReusableCellWithIdentifier("cell2", forIndexPath: indexPath) as! MostLikedTVCscnd
                cell.imageCol2.image = imageArr2[indexPath.row] as? UIImage
                cell.aboutLblCol2.text = labelArr2[indexPath.row] as? String
                cell2 = cell
            }

//changing the height constraint of table's to make the table view non scrollable
           tableView1HghtCnstrnt.constant = tableViewCol1.contentSize.height
           tableView2HghtCnstrnt.constant = tableViewCol2.contentSize.height

     //comparing the content size of table's to check which table is the tallest & adjust the height of the main ScrollView's content       
            if tableViewCol1.contentSize.height>tableViewCol2.contentSize.height
            {
                mainViewHghtCnstrnt.constant = tableViewCol1.contentSize.height+35//mainViewHghtCnstrnt :- mainScrollView's content height constraint & 35 is the padding
            }
            else if tableViewCol1.contentSize.height<tableViewCol2.contentSize.height
            {
                mainViewHghtCnstrnt.constant = tableViewCol2.contentSize.height+35
            }
            else if tableViewCol1.contentSize.height==tableViewCol2.contentSize.height
            {
                mainViewHghtCnstrnt.constant = tableViewCol2.contentSize.height+35
            }

//returning the cell
            if tableView == tableViewCol1
            {
                return cell1

            }
            else
            {
                return cell2

            }

        }

    }

But my problem is that the table's are not properly calculating the size of their content's. I did some search and here an answer to a question says - contentSize will be messed up when you give estimatedRowHeight

So what options do I have? What can be done to realise the same properly?

Answer 1

You can use tableView's contentSize property to get the height required for the tableView.

I have done a demo to test this, and it is working as you are expecting.

My constraint are as follows:

1. ScrollView:

LeadingSpace to SuperView, TrailingSpace to SuperView, TopSpace to SuperView, BottomSpace to SuperView

2. ContainerView (UIView inside scrollView):

LeadingSpace to SuperView, TrailingSpace to SuperView, TopSpace to SuperView, BottomSpace to SuperView, EqualWidth to SuperView (ie scrollView)

3. ATableView

LeadingSpace to SuperView, TrailingSpace to BTableView, TopSpace to SuperView, Width fixed points, HeightFixed points (Created outlet of this constraint), BottomSpace to SuperView with StandardSpacing and LowPriority (250)

4. BTableView

LeadingSpace to ATableView, TrailingSpace to SuperView, TopSpace to SuperView, Width fixed points, HeightFixed points (Created outlet of this constraint), BottomSpace to SuperView with StandardSpacing and LowPriority (250)

And here is my full code,

class ViewController: UIViewController {

@IBOutlet weak var tableViewA: UITableView!
@IBOutlet weak var tableViewB: UITableView!

@IBOutlet weak var heightConstraintBTableView: NSLayoutConstraint!
@IBOutlet weak var heightConstraintATableView: NSLayoutConstraint!

var tableViewACellCount = 50
var tableViewBCellCound = 20

override func viewDidLoad() {
    super.viewDidLoad()

    //Dont set estimatedRowHeight as it is displaying empty cell at the bottom of tableView (try playing with this uncomment estimatedRowHeight)

    //tableViewA.estimatedRowHeight = 44.0
    tableViewA.rowHeight = UITableViewAutomaticDimension

    //tableViewB.estimatedRowHeight = 44.0
    tableViewB.rowHeight = UITableViewAutomaticDimension

    //Try both methods
    self.performSelector("adjustTableViewHeight", withObject: [], afterDelay: 0.0)
    //self.adjustTableViewHeight()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
    if(tableView.isEqual(tableViewA)) { //A TableView
        return tableViewACellCount
    } else { //B TableView
       return tableViewBCellCound
    }
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
    let cell = tableView.dequeueReusableCellWithIdentifier("cell")

    return cell!
}

func adjustTableViewHeight() {

    dispatch_async(dispatch_get_main_queue()) { () -> Void in
        self.tableViewA.layoutIfNeeded()
        self.tableViewB.layoutIfNeeded()
    }

    heightConstraintATableView.constant = tableViewA.contentSize.height
    heightConstraintBTableView.constant = tableViewB.contentSize.height
}
}