Navigation bar with UIImage for title

Question

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

User · Answer

If you d prefer to use autolayout  and want a permanent fixed image in the navigation bar  that doesn t animate in with each screen  this solution works well   class CustomTitleNavigationController  UINavigationController    override func viewDidLoad         super viewDidLoad        let logo   UIImage named   MyHeaderImage        let imageView   UIImageView image logo      imageView contentMode    scaleAspectFit     imageView translatesAutoresizingMaskIntoConstraints   false      navigationBar addSubview imageView       navigationBar addConstraint  navigationBar leftAnchor constraint equalTo  imageView leftAnchor  constant  0       navigationBar addConstraint  navigationBar rightAnchor constraint equalTo  imageView rightAnchor  constant  0       navigationBar addConstraint  navigationBar topAnchor constraint equalTo  imageView topAnchor  constant  0       navigationBar addConstraint  navigationBar bottomAnchor constraint equalTo  imageView bottomAnchor  constant  0

User · Answer

Swift 5 1  Xcode 11 Sometimes if your image is in high resolution then  imageView shifts from centre  I would suggest using this method   lazy var navigationTitleImageView   UIImageView      override func viewWillAppear   animated  Bool        super viewWillAppear animated      self setNavigationBar            self navigationTitleImageView image   logo     self navigationTitleImageView contentMode    scaleAspectFit          self navigationTitleImageView translatesAutoresizingMaskIntoConstraints   false          if let navC   self navigationController          navC navigationBar addSubview self navigationTitleImageView          self navigationTitleImageView centerXAnchor constraint equalTo  navC navigationBar centerXAnchor  isActive   true         self navigationTitleImageView centerYAnchor constraint equalTo  navC navigationBar centerYAnchor  constant  0  isActive   true         self navigationTitleImageView widthAnchor constraint equalTo  navC navigationBar widthAnchor  multiplier  0 2  isActive   true         self navigationTitleImageView heightAnchor constraint equalTo  navC navigationBar widthAnchor  multiplier  0 088  isActive   true          and viewWillDisappear     override func viewWillDisappear   animated  Bool        super viewWillDisappear animated      self navigationTitleImageView removeFromSuperview      or else just reduce the image size

User · Answer

Programmatically could be done like this   private var imageView  UIView        let bannerWidth   navigationBar frame size width   0 5    0 5 its multiplier to get correct image width     let bannerHeight   navigationBar frame size height      let view   UIView       view backgroundColor    clear     view frame   CGRect x  0  y  0  width  bannerWidth  height  bannerHeight       let image   UIImage named   your image name       let imageView   UIImageView image  image      imageView contentMode    scaleAspectFit     imageView frame   CGRect x  0  y  0  width  view frame width  height  view frame height       view addSubview imageView       return view     The just change titleView  navigationItem titleView   imageView

User · Answer

I have written this for iOS 10  amp  iOS 11 and it worked for me   extension UINavigationBar       func setupNavigationBar             let titleImageWidth   frame size width   0 32         let titleImageHeight   frame size height   0 64         var navigationBarIconimageView   UIImageView           if  available iOS 11 0                   navigationBarIconimageView widthAnchor constraint equalToConstant  titleImageWidth  isActive   true             navigationBarIconimageView heightAnchor constraint equalToConstant  titleImageHeight  isActive   true           else               navigationBarIconimageView   UIImageView frame  CGRect x  0  y  0  width  titleImageWidth  height  titleImageHeight                     navigationBarIconimageView contentMode    scaleAspectFit         navigationBarIconimageView image   UIImage named   image           topItem  titleView   navigationBarIconimageView

User · Answer

Works for me in swift 4  square image 40x40   let imageView   UIImageView   imageView frame size width   40 imageView frame size height   40 imageView contentMode    scaleAspectFit let image   UIImage named   YOUR IMAGE NAME   imageView image   image navigationItem titleView   imageView   If you want other measures  try  let imageView   UIImageView frame  CGRect x  0  y  0  width  50  height  100 5    imageView contentMode    scaleAspectFit let image   UIImage named   YOUR IMAGE NAME   imageView image   image navigationItem titleView   imageView   I hope it serves you  It works for me

User · Answer

