Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 Swift 5.5, iOS 15, Xcode 13

Part 4: A Second Screen

34. Create the Leaderboard View

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: 33. Challenge: Create a Leaderboard View Next episode: 35. Intro to Size Classes

This video was last updated on Mar 1 2022

Now that we’ve implemented a view for a row within the leaderboard, we can start putting together the main view for the leaderboard.

The leaderboard will be implemented as a VStack, with 3 views inside:

  • First, a HeaderView which will contian the text “Leaderboard”, and the “X” button.
  • Second, a LabelView that will show the labels “Score” and “Date” that will go on top of the rows.
  • Finally, we’ll have a RowView for each row.

Let’s put this together.

Add to TextViews.swift:

struct BigBoldText: View {
  let text: String

  var body: some View {
    Text(text.uppercased())
      .kerning(2.0)
      .foregroundColor(Color("TextColor"))
      .font(.title)
      .fontWeight(.black)
  }
}

Add to TextViews_Previews:

BigBoldText(text: "Leaderboard")

Add to LeaderboardView.swift:

struct HeaderView: View {
  var body: some View {
    BigBoldText(text: "Leaderboard")      
  }
}

Change body of LeaderboardView to:

VStack(spacing: 10) {
  HeaderView()
  RowView(index: 1, score: 10, date: Date())
}

Update HeaderView body to:

ZStack {
  BigBoldText(text: "Leaderboard")
  HStack {
    Spacer()
    Button(action: {}, label: {
      RoundedImageViewFilled(systemName: "xmark")
        .padding(.trailing)
    })
  }
}

Show bug with the “X” overlapping the text, say I’ll show how to fix that in the next episode.

Add to LeaderboardView.swift (copy final 3 lines from RowView):

struct LabelView: View {
  var body: some View {
    HStack {
      Spacer()
        .frame(width: Constants.General.roundedViewLength)
      Spacer()
      LabelText(text: "Score")
        .frame(width: Constants.Leaderboard.leaderboardScoreColWidth)
      Spacer()
      LabelText(text: "Date")
        .frame(width: Constants.Leaderboard.leaderboardDateColWidth)
    }
    .padding(.leading)
    .padding(.trailing)
    .frame(maxWidth: Constants.Leaderboard.leaderboardMaxRowWidth)
  }
}

Add to the LeaderboardView:

LabelView()

Inside LeaderboardView, put all inside a ZStack so we can set the background color:

ZStack {
  Color("BackgroundColor").edgesIgnoringSafeArea(.all)
  VStack(spacing: 10) {
    HeaderView()
    LabelView()
    RowView(index: 1, score: 10, date: Date())
  }
}