How to separate Views into smaller ones in programmatic UIKit?

Question

I'm. trying to make my code cleaner by separating my code into smaller files. When I have a single ViewController, it works! However, when I try to add a subview, it doesn't. Can anyone look at my code and tell me what's wrong?

Code:

ViewController (just view controller, when it works):

import UIKit

class ViewController: UIViewController {
    private let textField = UITextField()

    override func loadView() {
        let view = UIView()
        self.view = view
        let textField = UITextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textField)
        view.addConstraint(textField.leadingAnchor.constraint(equalTo: view.leadingAnchor))
        view.addConstraint(textField.trailingAnchor.constraint(equalTo: view.trailingAnchor))
        view.addConstraint(textField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor))
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        textField.becomeFirstResponder()
        
        view.backgroundColor = .red
    }
}

ViewController (when trying to add the subview)

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let searchViewController = SearchViewController()
        
        view.addSubview(searchViewController.view)
    }
}

SearchViewController

import UIKit

class SearchViewController: UIViewController {
    private let textField = UITextField()

    override func loadView() {
        let view = UIView()
        self.view = view
        let textField = UITextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(textField)
        view.addConstraint(textField.leadingAnchor.constraint(equalTo: view.leadingAnchor))
        view.addConstraint(textField.trailingAnchor.constraint(equalTo: view.trailingAnchor))
        view.addConstraint(textField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor))
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        textField.becomeFirstResponder()
        
        view.backgroundColor = .red
    }
}

SceneDelegate (additional file to show you that I successfully removed storyboards and make a programmatic UIKit available)

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    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 scene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: scene)
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
    }

    func sceneDidDisconnect(_ scene: UIScene) {
        // Called as the scene is being released by the system.
        // This occurs shortly after the scene enters the background, or when its session is discarded.
        // Release any resources associated with this scene that can be re-created the next time the scene connects.
        // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
    }

    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
    }

    func sceneWillResignActive(_ scene: UIScene) {
        // Called when the scene will move from an active state to an inactive state.
        // This may occur due to temporary interruptions (ex. an incoming phone call).
    }

    func sceneWillEnterForeground(_ scene: UIScene) {
        // Called as the scene transitions from the background to the foreground.
        // Use this method to undo the changes made on entering the background.
    }

    func sceneDidEnterBackground(_ scene: UIScene) {
        // Called as the scene transitions from the foreground to the background.
        // Use this method to save data, release shared resources, and store enough scene-specific state information
        // to restore the scene back to its current state.
    }


}

Answer 1

When adding a child view controller you are always required to call addChild(_:) on the parent VC and didMove(toParent:) on the child VC.

let searchViewController = SearchViewController()
addChild(searchViewController)
searchViewController.didMove(toParent: self)
view.addSubview(searchViewController.view)

But the most important thing is that you are not constraining the SearchViewController view at all in your ViewController view

NSLayoutConstraint.activate([
    searchViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    searchViewController.view.topAnchor.constraint(equalTo: view.topAnchor),
    searchViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    searchViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])

And your final ViewController implementation should look like this:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let searchViewController = SearchViewController()
        addChild(searchViewController)
        searchViewController.didMove(toParent: self)
        view.addSubview(searchViewController.view)
        searchViewController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            searchViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            searchViewController.view.topAnchor.constraint(equalTo: view.topAnchor),
            searchViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            searchViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }
    
}

Another issue is that you are using old API for setting the constraints inside the SearchViewController. The documentation of addConstraint says:

When developing for iOS 8.0 or later, set the constraint’s isActive property to true instead of calling the addConstraint method directly. The isActive property automatically adds and removes the constraint from the correct view.

You can use the activate(_:) static function on NSLayoutConstraint to activate them at once.

view.addSubview(textField)
NSLayoutConstraint.activate([
    textField.leadingAnchor
        .constraint(equalTo: view.leadingAnchor, constant: 0),
    textField.topAnchor
        .constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0),
    textField.trailingAnchor
        .constraint(equalTo: view.trailingAnchor, constant: 0),
])

Resources:

• Official Documentation: Implementing a Container View Controller
• Article by John Sundell: Child View Controllers
• Article by Antoine v.d. SwiftLee Auto Layout in Swift: Writing constraints programmatically