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
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!
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!