Your First iOS & SwiftUI App: An App from Scratch

In this episode, we’re going to finally start implementing the app in Xcode. But before we get started, I want to explain an important concept we’ll be using throughout this course: “View”.

This is one of those cases where it’s better to show you first, and then tell you afterward.

Here’s what the Bullseye screen will look like at the end of this episode, but with all the visible views highlighted and labeled. Note that some of the views are invisible, and I’ll point them out to you soon.

A view is anything that gets drawn on the screen. In this screenshot, it seems that just about everything is a view: the text items, the buttons and the slider are all views. In fact, every user interface control is a view.

Some views can act as containers for other views. The biggest view in the screenshot is one of these: it’s the view representing the screen itself, and it contains all the other views on the screen: the text items, the buttons and the slider.

There are different types of views in SwiftUI. These different types of views have one thing in common: they can all be drawn on the screen.

What makes each type different is a combination of what they look like and what they do. Here are the views that you’ll be using in this episode:

• First, there’s Text. Text is a view that displays one or more lines of read-only text. The “Put the bullsee as close as you can to” message is a Text view, as are the various other labels in the app. Even the text “Hit Me” that goes inside the button is a Text view.

• Second, there’s Slider. The Slider lets a user enter a number by sliding a control (which is called a thumb) along a straight-line track where one end represents a minimum value and the other end represents a maximum value.

I want to point out that in most apps, you wouldn’t make the user enter a precise number value like this using a slider, because that can be kind of frustrating. However, for a game like Bullseye, the slider makes the game challenging, which is a good thing. After all, we don’t want to make it too easy for the player!

• Third, there’s Button. Button is a view that performs an action when you tap on it. You can put any view you want inside a button - here, we’re putting a Text view that says “Hit Me” inside the button.

• Fourth, there’s Vertical Stack, or VStack for short. VStack is a view that acts as a container for other views. The views it contains are called its children, and VStack’s job is to arrange its children in a vertical stack. Parents - don’t try this with your children at home.

We’ll be using a VStack to stack up the four blue children views you can see here: the instructions, the target label, the slider and labels, and then the Hit Me Button.

Unlike the Text and Button views, the VStack view is invisible by default.

• Fifth and finally, there’s Horizontal Stack, or HStack for short. HStack is like VStack in that arranges its children views, but horizontally instead of vertically.

We’ll be using an HStack to arrange the slider and its two labels in the order you see here.

Allright - now that you understand the concept of Views in SwiftUI, it’s finally time to open up Xcode!

Note that since SwiftUI creates user interfaces in code, this episode will give you a little preview of what it’s like to write code in Swift. At this point in the course, you won’t be writing code - you’ll just be looking at the automatically generated code or tweaking it slightly. So you might not understand every single line right away, or what all the strange syntax means - especially if you’ve never done computer programming or Swift development before.

That’s OK - all that’s important at this stage of the course is that you get the general idea of what’s going on. As you proceed through this course, you’ll go over these concepts again and again until they solidify in your mind. It’s all about learning via repetition.

Open Xcode (Applications/Xcode, Dock for easy access) Create a new project - iOS App - Bullseye - SwiftUI - SwiftUI App. No Core Data, no Tests. Tour of project.

Review ContentView.swift. Resume automatic preview. Select iPhone touch (7th gen) - Run.Change text on label to “Hello, SwiftUI!” using Cmd-Click \ Inspect in Canvas.

Show preview shortcut: Option-Cmd-P; where appropriate. Also show build your app with Option+B where appropriate. Change text on label to “PUT THE BULLSEYE AS CLOSE AS YOU CAN TO” in code. Run. Hit ctrl-command-space in Xcode to bring up emoji editor, add in “🎯🎯🎯\n” beforehand.

Drag in a Text field from the Object Library into the Canvas and set it to “89”. Show that it automatically embeds it in a VStack in the code. Drag a slider from the object library. Update line to:

Slider(value: .constant(50), in: 1.0...100.0)

Drag a text to the left of slider, set it to “1” and show how it’s embedded in an HStack.Drag another text in, but this time drag it inside the code and set it to “100”. Drag in a button (into the code this time), and set as follows:

Button(action: {}) {
  Text("Hit me")
}

Explain ContentView_Previews and add this in for a landscape preview:

ContentView()
  .previewLayout(.fixed(width: 568, height: 320))

If you got stuck, I’ve placed a download of the project up to this point in the course materials. You can also check out the next episode, which goes into more detail about how some of the code in this project actually works.

Otherwise, congratulations, we’ve already crossed off the first four items from our to-do list: adding the instructions, target label, slider, and “Hit Me” button to the game!

I understand that at this stage, the SwiftUI code you saw in the code editor may have been mostly gibberish to you, but that’s OK. We take it one small step at a time, and later on in this course - and in this learning path - we’ll break it all down for you in great detail.

Remember: it’s all about learning via repetition.