Hacking with Swift — Challenge 6

Review

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.

Challenges

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:

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:

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:

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!