SwiftUI - Start learning SwiftUI (First Step)

Note: This article is a multi-part series of SwiftUI from basics to advance, please follow along as there will be a link to the next article at the end of this one.

I have tried my best to make this article as detailed as possible. So that a beginner may not find it difficult to follow. : )

Please subscribe to receive updates on my new articles.


Overview

SwiftUI is a dream came true for many developers who have been working with Nib and Storyboards, and now there is something more powerful, more accessible designing than it could ever have been on iOS. Declaring your app’s user interface, navigating views, and animating, something as small as creating shadows which sometimes didn’t work for unknown reasons, but it is now easy and just a line away.

Create a New Project

Step 1

Open Xcode, on the startup window click, Create a new Xcode project or choose File > New > Project.

Step 2

Under iOS select Single View App and the click Next. (Refer to the image below )

Step 3

Enter “Text Rotator” as the Product Name, and please make sure SwiftUI is selected as the User Interface and then click Next.

Step 4

Choose a location to save the project and then click Create.

ContentView.swift

In the Project navigator, select ContentView.swift and then click on Adjust Editor Options, next click on Canvas. (Refer to the image below )

In your Canvas, if you see a message “Automatic preview updating paused” which is most likely to show until Apple decides to change it. Click on Resume.

Now, you can see the Preview rendered in your Canvas with “Hello World!” text in it to be precise, and on the left side, there are two structs.

The first structure which conforms to the View protocol is used to declare your views.

The second structure which conforms to the PreviewProvider protocol is used by Xcode to render your view on the Canvas.

Inside the first structure, you can see a body property with a Text object in it containing a string “Hello World!”, change the text to “Hola !”. As soon as you change the text, the Preview updates itself.

Inside your Canvas, click on the text “Hola !”. Feel free to modify the text from the “Attributes Inspector” ( Refer Image ).


We will get into more detail as this article was just a starter. I am excited to show you the power of SwiftUI as we proceed. If you didn’t understand something or need some help following this article, feel free to comment below.

I hope you enjoyed reading this article. Please, like, share, and subscribe to stay updated on the follow-up articles and new content.

Please click here to continue with your First iOS App.

If you have any suggestions or questions, Feel free to connect me on Twitter. 😉

SwiftUI - Build Your First iOS App in Swift

How to improve iOS Development Skills, and be a better developer?