Create Single ViewController project. Add a UITableView.

Screen Shot 2017-06-04 at 8.31.52 AM.png

Pin it to the walls.

Screen Shot 2017-06-04 at 8.32.38 AM.png

Turn off the default separator.

Screen Shot 2017-06-04 at 8.33.14 AM.png

Drag out a UITableViewCell

Screen Shot 2017-06-04 at 8.34.10 AM.png

Add a UIImageView

Screen Shot 2017-06-04 at 8.35.22 AM.png

Set it’s height and width and position.

Screen Shot 2017-06-04 at 8.36.07 AM.png

Screen Shot 2017-06-04 at 8.36.20 AM.png

Now add x2 labels to the side.

Screen Shot 2017-06-04 at 8.37.08 AM.png

Now for the stackView. Select the two labels and then embed them in the stackView using the button at the bottom.

Screen Shot 2017-06-04 at 8.38.19 AM.png

Screen Shot 2017-06-04 at 8.38.36 AM.png

Now select the UIImageView and the new stackView and embed those in a stackview.

Screen Shot 2017-06-04 at 8.39.31 AM.png

Now here is the important bit. Right now you have constraint violations.

Screen Shot 2017-06-04 at 8.42.34 AM.png

The way to fix these is to pin the outermost UIStackView to the x4 edges.

Screen Shot 2017-06-04 at 8.43.25 AM.png

Screen Shot 2017-06-04 at 8.43.49 AM.png

This will line everything up nicely.

Now there is still a constraint violation. But it has nothing to do with stackview. It’s a hugging issue.

Screen Shot 2017-06-04 at 8.44.51 AM.png

Here it doesn’t know what priority to give vertical hugging for the x2 labels. Which one should expand to fill the height of the cell. They are both the same.

The way to resolve this is to change the hugging priority of one of the labels. Make the bottom one hug more than the top.

Select artist and set it’s vertical hug to 252.

Screen Shot 2017-06-04 at 8.49.10 AM.png

And voila! A stackview in a tableviewcell.

Screen Shot 2017-06-04 at 8.49.40 AM.png

Also you can give your view a 1:1 aspect ratio if you like.

Screen Shot 2017-06-04 at 8.56.06 AM.png

Links that help
https://developer.apple.com/videos/play/wwdc2015/407/
the 5min marks show you how to do this

Advertisements