Your First iOS & SwiftUI App: Polishing the App

Currently, the background of Bullseye is the default plain white. But in Luke’s design, he calls for a subtle gray for the background color.

In the previous video, you learned one way of setting the background of a view: using the background View Modifier. Let’s start by trying that out and seeing if that works for us in this case.

Add to the bottom of the VStack:

.background(Color.gray)

Option-click the VStack, say embed in VStack, and then rename the top VStack to ZStack. Then add this:

Color(.gray)

Then from the Object Library, drag in “Edges Ignoring Safe Area” to result in this:

Color(.gray)
  .edgesIgnoringSafeArea(.all)

You’ve already learned how you can use Apple’s built in colors, like blue, white, red, green, and so on. But Apple hasn’t made a predefined color for this exact gray we’re looking for; what should we do in this case?

There are two ways you can do this: you can create your own color in code, or you can create your own color using the Xcode asset catalogue.

Let’s start with the first method, which is to create your own color in code.

Open Luke’s design, see the background color is #F3F8FD

Go to this site and plug it in: https://www.rapidtables.com/convert/color/hex-to-rgb.html

You’ll see rgb(243, 248, 253)

Color(red: 243.0 / 255.0, green: 248.0 / 255.0, blue: 253.0 / 255.0)

We’ve seen the first way to create a custom color: create it in code.

Let’s look at the second way to create a custom color, which is to use the asset catalogue.

The Asset catalogue is a special file that’s included in your project that you can use to store the images, colors, icons you need for your app.

Each time you add something to your asset catalogue, you give it a name like you see circled in red here, and then in your code it’s easy to refer to that item by its name.

The reason using the asset catalogue is better than hard-coding the color is that now you can easily re-use the color throughout your app, without having to hard-code the same values in multiple places. That way if you need to change the color later on, you can do it in just one place.

Using the asset catalogue for colors has one other big benefit, which you’ll learn about in the next episode. But first, let’s convert this color from hard-coded to using the asset catalogue!

Go to the asset catalogue. Click the + button and add a new color set.

Open the inspector, and in the attributes inspeector, set Appearances to None.

Click the color, and set the Input Method to 8-bit Hexadecimal. Paste in the value from earlier: #F3F8FD

Color("BackgroundColor")

Point out the other two things in the catalogue: the App Icon, and the Accent Color. Explain how the accent color is used by some controls to add a spot of color to your app, kinda like an accent wall in your house. One of the controls that uses this is the slider.

Point out that SwiftUI doesn’t currently provide a way to modify the thumb track on the slider, but hopefully that will come in a future update.

Change the accent color to sRGB \ 8-bit Hexadecimal \ #FC574A.

Show that it looks nice now.

Make a new color set for ButtonColor. Set Appearances to none. Switch Input method to 8-bit and paste this in: #475AFB

.background(Color("ButtonColor"))

There’s one more thing I want to show you before we move on. If you look at Luke’s design, the button still isn’t right, because Luke has applied a subtle gradient to the button.

A gradient is a fancy way of saying a range of position-dependent colors. In this case, Luke is calling for a gradient that goes from a white that’s 30% transparent at the top of the button, to a fully clear color at the bottom of the button. This gives a subtle but nice effect.

Our strategy here will be to expand our background of the button a bit. Instad of having the background be just a blue color, we’ll have it be a ZStack. The ZStack will contain the blue background, and then a linear gradient, which will be on top. Let’s give this a shot.

Option-click Color, say embed in HStack, then rename to ZStack. Bring up objet library, go down to Paints section, and drag in a Linear Gradient.

Edit as follows:

LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.3), Color.clear]), startPoint: .top, endPoint: .bottom)