SwiftUI Basics for UIKit Developers

Hello everybody. I’m trying to get back to the articles after a little break. Today I’m going to talk to you about how we can transition to a framework that I love and that I think will have a big share in the future of iOS development.

One framework I’m talking about is, of course, SwiftUI. With the development speed of today’s technologies and the increasing iOS deployment targets, SwiftUI is becoming more accessible for us developers every day. But how ready are we for it? It’s good to stay up to date, so let’s get started.

Components

SwiftUI has its own unique components. In cases where it is insufficient, it allows the use of UIKit and provides a complete result. As an example, we can give the most basic component LABEL as an example.

• In UIKit, a red label is defined as follows;

let label = UILabel()
label.text = "Center"
label.textColor = .red

• In SwiftUI, that’s all.

Text("Center")
    .foregroundColor(.red)

Configuration

• UIKit components are classes. And there are properties belonging to classes. As seen below, it has many variables such as label, text, text Color, font etc.

• You can’t see this in SwiftUI. Because SwiftUI manages them through modifiers. Each view is wrapped in modifiers when it receives its properties such as foregroundColor. You can think of it as having a “Modified Text” object.

So in summary when configuring classes in UIKit. We modify structures in SwiftUI.

label.textColor = .red // It's still the label class.

Text("Text") // It's now a modified struct.
  .foregroundColor(.red) 

Reactive Programming

It contains the basic elements of SwiftUI Combine and with it reactive programming features. Combine can also be used with UIKit, but we generally do not see its use since iOS 13 requires a deployment target. This is one of the advantages of SwiftUI. Let’s try something using a common view model.

import Combine
import Foundation

final class ViewModel: ObservableObject {
    @Published var text: String = "Some Text"
    
    init() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) { [weak self] in
            self?.text = "Some text after 3 second"
        }
    }
}

• You can do a very simple bind operation in UIKit as follows.

import Combine
import UIKit

final class UIKitLayoutViewController: UIViewController {
    @IBOutlet var mainLabel: UILabel!
    @ObservedObject private var viewModel = ViewModel()
    private var subscriptions = Set<AnyCancellable>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        viewModel.$text.sink { textValue in
            self.mainLabel.text = textValue.description
        }.store(in: &subscriptions)
    }
}

• The SwiftUI equivalent of this will be just that;

import SwiftUI

struct SwiftUILayout: View {
    @ObservedObject private var viewModel: ViewModel = ViewModel()
    
    var body: some View {
        Text(viewModel.text)
    }
}

Layout

UIKit offers us 2 options for layout. We determine the placement of the objects on the screen by providing CONSTRAINTS from the code either via the Storyboard or programmatically. I will prefer the commonly used Storyboards in this article.

How do I center a text?

• On UIKit you add a text to the storyboard as seen below. You then give the text the CenterX, and CenterY constraints. Thus, the text is printed on the screen centered.

• In SwiftUI, you just need to add a Text object.

How can I place a text at the top right with 10 px space?

• In UIKit, it will be enough to add top and trailing constraints to text and set top value to 0 and trailing value to 10.

• In SwiftUI, on the other hand, we will need to use Stack structures. A Vstack and an HStack are defined and the desired location is determined with spacers. Then .padding is used to set 10px spacing.

These are really easy cases. Let’s make this a little harder.

How to create a view that lists 10 items on the screen, 4 of which are blue, 4 are red, and the remaining 2 are yellow?

• The UIKit equivalent of this is a tableView. And to do that (we’re a little bit luckier if storyboard is used here) we need to write as much code as below.

• You should also create a cell in the storyboard and connect it to the viewController.

• The SwiftUI counterpart, on the other hand, is really quite simple.

Note: By the way, some people here might say: There is a Compositional Layout, why didn’t we use it?

The event here is the deployment target that is blocking you. If this is going to be iOS 13 above, I think we would prefer to write SwiftUI for such simple structures.

Thus, we have seen how there is a connection between SwiftUI and UIKit. This is how I will proceed by making comparisons, I’m thinking of making a series where we can see the positive and negative aspects of both SwiftUI and UIKit. I hope I can maintain this continuity.

Happy reading, Swift Full Coding 🧡.