5-Day Swift Coding Challenge: Day 3

To get started writing SwiftUI apps, launch your Swift Playground app, In the title screen, choose the Create a New App option.

You’ll see there is already a sample app created for you. This is the traditional Hello World app.

You’ll see that it comes with two files: ContentView and MyApp. The MyApp file is the actual app launching point. You can see the body property, it has this WindowGroup and then creates a ContentView. The ContentView is the main view of your app. You’ll be doing all your work in this file.

Notice there is a property called body, and inside of it is some UI code. Delete everything, and add the following:

Text("Hello")

Notice the simulator on the right updates with your new code. Add another Text.

Text("There")

Your text is now “stacked” on top of each. SwiftUI provides stacks to layout our views. The VStack behaves just like your witnessing and an HStack which organizes your layout in row. Let’s create an HStack.

HStack {
    Text("Hello")
    Text("There")
}

You’ll see the Texts are now placed one after another. You can even stack everything on top of each other by using a ZStack. Update it to the following:

ZStack {
    Text("Hello")
    Text("There")
}

Now everything put on top of each other. Okay, at this point we’re going to design a simple screen for the Swift Apprentice. Start by clearing the existing code and add a VStack.

VStack {

}

Now for the descriptive text. Add the following:

    Text("Swift Apprentice: Fundamentals")
    Text("Beginning programming with Swift! This book covers the fundamentals
      of Swift: Apple’s modern programming language for iOS, iPadOS, macOS,
      watchOS and beyond. ")

Finally, let’s add some icons for potential user actions such as reading, printing, or saving. Mind you, we won’t add the functionality. This is all for looks. First, we need to create an HStack.

HStack {

}

Notice the HStack is nested inside of the VStack. You can nest these stacks to create complex layouts. Now, add the icons.

Text("📕")
Text("🖨️")
Text("💾")

This doesn’t look very good. At least, not yet. It would be nice to increase the font size, add some padding, and provide some margins. You’ll play around with these soon. But first, you’ll add an image.