Your First iOS & SwiftUI App: Polishing the App

It’s time for your final challenge in this section!

In this challenge, you will practice everything you’ve learned so far in this course, by creating the views necessary for the bottom views.

Specifically, you’ll need to create a new view called LabelText for the label, that says “Score” or “Round”, and a new view called RoundRectTextView for the values that go beneath, that are styled with a Rounded Rectangle.

I recommend you put the LabelText inside TextViews.swift, and test it independently before you integrate it back into BackgroundView.

Similarly, I recommed you put RoundRectTextView inside RoundedViews.swift, and likewise test it independently before you integrate it back into backgroundview.

I’m not going to tell you the styles to apply, because you should be able to figure them out yourself by looking at Luke’s design in Figma.

This will be the hardest challenge you’ve had so far, because it pulls togeter so many concepts you’ve learned in the course. But I believe in you! And don’t worry if you get stuck, you’ll learn a lot by trying, and you can keep watching for the official solution when you’re ready.

Good luck!

Add to TextViews.swift:

struct LabelText: View {
  var text: String

  var body: some View {
    Text(text.uppercased())
      .font(.caption)
      .kerning(1.5)
      .bold()
      .foregroundColor(Color("TextColor"))
  }
}

Test in previews

LabelText(text: "9")

Add to RoundedViews.swift:

struct RoundRectTextView: View {
  var text: String

  var body: some View {
    Text(text)
      .kerning(-0.2)
      .bold()
      .font(.title)
      .frame(width: 68.0, height: 56.0)
      .foregroundColor(Color("TextColor"))
      .overlay(
        RoundedRectangle(cornerRadius: 21.0)
          .stroke(lineWidth: 2.0)
          .foregroundColor(Color("ButtonStrokeColor"))
      )
  }
}

Add to PreviewView:

RoundRectTextView(text: "100")

Update NumberView:

struct NumberView: View {
  var title: String
  var text: String

  var body: some View {
    VStack(spacing: 5) {
      LabelText(text: title.uppercased())
      RoundRectTextView(text: text)
    }
  }
}

Go back to ContentView.swift and show it working!

Make one small tweak: Add this to SliderLabelText:

.frame(width: 35.0)

Go back to ContentView.swift and show how the slider is nicely centered now.