内在内容大小在UITableView内部的UICollectionView

Question

Let me preface by saying that I've spent probably 100 hours over the past few months searching Google and StackOverflow trying to answer this question. I've followed many tutorials and have not been able to solve my problem. Every one is a major disappointment and is disheartening.

Expectation

Reality

Problem

I have a UITableView that contains a UIView. The UIView has auto layout constraints to pin it 15pt off the edges of the cell, and then I give that a shadow and rounded corners. Inside that UIView, I have a few labels, then a UICollectionView, and a stack view.

My UICollectionView keeps having a height of 0 and I can't figure out how to make it have intrinsic size. The only way I can seem to make it display properly is to force a specific height to it via auto layout inside the storyboard (which is what I did to take this screenshot). Unfortunately, forcing a height like this is not realistic for 2 reasons:

1. The height varies based on the width of the device. Since the images are squares, the height is loosely (but not exactly) half the width of the device.
2. If there are no images, the height of the collection view should be 0.

It really seems like it should be possible to use the intrinsic content size of the flow layout here.

Storyboard

Constraints

I've got about 15pt of space between each of the labels, collection view, and stack view (so, the vertical space). The collection view prototype cell has an image view in it. The image view has top, bottom, trailing and leading space all set to 0 to the collection view cell, and also has a 1:1 ratio.

Collection View Layout

To achieve the layout of one large image and 4 small images, I'm using SNCollectionViewLayout .

Data Source / Delegate

In my controller, in viewDidLoad , I've set the estimatedRowHeight of the UITableView to 400, and I've set the rowHeight to UITableView.automaticDimension .

In the tableView cellForRowAt, I dequeue a reusable custom UITableViewCell class, set various outlets on the table view cell, and call reloadData() on the collection view for the table view cell. In the storyboard, I've set the table view cell as the collection view's data source and delegate.

In the table view cell's awakeFromNib function, I've got it setting the corner radius, shadow, and using the following code for the flow layout on the collection view (which you can see in their example):

let snCollectionViewLayout = SNCollectionViewLayout()
snCollectionViewLayout.fixedDivisionCount = 4
snCollectionViewLayout.delegate = self
snCollectionViewLayout.itemSpacing = 10
collectionView.collectionViewLayout = snCollectionViewLayout

I've also implemented the optional SNCollectionViewLayoutDelegate protocol by writing the following function:

func scaleForItem(inCollectionView collectionView: UICollectionView, withLayout layout: UICollectionViewLayout, atIndexPath indexPath: IndexPath) -> UInt {
    if indexPath.row == 0 || collectionView.numberOfItems(inSection: indexPath.section) <= 2 {
        return 2
    } else {
        return 1
    }
}

This function is why the first image is twice the height and width as the rest.

Research

In trying to figure this out, I've checked the collectionView.collectionViewLayout.collectionViewContentSize inside the table view cell's cellForRowAt and willDisplay methods. In either case, it's (0,0).

I've also tried checking it in the collection view cell's cellForItemAt and willDisplay. Those log lines don't even print unless I add a height constraint to the collection view to force it tall, but then I don't have a good way to bring the height back down to what it should be, and any time I've tried, I got conflicting constraint warnings and really wonky stretched views (such as the stack view being totally squished).

In testing, I've forced a height constraint that's large enough for the collection view to fit, and when that happens, it renders correctly and the collection view content size is correct, so I know it's capable of keeping track (which can be seen here ).

Does anyone have any insight into this? I'd be happy to provide more code if you have any specifics on things to look into. I tried to give the full picture, while keeping this as short as possible (I know it's long).

I feel like the issue has something to do with the collection view being inside a table view cell.

Thanks in advance.

Answer 1

Keep a height constraint connection in your table view cell.

@IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!

And update the height constraint value programatically as per height calculations

self. collectionViewHeightConstraint.constant = 100 // set it to 0 if nothing to display