Update collection view height to fit all cells within a table view cell using Auto Layout

Question

I would like to take advantage of the dynamic UITableViewCell height new in iOS 8. I need to place a UICollectionView within a UITableViewCell. I want to ensure all of the cells in the collection view are visible on screen, so the table cell should increase in height to fit the collection view. I almost have this working. I just haven't been able to get the table cell to be the right size - it's either too long or too short in height, and some layout issues are visible until I interact with the table (more on that below).

I've set up auto layout constraints for the collection view to the table's cell's contentView: leading, trailing, top, and bottom. I then created a height constraint on the collection view so I can update its constant on the fly after calculating the appropriate height to fit all cells in the collection view (because I don't think there's a way to do that automatically).

Here is the rest of the setup.

viewDidLoad {
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.estimatedRowHeight = 44
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    let cellDimension = self.collectionView.frame.size.width / 7 //always 7 columns

    let flowLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    flowLayout.itemSize = CGSizeMake(cellDimension, cellDimension)

    self.collectionViewHeightConstraint.constant = cellDimension * 4 //always 4 rows
}

I have not implemented heightForRowAtIndexPath.

This setup results in conflicting vertical constraints. I've tried reducing the priority of the constraints and changing the relation in a bunch of combinations, but none resulted in the desired behavior. If I reduce the priority of the height constraint to 999, the table view cell is too tall at first, but after I scroll up and down the table view the table cell height updates to the expected height. With some other combinations, the result is either the table cell is too short yet the full collection view bleeds out, the table cell is too short and the collection view is cut off, or the table cell is too tall, based on what priority and relations I've applied to the constraints. Additionally, the collection view cells are not displayed at the proper size while the view is animating in (but they're properly adjusted by the time animation finishes), or if I reload the table the collection view cells are the incorrect size until I scroll the table.

How can I resolve these appearance issues to obtain a dynamic table view cell height that contains a fully visible collection view featuring dynamic cell size based on the display's width?

Answer 1

From what i can understand from you code in setting up the collectionView cells and size, it seems to me that you want to have square collection cells, and have 4 rows of 7 cells and all fully visible.

If you add constraints to the collectionView that is in the cell to all 4 margins(top, bottom, left and right) and then add an Aspect Ratio Constraint of 7:4 to the collectionView, the tableview should be able to calculate cell height automatically for you at the right size.