Getting Started with SwiftUI

Credits: kenanatmaca.com

SwiftUI is an innovative and simple way to build interfaces across all Apple platforms with the power of Swift.

Yes, you heard right! It is for all new platforms: iOS, iPad, tvOS & watchOS.

With the declarative swift syntax that’s an easy way to read & natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly sync.

SwiftUI is giving Apple’s various operating systems that are giving a new look-and-feel but its completely natural to feel a bit confused. It will give us automatic support for dynamic type, dark mode, localization & accessibility.

SwiftUI developers are now both bursting with excitement about it & also tried to figure out what it all means for building apps for Apple platforms.

Requirement

You need macOS Catalina(iOS 13) and minimum Xcode 11 then only you can render the canvas(simulator) properly.

SwiftUI Tour

Before we write the code in SwiftUI, I am giving a brief description about setting up the project & how we will identify the swiftUI structure.

• Create a Single View Application project including swiftUI.
• In swift UI, the basic single view application includes the SceneDelegate.swift file. In it, we can set the root of the view & creates a new ContentView instance that is visible at startup.
• In the project, we found the ContentView.swift file. That file’s structure will describe the layout & content.

Excited !!? Or a bit afraid ?🤔

No worries it becomes intuitive pretty quick. 😅

Now, we will go through with UI controls using swiftUI.

Create Image view in ContentView

First of all, I will create one structure with a type of view. SwiftUI provides a component called Image for you to present an image like this. This code declares the image resizable view and set the content mode to fill. And also we set the height & frame of the image as fixed values. We also added the image to the clipped bounding frame. Lastly, I added the corner radius & padding to the image.

Output:

Text with Different ways,

SwiftUI gives us a protocol Text. We can set a text using Text. We can add its font, font size, font style, font color, etc. we can also set its padding. I also added how to get dynamic stack size according to data.

Output:

Textfield with bottom line & image

Created a structure for the text field. I added two variables like a placeholder, image.

I created the text filed in HStack (Horizontal Stack) because I added an image on the left of the text field and added that HStack into VStack.

I created another structure for creating separator at the bottom of the text field.

Output:

Button with Action & Tap

Now let’s see, how to implement a button in swiftUI. The swiftUI framework provides a component called Button to create a button. Here we define the text as a “Done!”. Here I created a button with background color, shadow & corner radius. If we will tap on that button then it will print “Done!”.

Output:

Segment Control

A segmented control is a set of two or more segments, each of which functions as a manually exclusive button. In this example, segment control will display a text view that will be updated according to content of the selected segment.

In it, each item has tag value with an index number. The number will start at 0.

Output:

Date Picker

Here I created maximum & minimum date picker in Form. Parallely, added one another picker & if you will select the numbers then it will to the next view. In that nest view, you will get many options and can select one option at a time. After selection, it will back to the main controller with selected value.

Output:

Tab-bar with Image

I created a tab bar view & added 2 tabs like first is collection & the second one is controls with images.

Output:

List (a replacement for UITableView) & Navigation

Here I created a simple array of Controls of swift items in the list. It will arrange the data in the column. In this example, it contains the list of Controls of swift items & also added the list with GroupedListStyle().

SwiftUI gives a component called Navigation and it will handle user taps on view inside navigation to the destination screen. On the tap of the list, we can push to the next screen using NavigationLink.

Output:

GeometryReader

Here we can read the current screen size using geometry reader.

Output:

I have created one demo using the above controls in SwiftUI. And I tried to cover all the controls, how to set the root & how all views are connected to each other. Finally, I explain here what I did in demo 😊

This swiftUI Demo is very simple & easy to understand. This swiftUI demo includes On-boarding screens, login screen, forgot password screen, sign up screen, home & logout.

Getting started the download this tutorial using this Link :

GitHub — SwiftUIGitDemoLink

After playing around swiftUI for some time, I really enjoyed a lot to building UI using the new framework. With swiftUI, it makes UI development allows you to write much less code. I am exploring the framework so please let me know if you find any errors in the demo.

Also, explore the SwiftUI documentation to see what else is available && also explore AppleSwiftUI Tutorials— there’s a lot!