Hacking with Swift — Challenge 6

I really hope this time the article will be saved somewhere. I will also maintain local copies of it from now henceforth.


Before we face our challenge we need to review what was learned in this project. Specifically:

  • We can force our app to run only in specific orientations. This is done in Project > General > Deployment Info > Device Orientation.
  • Aspect Ratioconstraints ensure the width and height of a view scale evenly.
  • A pipe symbol in Visual Formatting Language means the edge of the parent view.
  • Visual Formatting Language can create multiple constraints at a time.
  • Interface Builder will warn us if we try to create invalid or incomplete constraints.
  • The safe area layout guide automatically excludes rounded edges and any notch.
  • Visual Formatting Language metrics let us share sizes across views more easily.
  • We can create Auto Layout anchors using constant values.
  • Each view has multiple Auto Layout anchors we can modify.
  • Auto Layout priority values go up to 1000.
  • Visual Formatting Language can create horizontal or vertical constraints.
  • Auto Layout lets us position one view relative to another.


Challenge 1: Try replacing the widthAnchor of our labels with leadingAnchor and trailingAnchorconstraints, which more explicitly pin the label to the edges of its parent.

To realise this we need to replace the widthAnchor constraints with leading and trailing ones. I have done it in this way:

Screen Shot 2019-03-05 at 12.50.59

Building and running it seems fine.

Challenge 2: try using the safeAreaLayoutGuide for those constraints. Check its functioning in landscape orientation.

I solved this in this way:

Screen Shot 2019-03-05 at 12.58.12

It works. Just now I would like to know how we can manage to have the landscape orientation as good as it was using VFL, but I guess this is the subject of our next challenge.

Challenge 3. try making the height of your labels equal to 1/5th of the main view, minus 10 for the spacing.

After a good bit of head scratching (which eventually solved itself because I had not typed the .isActive = true) I managed to solve it in this way:

Screen Shot 2019-03-05 at 13.18.57

The only thing is that the bottom label is not stopping before the safe area and it clearly looks smaller than the others. Let’s see if I can fix this.

Mmm … changing the constant to 0, building and running, then stopping and changing it back to -10 solved it … Bah …

Now let’s press Publish and see what happens! I hope you can read this!


If you like what I’m doing here please consider liking this article and sharing it with some of your peers. If you are feeling like being really awesome, please consider making a small donation to support my studies and my writing (please appreciate that I am not using advertisement on my articles).

If you are interested in my music engraving and my publications don’t forget visit my Facebook page and the pages where I publish my scores (Gumroad, SheetMusicPlus, ScoreExchange and on Apple Books).

You can also support me by buying Paul Hudson’s books from this Affiliate Link.

Anyways, thank you so much for reading!

Till the next one!

Published by Michele Galvagno

Professional Musical Scores Designer and Engraver Graduated Classical Musician (cello) and Teacher Tech Enthusiast and Apprentice iOS / macOS Developer Grafico di Partiture Musicali Professionista Musicista classico diplomato (violoncello) ed insegnante Appassionato di tecnologia ed apprendista Sviluppatore iOS / macOS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: