SwiftUI style, iPhone app development, creating view controller-based programs

In recent years, Apple’s SwiftUI has transformed the paradigm of iPhone app development. SwiftUI uses a declarative programming approach, which differs from the imperative method of building UIs with the previous UIKit. In this article, we will compare how to utilize SwiftUI and the view controller-based app development approach, sharing experiences from creating actual apps.

1. What is SwiftUI?

SwiftUI is the latest UI framework first announced at WWDC 2019. This framework has the following characteristics:

• Declarative programming: Writing UI declaratively results in simpler and more intuitive code.
• State management: Helps easily manage the relationship between data and UI.
• Cross-platform: Usable across iOS, macOS, watchOS, and tvOS.

2. Differences between UIKit and SwiftUI

Previously, apps were developed using the UIKit framework through a view controller-based approach. UIKit organizes apps in the following way:

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let label = UILabel()
        label.text = "Hello, UIKit!"
        label.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        view.addSubview(label)
    }
}

In contrast, SwiftUI’s approach to building UIs is very different. SwiftUI is as simple as this:

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .padding()
    }
}

3. Creating a Simple App using SwiftUI

Now, let’s create a simple app using SwiftUI. This app will have a feature where the count increases each time the user clicks a button.

3.1 Project Setup

Open Xcode and create a new SwiftUI project. At this time, select the ‘App’ template.

3.2 Writing the Main View

Open the ContentView.swift file and enter the following code:

import SwiftUI

struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("Button tapped \(count) times")
                .padding()
            Button(action: {
                count += 1
            }) {
                Text("Tap me!")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This code defines a state variable `count` and implements functionality to increase the count each time the button is pressed.

4. Creating an App using UIKit

Now, let’s create a similar functionality app using UIKit.

4.1 Project Setup

Open Xcode and create a new ‘Single View App’ project.

4.2 Writing the Main View

Open the ViewController.swift file and enter the following code:

import UIKit

class ViewController: UIViewController {
    private var count = 0
    private let countLabel = UILabel()
    private let tapButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
    
    private func setupUI() {
        countLabel.text = "Button tapped \(count) times"
        countLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(countLabel)
        
        tapButton.setTitle("Tap me!", for: .normal)
        tapButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        tapButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tapButton)
        
        // Autolayout constraints
        NSLayoutConstraint.activate([
            countLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            countLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            tapButton.topAnchor.constraint(equalTo: countLabel.bottomAnchor, constant: 20),
            tapButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }

    @objc private func buttonTapped() {
        count += 1
        countLabel.text = "Button tapped \(count) times"
    }
}

Development with UIKit requires more boilerplate code compared to SwiftUI, but it offers more control when composing complex UIs.

5. Integrating View Controllers and SwiftUI

SwiftUI can be integrated perfectly with existing UIKit. That is, SwiftUI views can be added to apps created with UIKit, and UIKit views can be used in SwiftUI apps.

import SwiftUI

struct UIKitView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> ViewController {
        return ViewController()
    }
    
    func updateUIViewController(_ uiViewController: ViewController, context: Context) {}
}

struct ContentView: View {
    var body: some View {
        UIKitView()
    }
}

6. Advantages and Disadvantages of SwiftUI

6.1 Advantages

• Code is concise and easy to read
• Direct management of the relationship between UI and data state
• Provides a variety of view components that can be used together

6.2 Disadvantages

• Some features of SwiftUI are not yet stable
• May exhibit lower performance compared to UIKit
• No compatibility with older versions of iOS

7. Conclusion

SwiftUI is Apple’s latest UI framework, enabling much more intuitive and simpler UI development compared to the existing UIKit. However, UIKit remains a robust and familiar framework for many developers, so it’s important to blend the two frameworks appropriately. Understanding the characteristics of each framework well can lead to the development of higher-quality apps.