Configuring a Programmatic UIKit Project

Sun, 26 May 2024 22:35:31 +0000

In some projects, you might not want to use Storyboards or XIBs for various reasons, such as greater flexibility and control over your views, better version control, or simply personal preference. If that’s your case, this post will guide you through the basic steps to configure a Storyboard project to work with UIKit programmatically.

Step-by-Step Guide

I’m using Xcode 15.4, the graphical user interface (GUI) may change in the future causing some images to be outdated or some steps to be different.

1. Create a New Project

Start by creating a new iOS project in Xcode:

Open Xcode and select “Create a new Xcode project”.

Choose the “App” template under the iOS tab.

Enter your project details (Product Name, Team, etc.) and make sure “Storyboard” is selected for the User Interface.

Save your project wherever you like and optionally tick the “Create Git repository on my Mac” to initialize a local git repository for this project.

2. Remove the Main Storyboard

Next, we’ll remove the storyboard file and configure the project to work without it:

Delete Main.storyboard:
- In the Project Navigator, locate Main.storyboard.
- Right-click on Main.storyboard and select “Delete”. Choose “Move to Trash” to remove it completely.

Remove Storyboard References from Info.plist:
- Open Info.plist.
- Delete the Main storyboard file base name key (usually named Storyboard Name).

Remove Storyboard References from Build Settings:
- Select your project in the Project Navigator.
- Select your app target.
- Go to the “Build Settings” tab.
- Search for Main and make sure there are no references to Main.

3. Set the Root View Controller Programmatically

Depending on whether your project uses a SceneDelegate (iOS 13 and later) or not, you’ll set the root view controller differently.

Using AppDelegate (iOS 12 and earlier or single-window apps)

Open AppDelegate.swift.

In the application(_:didFinishLaunchingWithOptions:) method, add the following code to set up the window and root view controller:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)

        let initialViewController = YourInitialViewController()
        window?.rootViewController = UINavigationController(rootViewController: initialViewController)
        window?.makeKeyAndVisible()

        return true
    }
}

Using SceneDelegate (iOS 13 and later)

Open SceneDelegate.swift.

In the scene(_:willConnectTo:options:) method, add the following code to set up the window and root view controller:

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }

        window = UIWindow(windowScene: windowScene)
        let initialViewController = YourInitialViewController()
        window?.rootViewController = UINavigationController(rootViewController: initialViewController)
        window?.makeKeyAndVisible()
    }
}

In these files, you can do more complex setups like configuring routers for navigation, setting up a tab bar controller, or managing a split view controller, depending on your app’s needs.

4. Create Your Initial View Controller

Create a new Swift file for your initial view controller:

In the Project Navigator, right-click on the project folder and select “New File”.
Choose “Swift File” and name it YourInitialViewController.swift.

Implement your view controller as follows:

import UIKit

class YourInitialViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the background color to visually verify the setup
        view.backgroundColor = .white

        // Additional setup for your view controller
    }
}

5. Run the Project

Build and run your project. You should see a white screen, indicating that your initial view controller is being presented programmatically.

Conclusion

By following these steps, you’ve successfully configured your Storyboard-based project to work programmatically with UIKit. This setup provides you with greater flexibility and control over your views, and you can now add your UI elements directly in code.

Happy coding!

Initial Configuration on entangledDEV