So you have a label ‘Title’ you want to add constraints to so that it looks like this

Screen Shot 2017-01-19 at 7.57.32 AM.png

We will first make the label and the UIImageView equal width by command selecting them both

Screen Shot 2017-01-19 at 8.01.31 AM.png

Screen Shot 2017-01-19 at 8.02.06 AM.png

Then add a top space constraint between the label and the image by

Screen Shot 2017-01-19 at 8.05.43 AM.png

Screen Shot 2017-01-19 at 8.05.51 AM.png

And then constrain the X position of the label by aligning the label to the super view

Screen Shot 2017-01-19 at 8.07.30 AM.png

Screen Shot 2017-01-19 at 8.07.39 AM.png

Then re-adjust the layout with good ol cmd + alt + =

Voila!

Screen Shot 2017-01-19 at 8.08.37 AM.png

Note : if you want to horizontally align with the element above you (instead of the whole container) control drag from the button or label you want to align to the element you want to align with.

Screen Shot 2017-01-19 at 8.56.29 AM.png

And if you want to add a play button into the middle of the UIImageView, select both and then

Screen Shot 2017-01-19 at 2.49.17 PM.png

Screen Shot 2017-01-19 at 2.49.43 PM.png

Trouble shooting

If you are having trouble command selecting both elements (for example to set the equal widths) check to see that your label or button didn’t get buried somewhere deep in another view.

For example here I am trying to add another label, and here I want to make it the same width as the title one above. But I can’t select them. It’s because my artist label got buried in another view.

Screen Shot 2017-01-19 at 8.15.30 AM.png

So fix this, drag the label out to the appropriate level.

Screen Shot 2017-01-19 at 8.17.16 AM.png

You should now be able to select shift select both (hold down shift while clicking on each).

Screen Shot 2017-01-19 at 8.18.01 AM.png

 

 

Advertisements