You can use custom UINavigationItem so  you only need to change  Navigation Item  as YourCustomClass on the Main storyboard   In Swift 3  class FixedImageNavigationItem  UINavigationItem    private let fixedImage   UIImage   UIImage named   your-header-logo png    private let imageView   UIImageView   UIImageView frame  CGRect x  0  y  0  width  50  height  37 5    required init  coder aDecoder  NSCoder        super init coder  aDecoder      imageView contentMode    scaleAspectFit     imageView image   fixedImage     self titleView   imageView

User · Answer

let imageView   UIImageView frame   CGRect x  0  y  0  width  40  height       40        imageView contentMode    scaleAspectFit     let image   UIImage  named   logo      logo is your NPG asset      imageView image   image     self navigationItem titleView   imageView

User · Answer

Put it inside an UIImageView  let logo   UIImage named   logo png   let imageView   UIImageView image logo  self navigationItem titleView   imageView

User · Answer

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          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

User · Answer

this worked for me in Sept 2015 - Hope this helps someone out there       1     var nav   self navigationController  navigationBar        2 set the style      nav  barStyle   UIBarStyle Black     nav  tintColor   UIColor yellowColor          3     let imageView   UIImageView frame  CGRect x  0  y  0  width  40  height  40       imageView contentMode    ScaleAspectFit        4     let image   UIImage named   logo png       imageView image   image        5     navigationItem titleView   imageView

User · Answer

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

User · Answer

Here is a handy function for Swift 4 2  shows an image with title text -    override func viewDidLoad          super viewDidLoad          Sets the navigation title with text and image     self navigationItem titleView   navTitleWithImageAndText titleText   Dean Stanley   imageName   online      func navTitleWithImageAndText titleText  String  imageName  String  - gt  UIView           Creates a new UIView     let titleView   UIView           Creates a new text label     let label   UILabel       label text   titleText     label sizeToFit       label center   titleView center     label textAlignment   NSTextAlignment center         Creates the image view     let image   UIImageView       image image   UIImage named  imageName          Maintains the image s aspect ratio      let imageAspect   image image  size width   image image  size height         Sets the image frame so that it s immediately before the text      let imageX   label frame origin x - label frame size height   imageAspect     let imageY   label frame origin y      let imageWidth   label frame size height   imageAspect     let imageHeight   label frame size height      image frame   CGRect x  imageX  y  imageY  width  imageWidth  height  imageHeight       image contentMode   UIView ContentMode scaleAspectFit         Adds both the label and image view to the titleView     titleView addSubview label      titleView addSubview image          Sets the titleView frame to fit within the UINavigation Title     titleView sizeToFit        return titleView

User · Answer

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

User · Answer

In order to get the image view with the proper size and in the center  you should use the following approach    let width   120    choose the image width let height   20    choose the image height let titleView   UIView frame  CGRect x  0  y  0  width  view bounds width  height  44     44 is the standard size of the top bar let imageView   UIImageView frame  CGRect x   view bounds width - width  2  y   44 - height  2  width  width  height  height   imageView contentMode    scaleAspectFit   choose other if it makes sense imageView image   UIImage named   your image name   titleView addSubview imageView  navigationItem titleView   titleView

User · Answer

let s do try and checkout  let image   UIImage named   Navbar bg png   navigationItem titleView   UIImageView image  image  let imageView   UIImageView frame  CGRect x  0  y  0  width  40  height  40   imageView contentMode    ScaleAspectFit

User · Answer

Objective-C version     create the space for the image UIImageView  myImage     UIImageView alloc  initWithFrame CGRectMake 0  0  256  144      bind the image with the ImageView allocated myImage image    UIImage imageNamed   logo png      add image into imageview  myNavigationItem titleView   myImage    Just in case someone  like me  had arrived here looking for the answer in Objective-C

User · Answer

This worked for me    try it  let image   UIImage   UIImage named   LogoName   let imageView   UIImageView frame  CGRect x  0  y  0  width  25  height  25   imageView contentMode    scaleAspectFit imageView image   image navigationItem titleView   imageView

[ios] Navigation bar with UIImage for title

Examples related to ios

Examples related to cocoa-touch

Examples related to uiimage

Examples related to uinavigationbar