Here is how you do simple autolayout. Everything hinges of one element. So start at the top and work your way down.Screen Shot 2016-04-13 at 2.55.43 PM.png

Anchor Track Name to the top by dragging from label towards the top.

Screen Shot 2016-04-13 at 2.55.57 PM.png

This will give you one constraint. But you still need something to anchor you vertically.

Screen Shot 2016-04-13 at 2.56.09 PM.png

Control drag from Track Name down

Screen Shot 2016-04-13 at 2.59.21 PM.png

Screen Shot 2016-04-13 at 2.59.28 PM.png

Blue means you are good. Orange means you are OK, it just wants to adjust your layout. But Track Name is now good.

Next let’s anchor the Play button directly underneath the Track Name. Control drag from Play button to Track name again.

Screen Shot 2016-04-13 at 3.04.21 PM.pngScreen Shot 2016-04-13 at 3.04.28 PM.png

 

Now, same problem as before, Play is partially defined. We need to anchor it too. Control drag again down into the open.

Screen Shot 2016-04-13 at 3.07.21 PM.pngScreen Shot 2016-04-13 at 3.07.28 PM.png

Now we need to hook up the next previous buttons. Here we can control drag from Play to each selecting Horizontal spacing.

Screen Shot 2016-04-13 at 3.11.25 PM.pngScreen Shot 2016-04-13 at 3.11.57 PM.png

 

 

And then the magic move is to a line on the play button by going

Screen Shot 2016-04-13 at 3.44.46 PM.pngScreen Shot 2016-04-13 at 3.44.52 PM.png

And repeating for the next button.

For the ImageView let’s set it up so that there is a always a margin to the right. Control drag from image view to the right border

 

Screen Shot 2016-04-13 at 3.46.21 PM.png

 

Screen Shot 2016-04-13 at 3.46.39 PM.png

Now to get it to respect the border, click on the constraint and go adjust the options on the right margin as follows

Screen Shot 2016-04-13 at 3.47.51 PM.pngScreen Shot 2016-04-13 at 3.48.35 PM.png

This means give me at least a 15 margin, with a lower priority of 500.

Repeat for the other side and bottom

Screen Shot 2016-04-13 at 3.50.27 PM.png

 

Now another magic move is to have a constraint on it’s aspect ratio so it stays a square.

Screen Shot 2016-04-13 at 3.51.05 PM.png

And of course anchor it to the top via the play button.

Then to fix the final layout issues on the image view add various anchors around the image view, and you can always check and see what constraints are missing by looking in the upper right hand corner.

 

Screen Shot 2016-04-13 at 4.12.50 PM.png

Screen Shot 2016-04-13 at 4.12.57 PM.png

Screen Shot 2016-04-13 at 4.13.04 PM.png

Screen Shot 2016-04-13 at 4.13.09 PM.png