Day 20 Complete

2022-07-16 3 min read

Today was Day 20 of the 100 Days of SwiftUI challenge and the start project 2, after the completion of the first challenge app development yesterday.

Day 19 Challenge App

Today was a good overview of the different elements you can use to layout, arrange and style SwiftUI applications. Below is a set of my notes from the overview. Tomorrow we develop the ‘Guess The Flag’ app using these and previously learned elements.

This morning I couldn’t help but also go back and update yesterdays length conversion app that I developed for the challenge yesterday. I’d previously had two dictionaries for the length units, but this morning I’d awoken and realised that two was one too many and combined them into one. Then subsequently I’d realised that there were many more imperial length types that I’d (in my hurry) neglected to add. So I added those units also.

The thing about app development is, once you get started and beyond the blank page, it’s fun and addictive to just keep adding to the functionality and fiddling with the code.

In my Day 19 Challenge app, I decided the easiest way of doing it was to use a Dictionary instead of an array. Technically ForEach loops don’t work with swift arrays, so I found a hack to get around that. This allowed me to have a dictionary of unit names (String) and numbers (Double) representing the conversion of the unit to meters. This makes the final conversion calculation far easier as everything is in one place and all units relate back to meters.

I’ve put the app, called length converter ios, up on a public git repository for people to see and use.

Project 2 SwiftUI Overview Notes


  • HStack - stack views horizontally
    • has alignment and spacing properties
  • VStack - stack views virtically
    • has alignment and spacing properties
  • ZStack - stack views above and below each other.
    • has an alignment property only
  • Stack perform layouts, sort of like a grid in css.

Colors and Frames

  • Use .background(.red) to give a view a background color.
  • Use .foreground(.red) to change text or foreground colors.
  • You can also use (which is a view in and of-itself) to color views.
  • .frame() has properties for modifying the borders of views. You can give a view specific sizes, or min/max sized.
  • There are .primary and .secondary colours, which change depending upon the settings of the device.
  • IOS (and presumably iPados) have safe areas where all content should try and stick to (above the bottom and below the top where those little wifi/4g icons live).
  • You can stretch the background colours or hight of your app using .ignoreSafeArea(), which takes properties for a more selective setting (just top, just bottom etc).


  • Gradients are a view too.
  • There are three types:
    • LinearGradient (a line)
    • RadialGradient (circle)
    • AngularGradient (sort of an inverse radial gradient).
  • You can create your own gradients and save them into a variable or constant and then copy the gradient into multiple places to provide attractive or colourful backgrounds and decoration to other views.

Buttons and Images

  • Buttons have multiple closures and initializer options available.
  • Buttons have roles for screen readers.
  • Buttons can be styled using .buttonStyle(.style)
  • .tint can be used with a color.
  • Buttons can be used with an Image view


  • .alert can be used with a boolean variable and a button to create messages and request confirmation or feedback.