An easy prerequisite
If you have never seen Xcode before or aren’t sure what Xcode is, read the following article first to get yourself familiar with Xcode, then you will have everything you need to know. https://medium.com/@jpmtech/xcode-for-beginners-6a971968eadf
What are views
Views are used to build the different elements that make up the screen of an app referred to as the User Interface or UI. In the “hello world” app that we made in the previous tutorial (https://medium.com/@jpmtech/xcode-for-beginners-6a971968eadf) we see that Xcode starts by giving us a VStack, an Image, and a Text component on the screen. These are the different views that make up the globe image, and hello world text that we see in our preview.
Some of the most common views that we will see when writing code with SwiftUI are:
- VStack — for stacking other views vertically
- HStack — for stacking other views horizontally
- ZStack — for stacking views on top of each other
- Text — will add any text to your screen including emojis
- Image — will allow you to use any of the built-in images, or add your own.
- Spacer — a view that will fill as much space as possible
We will add more views to our knowledge base with time, but for now, these are the ones we will be using in this tutorial.
Adding and Changing views
Change the view is as easy as changing the data that makes up the view. For example, let’s change the text from “Hello, world!” to “Hello, Tommy!”. As soon as we change the text, our preview should also change.
We can add more views to our VStack (vertical stack) by clicking on the Library button (the plus button in the top right corner of Xcode). In the search box that appears, type the word “text”.
We can click on the one that just says “Text” and drag it into our code view. For our example, we want to drop this new Text view under the Text view that says “Hello, Tommy!”.
Once it is there, we want to change the placeholder text to say “Gina”, and change the “Hello, Tommy!” text to be “Tommy”. When everything is done, your code should look like the image below.
Because our text is in a vertical stack, that put Gina below Tommy, but everyone knows Tommy and Gina were a team, so let’s change the text “Tommy” to be “Tommy and Gina”. Let’s also change the text that says “Gina” to be the hands praying emoji. You can use CMD+CTRL+Space to open the emoji keyboard on your Mac.
Now your code should look like the following image.
That’s right, with the weight of the world pressing down on them, Tommy and Gina are living on a prayer. And just like that, you have built your first Bon Jovi lyrics app (one of many I’m sure).
We are nice people, and we don’t want to leave them with the weight of the world weighing them down. So let’s remove the image of the globe along with the associated modifiers (the lines that say .imageScale and .foregroundColor).
Our code should now look like the following image.
We also know from experience that Tommy and Gina never backed down. So we can move them up to the top of our screen by adding a spacer view below the prayer emoji. Let’s click the Library button again and drag and drop a Spacer below the prayer emoji. Our code should now look like the following image.
As we said before, spacers will take up as much space as possible without pushing your other content off the screen. If we wanted a view that had all the components equally spaced, we could put a spacer between each component.
Living everyday at the top is difficult, so let’s remove the spacer for now to allow them to have a regular life, a life right in the middle.
Learning about Stacks
Since Tommy and Gina are such good believers, they want to be on the same level as their prayer. One way to get the two views on the same level would be to change the VStack to an HStack. Let’s make the change and see what our code looks like.
Now our text views are aligned horizontally. One thing you may have noticed is that whichever view is listed first inside our stack, appears in the same order in our preview.
If we change the HStack to a ZStack, what do you think the code will look like?
It may be a little difficult to tell, but we can zoom in on the preview window and see that the praying hands emoji is now in front of the text Tommy and Gina. Which makes since, because Tommy and Gina want to be covered in prayers, and since their names were list first in the stack, they are placed farther back in the depth stack. For now we will change the ZStack back to a VStack so that we can learn about images.
Adding built-in images
After Tommy and Gina spent time together, they had a child. Now they would like to have a family picture added to our app. We can add an image to our VStack by clicking the Library button, selecting the Symbols tab, and typing child in the search box to find a picture that has all of them in it.
We can add the family portrait to the app by dragging and dropping the image below the praying hands emoji.
And now we can rest easy knowing that Tommy, Gina, and baby are happy with the way their custom app looks.
What State is this
In SwiftUI, you will often see a variable declaration that starts with “@State”. “@State” helps us keep track of what state that variable is in, and can tell the views that use the variable to update.
For example, let’s add a toggle switch above the Text view that say Tommy and Gina, and give the label of the toggle a Text of “Should show praying emoji”. Now we will create an “@State” variable that keep track of what the value of our toggle switch is. Our code should now look like the following image.
We add the word “private” to our variable declaration because state cannot be shared between screens, and that helps us remember to not share that variable with anything else. The “$” in front of our variable in the toggle switch is called a “2 way binding”. That means that we can update the variable in the code (like we do on line 11), or the toggle switch can also update our code when it is tapped.
Right now we aren’t using the State variable anywhere else in our code, so it is difficult to tell when our State variable changes. Let’s update the praying hands emoji to use our State variable. Update your code to match the following code from line 20 of the image below.
Our text is using what is referred to as a Ternary Operator to show the emoji if the shouldShowPrayingEmoji variable is true, and it will display as empty text if the shouldShowPrayingEmoj variable is false. Now if we tap our toggle switch in the preview, the emoji will either appear or disappear to match our toggle switch. Our text changes based on the “State” of the toggle switch.
Now that we have some of the basics down, let’s get started building our first app! Check out this article for a step by step guide to building your first app: https://medium.com/@jpmtech/an-easy-to-build-first-app-using-swiftui-70ced5b8ae78
If you want to see a similar tutorial for Android development, check out this link: https://medium.com/@jpmtech/basics-of-jetpack-compose-a019a765a1bc
If you have any questions on the topic, or know of another way to accomplish the same task, feel free to respond to the post, or share it with a friend, and get their opinion on it.
If you want to learn more about Swift and SwiftUI, you can check out the other articles I have written here: https://medium.com/@jpmtech
If you want to see apps that have been built with Swift and SwiftUI, you can check out my apps here: https://jpmtech.io/apps
Thank you for taking the time to make it this far. Have a great day!
