Simplifying IT, Empowering Businesses

Want mind-blowing user interfaces on premium Apple devices? Looking for an option that is easy to use and learn? SwiftUI is your solution. SwiftUI is the simplest way one can build user interfaces across all platforms.

SwiftUI was launched at the Worldwide Developer Conference (WWDC) 2019. Soon the developers began to leverage the published APIs that helped them adopt newly introduced SwiftUI features efficiently.

In WWDC 2020, Apple unveiled a few more APIs, which will help develop complete apps using SwiftUI without adding any UIApplicationDelegate or SceneDelegate to the project.

Earlier in iOS 13, the developers would write the code below in SceneDelegate.swift file to attach SwiftUI View to the app:

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        let contentView = ContentView()

        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: contentView)
            self.window = window
            window.makeKeyAndVisible()
        }
    }

After introducing XCode 12 and iOS 14, developers agreed on removing AppDelegate and SceneDelegate from apps.

Here is the latest Project Template Structure of XCode 12,

Now, you can define and attach your app using the  code mentioned below in the MySwiftUIApp.swift file:

    @main struct MySwiftUIApp: App {
        var body: some Scene {
            WindowGroup {
                ContentView()
            }
        }
    }

So, ContentView will be displayed to the user once the app launches.

Let’s start adding some Text to the ContentView.swift file:

struct ContentView: View {
    var body: some View {
        Text("Dev Information Technology Ltd.")
            .font(.headline)
            .background(Color.yellow)
    }
}

Its preview will look like below:

SwiftUI also allows you to modify text and other information and cons by writing the code below; we will make separate strings for each view to make the code look more organized, readable, and testable.

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
                DevTitleView()
                HStack {
                    DevWebsiteLinkView()
                    DevPhoneNumberView()
                }
            }
            .padding()
            .background(Color.black.opacity(0.4))
        }
    }
}

struct DevTitleView: View {
    var body: some View {
        Text("Dev Information Technology Ltd.")
            .font(.system(size: 24, weight: .bold))
            .foregroundColor(Color.white)
            .shadow(radius: 10)
    }
}

struct DevWebsiteLinkView: View {
    var body: some View {
        HStack {
            Image(systemName: "globe")
                .foregroundColor(Color.white)
            Text("www.devitpl.com")
                .font(.system(size: 16, weight: .regular))
                .foregroundColor(Color.white)
                .shadow(radius: 10)
        }
    }
}

struct DevPhoneNumberView: View {
    var body: some View {
        HStack {
            Image(systemName: "phone")
                .foregroundColor(Color.white)
            Text("+91 – 79-26304241")
                .font(.system(size: 16, weight: .regular))
                .foregroundColor(Color.white)
                .shadow(radius: 10)
        }
    }
}

This will give an output as below:

We can also add an image as a background. See below:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("devit")
                .resizable()
                .overlay(Color.black.opacity(0.1))
                .edgesIgnoringSafeArea(.all)
            VStack {
                VStack {
                    DevTitleView()
                    HStack {
                        DevWebsiteLinkView()
                        DevPhoneNumberView()
                    }
                }
                .padding()
                .background(Color.black.opacity(0.4))
                Spacer()
            }
            .padding(.top, 80)
        }
    }
}

The output will be the same as:

In conclusion, one can build apps using SwiftUI easily.

Here is a comparison chart between the features of UIKit to SwiftUI; this will make it easier for you to determine various resources and identify which of the two matches your requirements.

UIKit	SwiftUI	Note
UIViewController	View
UITableViewController	List	Alternatively, we can configure LazyHStack & LazyVStack with ScrollView
UICollectionViewController	UICollectionViewController	Introduced in iOS 14.
UISplitViewController	NavigationView
UINavigationController	NavigationView
UIPageViewController	TabView	Introduced in iOS 14 as a style of TabView
UITabBarController	TabView
UIAlertController	Alert
UILabel Text	Label
UITabBar	TabView
UITabBarItem	TabView	Available as .tabItem with TabView
UITextField	TextField	SecureField is available for password–secure entry
UITextView	TextEditor	This feature is introduced from iOS 14
UITableView	List
UINavigationBar	NavigationView
UINavigationItem	ToolbarItem	This feature is introduced from iOS 14
UIBarButtonItem	NavigationView
UICollectionView	LazyVGrid and LazyHGrid	This feature is introduced from iOS 14
UIStackView	HStack	LazyHStack
UIStackView	VStack	LazyVStack
UIScrollView	ScrollView
UIActivityIndicatorView	ProgressView with CircularProgressViewStyle	This feature is introduced from iOS 14
UIImageView	Image
UIPickerView	Picker
UIButton	Button	Link
UIDatePicker	DatePicker
UIPageControl		This feature is introduced from iOS 14. Available as PageTabViewStyle style of TabView. Also with a modifier named .indexViewStyle.
UIProgressView	ProgressView	This feature is introduced from iOS 14
UISegmentedControl	Picker	Available as SegmentedPickerStyle of new Picker of SwiftUI
UISlider	Slider
UIStepper	Stepper
UISwitch	Toggle
UIToolBar	NavigationView with .toolbar	This feature is introduced from iOS 14
MKMapView	Map	import MKMapView to use the default UIKit Map View

Pros of SwiftUI:

• Easy to adapt, cleaner, and simpler code.
• Can be clubbed with UIKit using UIHostingController and UIViewRepresentable.
• Easier theme management. Switching between themes is less complicated.
• SwiftUI comes with the power of two-way binding with BindableObject, ObjectBinding, and the combined framework.
• The live preview is accurate. With an increasing demand for cross-platforms and advanced platforms, it is a much-needed feature to attract developers.
• SwiftUI does not require Storyboard/Interface Builder. Canvas replaces it.
• SwiftUI does not require Storyboard/Interface Builder. Canvas replaces it.

Cons of SwiftUI:

• Support starts from iOS 13 and Xcode 11. No backward compatibility. Also, some of the components introduced in iOS 14 may not work with the iOS 13 version.
• No or less forum or developer support and less equipped conflict handling will create weak architectural issues.

Are you thorough with how you can use declarative UI to create a mobile application by leveraging SwiftUI? If you have any queries, get in touch with an expert at DEV IT now.