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

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 10. Challenge: Fill & Stroke Shapes Next episode: 12. Challenge: Put it All Together

This video was last updated on Mar 1 2022

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.