Your First iOS & SwiftUI App: Polishing the App

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())
  }
}