Navigation bar with UIImage for title

I want to customize my app's look by using a logo image as the navigation bar's title, instead of plain text. When I use this code

let logo = UIImage(named: "logo.png")
self.navigationItem.titleView = logo;

I get the error "UIImage is not convertible to UIView". How can I do this correctly?

Solution 1:

Put it inside an UIImageView

let logo = UIImage(named: "logo.png")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView

Solution 2:

I use this. It works in iOS 8

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let image = UIImage(named: "YOURIMAGE")
    navigationItem.titleView = UIImageView(image: image)
}

And here is an example how you can do it with CGRect.

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 38, height: 38))
    imageView.contentMode = .ScaleAspectFit
    let image = UIImage(named: "YOURIMAGE")
    imageView.image = image
    navigationItem.titleView = imageView
}

Hope this will help.

Solution 3:

For swift 4 and you can adjust imageView size

 let logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))

 let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))
 imageView.contentMode = .scaleAspectFit
 let image = UIImage(named: "your_image")
 imageView.image = image
 logoContainer.addSubview(imageView)
 navigationItem.titleView = logoContainer

Solution 4:

I tried @Jack's answer above, the logo did appear however the image occupied the whole Navigation Bar. I wanted it to fit.

Swift 4, Xcode 9.2

1.Assign value to navigation controller, UIImage. Adjust size by dividing frame and Image size.

func addNavBarImage() {

        let navController = navigationController!

        let image = UIImage(named: "logo-signIn6.png") //Your logo url here
        let imageView = UIImageView(image: image)

        let bannerWidth = navController.navigationBar.frame.size.width
        let bannerHeight = navController.navigationBar.frame.size.height

        let bannerX = bannerWidth / 2 - (image?.size.width)! / 2
        let bannerY = bannerHeight / 2 - (image?.size.height)! / 2

        imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
        imageView.contentMode = .scaleAspectFit

        navigationItem.titleView = imageView
    }

2. Add the function right under viewDidLoad()

       addNavBarImage() 
   

Note on the image asset. Before uploading, I adjusted the logo with extra margins rather than cropped at the edges.

Final result: