Your First iOS & SwiftUI App: An App from Scratch

Feb 13 2023 · Swift 5.7, iOS 16, Xcode 14

Part 1: Getting Started with SwiftUI

06. SwiftUI View Modifiers

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 05. SwiftUI Views Next episode: 07. Objects, Data & Methods

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 06. SwiftUI View Modifiers

Apple’s Human Interface Guidelines

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Alright! At this point, we’ve created the bones of our user interface.

Text("100")
   .opacity(0.5)
Text("100")
  .opacity(0.5)
  .border(Color.red, width: 2)
Text("100")
    .border(Color.red, width: 2)
    .opacity(0.5)
.bold()
.bold()
.multilineTextAlignment(.leading)
.multilineTextAlignment(.center)
.bold()
.multilineTextAlignment(.center)
.linespacing(4.0)
.font(.title)

Dynamic Type

Now you’ll notice here that rather than setting this to a hard-coded font size, like 12, 14, et cetera it’s asked us to choose a preset font size such as title.

.font(.footnote)

Preview Dynamic Type Variants

One of the nice things about SwiftUI is you can actually get a preview of what your app would look like if the user selects a different size for the dynamic type size.

Letter Spacing

OK, it’s looking pretty close to Luke’s design at this point, but there’s something that doesn’t look quite right, and it’s pretty subtle. Can you notice what it is?

.kerning(2.0)