Here is how to do autolayout to produce this

Screen Shot 2016-11-16 at 4.28.54 PM.png

UIImage

First let’s style the image. Start with no constraints.

Screen Shot 2016-11-16 at 4.02.14 PM.png

First one we want to add is a constraint to the top.

Screen Shot 2016-11-16 at 4.02.23 PM.png

Then tie it to the left

Screen Shot 2016-11-16 at 4.02.32 PM.png

Then give it equal width and height

Screen Shot 2016-11-16 at 4.04.18 PM.png

UIImage should not be constrained. What we’ve done here is effectively pinned it to the upper left hand corner.

Screen Shot 2016-11-16 at 4.04.25 PM.png

Title

Screen Shot 2016-11-16 at 4.12.02 PM.png

Here we want to constain the top of the title label so it’s flush with the UIImage.  Cntrl drag from title to UIImage and select Top.

Screen Shot 2016-11-16 at 4.12.18 PM.png

Screen Shot 2016-11-16 at 4.12.33 PM.png

Now constrain or bind the spacing from the left of the label to the image by using the constraint tools near the bottom of the editor.

Screen Shot 2016-11-16 at 4.13.42 PM.png

Screen Shot 2016-11-16 at 4.13.57 PM.png

Now press Cmd – Alt- = to get the images to fresh themselves in the layout. That will remove orange lines.

Screen Shot 2016-11-16 at 4.15.06 PM.png

Expand the title label and give it now a constraint to the right.

Screen Shot 2016-11-16 at 4.16.18 PM.png

Artist

Repeat with artist, starting with left and right constraints.

Screen Shot 2016-11-16 at 4.16.58 PM.png

Screen Shot 2016-11-16 at 4.17.07 PM.png

Screen Shot 2016-11-16 at 4.18.49 PM.png

And voila! You are autolayed out!

Screen Shot 2016-11-16 at 4.28.54 PM.png

Thanks to my friend @kevski for showing me how to do this.

Note: One assumption I didn’t cover is that the CollectionViewItem height (70) must equal the image size and surrounding constraints. So if you size your image (50) and add a top and bottom (10) they much equal 70. You may not be able set the CollectionView height in the editor (may be grayed out) so you need to click and drag this height yourself.

 

Advertisements