I am so excited about this article; after watching the announcements that Apple shows us in the WWDC, I am excited to start playing and coding with the new SwiftUI Framework, and also the improvements that they did with Augmented reality!But the article this time is going to focus on the new SwiftUI so for that we are going to start answering a few questions:What is Swift UI?Well, if you missed the WWDC or were busy, you can always take two hours of your time and watch it here.
As a developer, it’s important that you are up to date with important updates and announcements for the programming language that you use.
If you don’t have two hours to watch the video, I can tell you that Swift UI is an interactive framework that Apple launched.
This will help with your design to make them cross-platform, so use them for MacOS, TvOS and of course iOS.
Just like React from Facebook or Flutter from Google, you can create components and reuse them to organize your views!What do you need for this tutorial?Well, for this tutorial I am using Xcode Beta version 11.
0 and also Swift version 5.
0.
1, so I think so far the last version for everything.
Let’s start!We are going to create a new project choosing single view application like the picture below:New project Xcode — Single View AppAfter choosing Single View App we’re going to name our project Landmarks.
Make sure that the checkbox for SwiftUI is selected and then click next:Naming the project and choosing the frameworkOK, so now that we are pretty much ready, you are going to see something like this:Project created with Swift UIIf you go to the Apple page for the Swift UI tutorial, you can see that they have a preview image of your UI and that you can update it in real time.
In this case, I am still using Mojave so I can’t do that yet, but I will post a new article when I update to Catalina.
The only difference is that you won’t have the live preview of your UI and will need to compile every time, but with Xcode 11 the compiling time is a lot better, so let’s run the project and see our first “Hello World”!First Hello world using SwiftUIOK, so now let’s go back to the code.
If you click on the contentView.
swift file, you can see that we have two structs.
One is to declare the view’s content and layout that also conforms to the View protocol, and the second struct declares a preview for that view.
Now let’s play a little bit.
Under the Text(“Hello World!”) add these two methods: .
font and .
color.
The methods that we use to modify the view are called Modifiers.
Each modifier returns a new view, so it’s pretty common to chain multiple modifiers vertically like below:Adding font style and colorSo yes, it’s super easy to modify your UI.
I love how clean it looks, but it’ll also help to keep a standard for every app using this kind of method, so if you run your app now you should see something like this:Now it’s time to play with some stack views to start giving some type of structure to this project.
The code for that, in this case, is VStack{} because we want to add a vertical stack view.
We’re also going to add another Text and change our text string, so it should look something like this:So now let’s run the app!.You should see something like this:Now, we don’t want the title to be centered; we want it to be aligned to the left, so let’s do that using the alignment method in our StackView:Alignment method for VStackWhat we want to achieve right now is a UI like this:Example viewTo make our view similar to the one above, we’ll need to use a few modifiers, so we’re going to add another stack view, this time horizontal.
For that we are going to use HStack.
Not only that, but you can see in the image above we need a spacer.
That’s simple; just write the method Spacer().
Now we can add another text to show the state of the National Park using the modifier Text, and now we just need to give some margin to our UI.
For that, we use the modifier called .
padding; see the code below:So now if you run your app you should see something like this:Running appNow is when it gets interesting.
Our next integration is going to be an image.
For this we’ll need to create a new custom view that applies a mask, border, and a drop shadow to the image, but first, we are going to upload our image to the assets.
Just drag and drop it inside the folder.
OK, so after dragging your image to the assets folder, you now need to create a new SwiftUI view.
Choose File > New > File to open the template selector again.
In the User Interface section, click to select SwiftUI View and click Next.
Name the file CircleImage.
swift and click Create, like the image below:Creating a new swift UI viewSo now that we have our new file ready, we are going to replace the Text modifier for an Image initializer and between parentheses write the name of our image like this: Image(“turtlerock”)Then we’re going to add a call to .
clipShape(Circle()) to apply the circular clipping shape to the image.
Now we create another circle with a gray stroke, then add it as an overlay to give the image a border.
You can see the code below:Now we have two Swift UI views ready to interact with each other, so let’s put everything together.
It’s pretty easy; we add a new stack view to our contentView file, wrapping the three texts using VStack, and on top of everything we are going to call our circle image struct like this: CircleImage().
Let’s take a look to the code below:And you can see the result of our code here:Result of the two swift UI ViewsI’m going to finish this tutorial here today; it’s pretty basic but you can see how good it looks and how everything is getting together.
It looks well-organized and it’s also easy to reuse components in other views.
For part two of this swift UI view, we are going to add a background to the app using MapKit and also start building list and playing with navigation!I hope you liked this article, guys.
I based everything from the Apple Swift UI tutorial; a good way to learn new topics is teaching them to others, so follow me and be ready for part two of this new Framework.
Also thinking of starting making videos, so I will update you with my youtube channel if that’s something that I start doing!.