Your First iOS & SwiftUI App: Polishing the App

In the previous course, you learned how you can use SwiftUI’s View Modifiers to modify the style of your views.

So far, you’ve only used a handful of view modifiers: .kerning, .bold, .font, .lineSpacing, and .multilineTextAlignment, to be speficic. But there’s a TON more view modifiers than that!

In this episode, you’ll learn about four more: .padding, .foregroundColor, .background, and .cornerRadius. You’ll use these to style the “Hit Me” button in your app, and to improve the padding for some of the other views.

Let’s get back to Xcode and start styling!

Apply styles to the Text("Hit me") View in this order:

.background(Color.blue)

.foregroundColor(Color.white)

.padding(20.0)

If you recall from the last course, you learned that each time you apply a View Modifier, it returns a new copy of your View, but with the new style applied.

For example, you learned that if you take a text view, make it transparent, and then apply a border, the result will be a border that is NOT transparent - at least if you do it in that order.

Let’s use that idea of “order matters” to think about what happened here.

• First, you had a plain View that said “Hit Me”. We’ll call that View #1.
• Then, you set took View #1 and appied a blue background color, which returned a new view, which we’ll call View #2.
• Then, you took View #2 and applied a white foreground color to it, and got View #3.
• Finally, you took View #3 and applied some padding around the edges. The way padding works is it takes the original view, adds some extra transparent space around the edges, and returns a new, bigger view.

If we want the blue background color to apply throughout the View, we need to apply the padding before we set the background color, like this.

This time, we apply the padding first, which creates a new, bigger view #2.

Then, we can apply the background and foreground color to the entire bigger view.

Little Swifty once told me that size doesn’t matter…

…but order does!

So let’s fix this up and keep styling.

Move the padding modifier to the top with Editor\Structure\Move Code Line Up, or Option+Cmd+[.

Add this:

.cornerRadius(21.0)

Then this:

.bold()

Show how it doesn’t work. Command click on the bold modifier and show how it returns a Text view, while as the others return a normal view. So move that one up to the top with Option+Cmd+[.

Add this:

.font(.title3)

Explain how we need to capitalize the “Hit Me” text to match Luke’s design. Say we could just capitalize the text, like we did in the last video, but what if Luke changes his mind later and wants it lowercase?

Open Help\Developer Documentation and navigate to Swift\Standard Librar\String. Scroll down to about the 50% mark and show that it has an .uppercased() method.

Apply that to the Hit Me button:

.uppercased()

Fix up the old text as well:

Text("🎯🎯🎯\nPut the Bullseye as close as you can to".uppercased())

Add this padding to the instructions view:

.padding(.leading, 30.0)
.padding(.trailing, 30.0)

Add this padidng to the HStack:

.padding()