UIKit : Create UI Programmatically

At first, I learned iOS Development using UIKit. When I began learning swiftUI, I instantly like SwiftUI more because you create the UI Programmatically. I never really liked using Storyboard. For me it’s so much easier to debug and less conflict if you and your teammates is working on the same view.

So, today I learned that in UIKit you can create UI Programmatically lol. Quite late in the game but at least I learn something new haha.

Create View

First, you need to initiate the label variable in ViewController.

class ViewController: UIViewController {
   var titleLabel: UILabel!
   override func viewDidLoad() {
      super.viewDidLoad()
   }
}

After that, you add override loadView method in ViewController and setup the view in that method.

From apple documentation, you can override this method in order to create your views manually. If you choose to do so, assign the root view of your view hierarchy to the view property. The views you create should be unique instances and should not be shared with any other view controller object. Your custom implementation of this method should not call super.

Insert UIView() in view, gives background and add the label to the view.

class ViewController: UIViewController {
   var titleLabel: UILabel!
   override func viewDidLoad() {
      super.viewDidLoad()
   }
   override func LoadView() {
      view = UIView()
      view.backgroundColor = .systemBackground
      titleLabel = UILabel()
      titleLabel.translatesAutoresizingMaskIntoConstraints = false
      titleLabel.text = "This is created programatically"
      view.addSubview(titleLabel)
   }
}

Based on apple documentation, If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set translatesAutoresizingMaskIntoConstraints to false, and then provide a non ambiguous, nonconflicting set of constraints for the view.

If you build it, you noticed that the label is not there because we haven’t set the constraint yet. We can set the constraint using NSLayoutConstraint in LoadView method. In NSLayoutConstraint activate method, we input an array of constraint. Set which object, which anchor point, and set the constraint equal to which object.

class ViewController: UIViewController {
   var titleLabel: UILabel!
   override func viewDidLoad() {
      super.viewDidLoad()
   }
   override func LoadView() {
      view = UIView()
      view.backgroundColor = .systemBackground
      titleLabel = UILabel()
      titleLabel.translatesAutoresizingMaskIntoConstraints = false
      titleLabel.text = "This is created programatically"
      view.addSubview(titleLabel)
      NSLayoutConstraint.activate([
         titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
         titleLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -200),
      ])
   }
}

And voila! We create a simple label and add constraint with programmatically. I just learn about it so I don’t know the limitations or any hassle when you’re working on a big project with this. But it seems quite easy and I will try to use it more.