Your First iOS & SwiftUI App: Polishing the App

If you look back to Luke’s design, you’ll notice that he uses a couple icons in the app: one that you tap to open up the leaderboards view, and one that you tap to reset the game.

It turns out these particular icons are included in a massive library symbols that comes included in iOS that you can use in your apps, called SFSymbols.

Let’s see how we can use SFSymbols in our app, and use them to create the nice rounded button that Luke has designed.

Visit this page and download the app: https://developer.apple.com/sf-symbols/

Type in list to find the first item (list.dash)

Type in counter to find the second item (arrow.counterclockwise)

Show the list view to show the full name.

Create a new SwiftUI View file named RoundedViews.swift.

Add this:

struct RoundedImageViewStroked: View {
  var systemName: String

  var body: some View {
    Image(systemName: systemName)
      .font(.title)
      .foregroundColor(Color("TextColor"))
      .frame(width: 56.0, height: 56.0)
  }
}

struct PreviewView: View {
  var body: some View {
    RoundedImageViewStroked(systemName: "arrow.counterclockwise")
  }
}

Test it in the preview:

PreviewView()
PreviewView()
  .preferredColorScheme(.dark)

Add another that you’ll need for challenge purposes:

struct RoundedImageViewFilled: View {
  var systemName: String

  var body: some View {
    Image(systemName: systemName)
      .font(.title)
      .frame(width: 56.0, height: 56.0)
  }
}

Modify PreviewView accordingly:

VStack(spacing: 10) {
  RoundedImageViewStroked(systemName: "arrow.counterclockwise")
  RoundedImageViewFilled(systemName: "list.dash")
}