Your First iOS & SwiftUI App: Polishing the App

Now that we have our fancy new Rounded Image Views in place, we can use them to create the reset game and leaderboard buttons.

The strategy we’re going to take is to create a new view called BackgroundView that contains the views that are in the four corners of the screen. And then we’ll place that BackgroundView behind our main view.

Let’s give this a try and put together the background view!

Create new SwiftUI view called BackgroundView.

struct BackgroundView: View {
  @Binding var game: Game

  var body: some View {
    VStack {
      TopView(game: $game)
    }
    .padding()
    .background(
      Color("BackgroundColor").edgesIgnoringSafeArea(.all)
    )
  }
}

struct TopView: View {
  @Binding var game: Game

  var body: some View {
    HStack {
      Button(action: {}) {
        RoundedImageViewStroked(systemName: "arrow.counterclockwise")
      }
      Button(action: {}) {
        RoundedImageViewFilled(systemName: "list.dash")
      }
    }
  }
}

struct BackgroundView_Previews: PreviewProvider {
  static var previews: some View {
    BackgroundView(game: .constant(Game()))
  }
}

Add a spacer between the buttons:

Spacer()

Add a NumberView:

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

  var body: some View {
    Color.gray
      .frame(width: 56, height: 56)
  }
}

Add a BottomView:

struct BottomView: View {
  @Binding var game: Game

  var body: some View {
    HStack {
      NumberView(title: "Score", text: String(game.score))
      Spacer()
      NumberView(title: "Score", text: String(game.round))
    }
  }
}

Add to BackgroundView:

Spacer()
BottomView()
  .frame(height: 88)

Go back to ContentView.swift, and replace the background color with:

BackgroundView(game: $game)

Go to NumberView.swift and replace body as follows:

VStack(spacing: 5) {
  LabelText(text: title.uppercased())
  RoundRectTextView(text: text)
}

Go back to ContentView.swift and show it working!

Make one small tweak: Ad this to SliderLabelText:

.frame(width: 35.0)

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