Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 · Swift 5.5, iOS 15, Xcode 13

Part 1: SwiftUI Views & View Modifiers

11. Put it All Together

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: 10. Challenge: Fill & Stroke Shapes Next episode: 12. Challenge: Put it All Together
Transcript: 11. Put it All Together

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.