fbpx Basics of SwiftUI

Basics of SwiftUI by an iOS Developer

swift-ui
okhapare's picture
Omkar Khapare

Swift UI

Have you heard of Swift UI before and want to know what it’s all about? Then you must read this. Here’s the basics of SwiftUI as explained by iOS developer, Ajeet Sharma. He has also shared some features and tactics that he believes to be helpful for all the developers out there. Keep reading...

What is SwiftUI? 

Have you heard about Visual Studio and Android SDK? These tools allow you to create and build applications and services for Windows and Android, respectively. So, who or what builds user interfaces or applications for Apple devices?

The answer is Swift, also known as Swift UI. It provides an exceptional easy way to build user interfaces with much less code. All you need is some set of tools and APIs.

Swift UI blends in beautifully with Xcode design tools to keep your work in sync. All the developers will be happy to know that it also comes in black. (in reference to the movie Dark Night Rises) Ha ha ha...

Why SwiftUI?

It is convenient, quick to use, and allows you to design apps for more devices with less effort.

Basically, SwiftUI is a user interface toolkit that allows declarative syntax writing. So, in layman terms, we tell SwiftUI how we want to design our application, and it understands and makes it happen. 

There’s declarative UI and imperative UI.



Declarative UI

Imperative UI

“In computer science, declarative programming is a programming paradigm — a style of building the structure and elements of computer programs — that expresses the logic of a computation without describing its control flow.” Wiki

“In computer science, imperative programming is a programming paradigm that uses statements that change a program’s state. In much the same way that the imperative mood in natural languages expresses commands, an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how a program operates.” Wiki

More like what you do.

More like how you do.

Tells iOS about all possible states of your app at once.

ex. To show a ‘welcome’ message when we’re logged in or show a “login button” if logged out.

Gets stuck with one state of your app—state problem.

ex. 1 unread message will repeatedly come on screen even though you’ve read the message.

ex. I would like to order a Spaghetti.

ex. I would like to order thin long noodles with meatballs and sauce and grated cheese on top with a little garnishing.

Few Features of SwiftUI:

  1. Drag & Drop

That’s how easy it is. You can rearrange components in your user interface by simply dragging required controls on your canvas. Select design options including font, color, spacing and other options to arrange them on your UI with your cursor. 

You can even discover new modifiers for each control, to put in hand-code wherever required.

  1. Native for all platforms

SwiftUI leverages Apple’s decades of experience to allow developers to build the most intuitive and interactive user interfaces in the world. It paves the way for more seamless and smooth platform-specific experiences.

It’s built on native technology so your apps can access the power of individual platforms with very little code and special design canvas. 

  1. Go past the limit

This is a trick. You can use it to fetch more than 10 views from your body property. However, SwiftUI is limited to 10 views but here’s how you can go about it!

Using Groups, which are logical containers, allow you to do so without affecting your layout.


struct ContentView: View {

    var body: some View {

        List {

            Group {

                Text("view 1")

                Text("view 2")

                Text("view 3")

                Text("view 4")

                Text("view 5")

                Text("view 6")

            }

 

            Group {

                Text("view 7")

                Text("view 8")

                Text("view 9")

                Text("view 10")

                Text("view 11")

            }

        }

    }

}

  1. Multiple Alerts

If you’ve ever tried to link multiple alert() modifiers to a single view, you know your code doesn’t work successfully. Only the primary or initial alert works but others don’t.

The solution to this challenge is that you should link views to different parts of your view hierarchy, it can be to a button or any other view that prompts the alert to show up.