Set image in Navigation Bar

bhavuk chawla

28 October 2024

In this blog we will discuss about how to Set image in Navigation Bar. It can enhance the visual appeal of the app and improve user experience.

Introduction

In iOS, setting an image in the navigation bar can customize the look of an app’s navigation interface. You can set a logo or custom icon as the navigation bar’s title view or background.

Implementation

We need to follow below mention steps to implement this topic.

1. Create New Project:

First of all we need to create a new project where you will Set image in Navigation Bar.

2. Create A ViewController:

After that we need to create a add ViewController.

import UIKit

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

    }
}

import UIKit

class ViewController: UIViewController{

override func viewDidLoad() {

super.viewDidLoad()

}

A ViewController in iOS is a fundamental component responsible for managing a screen or part of the user interface in an app.

It controls what you see on the screen, handles things you tap or interact with, and updates information as needed.

Each ViewController is in charge of one screen, making sure everything on it works smoothly and connects to other parts of the app.

3. Add Image In Asset:

After that you need to attach image in asset.

4. ViewImage

In this step we need to add code to display image in Navigation Bar in ViewController.

override func viewDidLoad() {
        super.viewDidLoad()
        if let image = UIImage(named: "logo.png") {
                    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 50))
                    imageView.image = image
                    imageView.contentMode = .scaleAspectFit
                    imageView.clipsToBounds = true
                    self.navigationItem.titleView = imageView // Set titleView to display image in center
                } else {
                    print("Image not found!")
                }
 
    }

override func viewDidLoad() {

super.viewDidLoad()

if let image = UIImage(named: "logo.png") {

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 50))

imageView.image = image

imageView.contentMode = .scaleAspectFit

imageView.clipsToBounds = true

self.navigationItem.titleView = imageView // Set titleView to display image in center

} else {

print("Image not found!")

}

Above code attempts to load an image named "logo.png" into an UIImageView. If successful, it creates the image view, sets its size and aspect mode, and assigns it to the navigation item’s title view. If the image is not found, it prints “Image not found!” to the console.

Output

Conclusion

In this article we have discussed about How to Set image in Navigation Bar.

I hope this blog is helpful to understand this topic.

You can visit here for more knowledge about this topic.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.