Navigation Bars (UINavigationBar)

What is UINavigationBar?

UINavigationBar is a UI component in iOS that provides a navigation interface at the top of the screen. It is used to display a title, navigation buttons (Back, Done), and custom actions.

---

1. Default Navigation Bar in Storyboard

1. Open Main.storyboard.
2. Embed a UIViewController inside a UINavigationController:
   • Select ViewController.
   • Click Editor → Embed In → Navigation Controller.
3. Set Title in the Navigation Bar:
   • Select ViewController.
   • In the Attributes Inspector, set Title.

✅ Result: A navigation bar appears at the top with a title.

---

2. Customizing Navigation Bar Title in Code

override func viewDidLoad() {
    super.viewDidLoad()
    self.title = "Home"
}

✅ Explanation:

• Sets the title of the navigation bar.

---

3. Changing Navigation Bar Appearance

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Change background color
    navigationController?.navigationBar.barTintColor = UIColor.systemBlue
    
    // Change text color
    navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    
    // Change bar button item color
    navigationController?.navigationBar.tintColor = UIColor.white
}

✅ Explanation:

• Customizes background color, title color, and button color.

---

4. Adding a Back Button

override func viewDidLoad() {
    super.viewDidLoad()
    
    let backButton = UIBarButtonItem(title: "Back", style: .plain, target: self, action: #selector(backAction))
    navigationItem.leftBarButtonItem = backButton
}

@objc func backAction() {
    navigationController?.popViewController(animated: true)
}

✅ Explanation:

• Adds a custom back button to the navigation bar.
• Calls popViewController to go back to the previous screen.

---

5. Adding a Right Bar Button (Logout, Edit, etc.)

override func viewDidLoad() {
    super.viewDidLoad()

    let rightButton = UIBarButtonItem(title: "Edit", style: .plain, target: self, action: #selector(editAction))
    navigationItem.rightBarButtonItem = rightButton
}

@objc func editAction() {
    print("Edit button tapped")
}

✅ Explanation:

• Adds a right button for actions like Edit, Logout, Settings.

---

6. Using an Image in Navigation Bar Button

override func viewDidLoad() {
    super.viewDidLoad()

    let image = UIImage(systemName: "gear") // System icon (Settings)
    let rightButton = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(settingsAction))
    navigationItem.rightBarButtonItem = rightButton
}

@objc func settingsAction() {
    print("Settings tapped")
}

✅ Explanation:

• Uses an SF Symbol (gear icon) for the right button.

---

7. Hiding the Navigation Bar

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    navigationController?.setNavigationBarHidden(true, animated: true)
}

✅ Use case: Full-screen views (e.g., image gallery, login page).

---

8. Making Navigation Bar Transparent

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

✅ Use case: Stylish UI where content extends under the navigation bar.

---

9. Adding a Custom Title View (Logo, Image, etc.)

override func viewDidLoad() {
    super.viewDidLoad()

    let imageView = UIImageView(image: UIImage(named: "logo"))
    imageView.contentMode = .scaleAspectFit
    navigationItem.titleView = imageView
}

✅ Explanation:

• Replaces the default title with an image (e.g., logo).

---

10. Navigating to Another ViewController

A. Using Segue in Storyboard

1. Control + Drag from Button → Next ViewController.
2. Select Show (Push) Segue.
3. The navigation bar automatically appears in the new screen.

B. Navigating Using Code

@IBAction func goToNextScreen(_ sender: UIButton) {
    let nextVC = storyboard?.instantiateViewController(withIdentifier: "NextViewController") as! NextViewController
    navigationController?.pushViewController(nextVC, animated: true)
}

✅ Explanation:

• Pushes the NextViewController onto the navigation stack.

---

11. Programmatically Creating UINavigationController

let homeVC = HomeViewController()
let navController = UINavigationController(rootViewController: homeVC)
window?.rootViewController = navController
window?.makeKeyAndVisible()

✅ Use case: Setting up navigation without using Storyboard.

---

12. Customizing Navigation Bar Large Titles (iOS 11+)

override func viewDidLoad() {
    super.viewDidLoad()
    
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationItem.largeTitleDisplayMode = .always
}

✅ Effect: Large bold title in the navigation bar.

---

13. Changing Status Bar Color (Light/Dark Mode)

override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

✅ Use case: When using a dark navigation bar.

---

14. Summary of UINavigationBar Features

Feature	Code Example
Set Title	self.title = "Home"
Customize Color	barTintColor, tintColor, titleTextAttributes
Back Button	navigationItem.leftBarButtonItem = UIBarButtonItem(...)
Right Button	navigationItem.rightBarButtonItem = UIBarButtonItem(...)
Hide Navigation Bar	setNavigationBarHidden(true, animated: true)
Transparent Navigation Bar	setBackgroundImage(UIImage(), for: .default)
Custom Title View	navigationItem.titleView = UIImageView(...)
Navigation Without Storyboard	UINavigationController(rootViewController: ...)
Large Titles	navigationBar.prefersLargeTitles = true

---

Conclusion

UINavigationBar is an essential component in iOS for structured navigation and user interactions. It can be customized to match the app’s design and enhanced with buttons, images, and actions.

Would you like help designing a custom navigation bar for your app? 🚀