Your First iOS & SwiftUI App: Polishing the App

If we look at the Custom Alert that Luke designed, we can see that it contains 4 different text styles:

• One that reads “The slider’s value is”
• One that shows the actual slider value - the big bold number here
• One that shows your score
• And finally, the “Start New Round” text, which is part of a button.

To create this with SwiftUI, we want to create four different styled Text views; one for each of the above.

And good news - we’ve already done some of the work for this! Remember how we’ve been creating all of the styled text views in TextViews.swift?

Well, becuase we’ve carefully broken things down this way, we can actually reuse two of the text views we created earlier for this view.

For the first Text View, that reads “The slider’s value is”, we can reuse our InstructionText view.

For the second Text View, that shows the actual slider’s value - the big bold number, we can reuse our BigNumberText view.

But we don’t have Text Views for the bottom two text fields in the custom alert yet yet. We’ll create the basic scaffolding for these together, and then your challenge will be to finish their implementations on your own.

Add to TextViews.swift:

struct BodyText: View {
  let text: String

  var body: some View {
    Text(text)
  }
}

struct ButtonText: View {
  let text: String

  var body: some View {
    Text(text)
  }
}

Add to TextViews_Previews:

BodyText(text: "You scored 200 Points\n🎉🎉🎉")
ButtonText(text: "Start New Round")

Add to ButtonText:

.background(
  Color.accentColor
)

Add after (then move up):

.padding()

Add after (then move up):

.frame(maxWidth: .infinity)

Add to VStack in TextViews_Previews:

.padding()

Now that we have the basic scaffolding for the final two text views, your challenge is to finish the styling of these on your own.

To do this, take a look at Luke’s design in Figma, and apply the appropriate SwiftUI view modifiers to these views to get them to look similarly. We’ve used all of the view modifiers that you’ll need earlier in the course, so this should be a good review.

And don’t worry, if you get stuck, you can always compare your work to the solution. Good luck!

Add to BodyText:

.font(.subheadline)
.fontWeight(.semibold)
.multilineTextAlignment(.center)
.lineSpacing(12.0)

Add to ButtonText (bottom then move up):

.bold()

Add to ButtonText (bottom):

.foregroundColor(.white)

Add to Color.accentColor:

.cornerRadius(12)