Build iOS apps in 10 days | Building User Interfaces in SwiftUI : 1
In this article, we’re going to go through the process of building the user-interface for our app in swift UI.
We’ll start by learning how to preview the app so that we can see how the app looks like when deployed.
From this part, I suggest you to follow along and try everything yourself explained from now on.
Learning by doing is the most effective when you want to master a skill
Once you created a new Xcode project, To start to see the preview of the UI that you’re going to build
Click that Resume button which will build your project and shows you a preview of how it looks on a real device.
Once you got the preview up and running, let’s get into the real deal.
In your new project, notice the code part from line 12 for now. You can see a keyword saying Text and has a “Hello World” in the braces which is shown on the preview and we also have a modifier “.padding()” at the end of it which basically add some spacing around the words in the preview.
So, what does this actually mean ? let’s break this piece of code down.
So basically, all the user interface elements in the UI must lie in between the two curly braces that I highlighted above.
But wait, that’s not possible… Usually apps have many user elements in the UI and you’re saying we can only put one UI element in a view.
So that’s where the container elements come into play and we’ll talk about them in the next article.
For now, let’s try to recreate the Hello World starter code from scratch.
Start by adding the below code in between the highlighted area.
Once you update the preview, you should see something like this
It’s a simple Text element with which you can show text in the UI. And you might have observed something like “.padding()” in the starter code before.
That’s a modifier to add some spacing around a UI element. As you can see in the above image, a blue border is tightly surrounding the text you’ve written in the code. By adding the padding modifier to the text element you can add some spacing to it.
This will add some space around the Text element. Now, this is where we were when we newly created the project.
We successfully re-created the broiler-plate code back again from scratch.
Writing these articles is taking longer and is harder than I expected. I’m having my semester exams right now, so I might be late posting the next one. Stay tuned by following me, you’ll get notified when I post the continuation.
This might be incomplete, I will definitely update this once I finish my exams. As most of you were waiting for the next part I published this in a hurry. If you liked it, make sure to leave a clap. Thanks ;)