Say you want to layout several components together in a StackView like this

Screen Shot 2017-01-20 at 7.43.16 AM.png

Drag out the stackview

Screen Shot 2017-01-20 at 7.45.01 AM.png

And stretch it out

Screen Shot 2017-01-20 at 7.47.50 AM.png

Then make it the same width as the image above. Control drag the stackview to the image

Screen Shot 2017-01-20 at 7.49.19 AM.png

Screen Shot 2017-01-20 at 7.49.25 AM.png

Next give it a height. In this case 70.

Screen Shot 2017-01-20 at 7.50.37 AM.png

Screen Shot 2017-01-20 at 7.50.46 AM.png

Then center it to the label above. Control drag the view to the artist label.

Screen Shot 2017-01-20 at 7.51.37 AM.png

Screen Shot 2017-01-20 at 7.52.09 AM.png

Then give it some distance between it and the label above.

Screen Shot 2017-01-20 at 7.53.23 AM.png

Screen Shot 2017-01-20 at 7.53.38 AM.png

Cmd + alt + = to readjust the layout…

Screen Shot 2017-01-20 at 7.54.20 AM.png

And now we can add in the components. Drag in a button and a progress bar.

Screen Shot 2017-01-20 at 7.55.21 AM.png

Put the progress bar in the middle by changing the horiztal stack view alignment property.

Screen Shot 2017-01-20 at 7.56.13 AM.png

Screen Shot 2017-01-20 at 7.56.20 AM.png

And then style and set sizes for the button however you wish. In this case 70×70.

Screen Shot 2017-01-20 at 7.57.41 AM.png

Screen Shot 2017-01-20 at 7.57.48 AM.png

You can then tune it up however you wish.

 

 

 

 

Advertisement