Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 Swift 5.5, iOS 15, Xcode 13

Part 3: A Custom Alert

26. Challenge: Create a Custom Alert

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: 25. Challenge: More Text Styles Next episode: 27. Display a Custom Alert

This video was last updated on Mar 1 2022

Now that we’ve created the four text views that we’ll be using in the custom alert, we now have all of the building blocks necessary to create our custom alert view.

Like we did last time, let’s create the basic scaffolding of this together, and than your challenge will be to see if you can put this together on your own.

Let’s dive in!

Create a new SwiftUI View inside Views, name it PointsView.swift.

Add to PointsView_Previews (copy this from ContentViews.swift):

PointsView()
PointsView()
  .previewLayout(.fixed(width: 568, height: 320))
PointsView()
  .preferredColorScheme(.dark)
PointsView()
  .previewLayout(.fixed(width: 568, height: 320))
  .preferredColorScheme(.dark)

Add to ContentsView.swift:

Color.gray
  .padding()
  .frame(maxWidth:300)
  .background(Color("BackgroundColor"))
  .cornerRadius(21)
  .shadow(radius: 10, x: 5, y: 5)

Now that we have the basic scaffolding for PointsView, your challenge is to replace the gray placeholder with the actual content for your view.

Basically, this should be a VStack with spacing 10, which has four text views inside: InstructionText, BigNumberText, BodyText, and ButtonText. For the final text view, ButtonText, place that inside a Button.

Give it a shot, and you can check back here for the solution when you’re done. Good luck!

Add to PointsView.swift:

VStack(spacing: 10) {
  InstructionText(text: "The slider's value is")
  BigNumberText(text: "89")
  BodyText(text: "You scored 100 Points\n🎉🎉🎉")
  Button { } label: {
    ButtonText(text: "Start New Round")
  }
}