【UIKit】Implementing NavigationBar in Swift Using Only Code

Simple Apps

In this post, I’ll walk you through how to implement a NavigationBar using only code with UIKit. This is a personal reference as of January 26, 2023.

What is a NavigationBar?

A NavigationBar is the bar displayed at the top of the screen, typically used to show a title or navigation buttons. The NavigationController manages ViewControllers and handles transitions between screens.

Implementation

Here’s a simple example where I’ve just added a title to the Navigation Bar:

Removing Storyboard Settings

To remove Storyboard settings, please refer to the detailed explanation on this page: Removing Storyboard Settings

AppDelegate Settings (iOS 15 and Later)

From iOS 15 onwards, the boundary between the NavigationBar and TabBar is transparent by default. To make it appear the same as it did in iOS 14 and earlier, add the following settings to application(_:didFinishLaunchingWithOptions:) in the AppDelegate:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Ensure the Navigation Bar appears as it did in iOS 14 and earlier
    if #available(iOS 15.0, *) {
        // Declare the appearance settings for the Navigation Bar
        let navigationBarAppearance = UINavigationBarAppearance()
        // Set the default background color
        navigationBarAppearance.configureWithDefaultBackground()
        // Apply appearance settings to different modes
        UINavigationBar.appearance().standardAppearance = navigationBarAppearance
        UINavigationBar.appearance().compactAppearance = navigationBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
        
        // Change the title text color of the Navigation Bar
        navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.black]
    }
    return true
}

ViewController Implementation

In this simple example, I’m only adding a title to the NavigationBar:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        self.title = "navTest"
    }
}

SceneDelegate

If you’re only implementing a ViewController, the settings explained in Removing Storyboard Settings should work fine. However, since we’re using a NavigationBar, we need to modify the part shown in the red box:

SceneDelegate Modification

Final Thoughts

This is a very simple setup, but I hope it helps someone. See you in the next post!

Comments

Copied title and URL