Your First iOS & SwiftUI App: An App from Scratch

Feb 13 2023 · Swift 5.7, iOS 16, Xcode 14

Part 1: Getting Started with SwiftUI

05. SwiftUI Views

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 04. Create an Xcode Project Next episode: 06. SwiftUI View Modifiers

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

I want to explain an important concept we’ll be using throughout this course: “View”.

Course Materials

You can either continue on from your own project or use the starter project in the materials for this episode. Every episode will have a starter and final project, so if you get stuck or mess something up, you can check your own project against mine. You may also find reference images in here, like this one!

Setting up Indentation

Open up ContentView again.

Adding Views

Ok, to keep an eye on what we’re trying to do I’ve got an image of the basic layout we’re trying to create, here. It’s the same thing we looked at in Figma.

"PUT THE BULLSEYE AS CLOSE AS YOU CAN TO"

🎯🎯🎯\n

Adding Views from the Library

Next in our design, we need another text view that says the random target value to select.

Text("89")

Adding a Slider

All right, looking so far so good. Next up, we need a slider, right? So we can do that the same way.

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

Add Views to Stacks

All right, so what do we need next? We need some text to the left and right of the slider.

Text("1")

Text("100")

Adding a Button

All right, the one last thing that we’re going to add right now is we’re going to add this hit me button, which is right below the slider.

Button("Hit me") {
  
}

Preview Options

So at the bottom of this file, as I mentioned before, there’s some code that controls the previews that we see over here on the right hand side.