Introduction
First step, to kickstart building iOS UI programmatically is to have at least 1 working ViewController working without story board.
So why would you want to build UI programmatically instead of using storyboard?
Greater control
When building UI programmatically, you have full control over the layout and behavior of your views. This allows for more flexibility and precision when designing your app's user interface.
Easier debugging
With programmatic UI, it's easier to trace the source of any issues or bugs since you have a clear view of the entire view hierarchy. This is in contrast to storyboards which can become complex and difficult to navigate, especially as the project scale up.
Easier to scale
Building UI programmatically can make it easier to scale your app and add new features. With a storyboard, it can become difficult to manage a large number of views and segues.
Easier to collaborate
Programmatic UI can make it easier for multiple developers to work on the same project, as the code can be easily shared and reviewed.
Setup
Step 1: Creating Project
Create a new single view app project in XCode,
Select Swift as language and Storyboard as interface
Yes, we will select storyboard as interface.
Step 2: Deleting the Main.storyboard
Step 3: Deleting Main.storyboard config entries
Search for "Main" in XCode
In the project settings, under the "General" tab, remove the reference to the Main storyboard file in the "Main Interface" field.
As well as in the Info.plist delete the entry for Main.storyboard
Step 4: Update the ViewController.swift
So that we can see the result on our emulator lets add a simple UILabel that says Hello, World in the center of the screen.
As stated from above, we will be managing our views programatically.
import UIKit
class ViewController: UIViewController {
lazy private var sampleLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Hello World!"
label.textColor = UIColor.white
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.black
self.view.addSubview(self.sampleLabel)
self.setUpConstraints()
}
func setUpConstraints() {
let sampleLabelConstraints = [
self.sampleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
self.sampleLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
]
NSLayoutConstraint.activate(sampleLabelConstraints)
}
}
Step 5: Updating SceneDelegate.swift
Registering the ViewController as the rootViewController
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
// Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
// If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
// This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(frame: windowScene.coordinateSpace.bounds)
window?.windowScene = windowScene
window?.rootViewController = ViewController()
window?.makeKeyAndVisible()
}
Step 6: Running the app in the emulator
Desired output should be this image.
Top comments (1)
Thank you will thank a look!