UICollectionViewCell sizeForRowAtIndexPath and Two Views side by side

Question

I am trying to accomplish what the Imgur app has done in one of their UICollectionViewCells in their about view. See below:

I want 1 UICollectionViewCell but instead of 3 sections of views inside the cell, I just want two (comments and posts).

For my UICollectionView I am resizing the cell at runtime to make it fit almost the whole screen minus a bit for margin's sake because I want to make a card view like Imgur.

I followed this stackoverflow post to get 2 views side by side: iOS Autolayout: two buttons of equal width, side by side

and I am able to get 2 views side by side of equal width. Here's what they look like in the storyboard:

but when I run the app, my views get stretched because of the autoresizing. See below:

How can I get the views to both be of equal width and have equal spacing between, before and after the views?

Answer 1

You can use UIStackView . It provides an easy way to lay out a series of views horizontally or vertically.

Select the two views and click on the new Stack button in the Auto Layout toolbar at the bottom right of the storyboard canvas:

Give constraints to your stack view from top, left, right and bottom. Then make your Attributes Inspector of the stack view like this:

NB. If you want to learn more about Stack View, follow this fantastic tutorial in Ray Wenderlich: https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views

Believe me most of the complexities associated with Autolayout will become trivial once you learned Stack View