How to add image on top of UINavigationController's navigation bar?

Question

I am making an app and was asked to put in a logo over the navigation bar, but also reaching outside the borders of the bar, covering part of my view. This is how it's exactly supposed to be placed (the white circle is the logo).

enter image description here

Due to complicated view controllers structure in this app I want to use UINavigationController, but it seems it could make placing the logo a bit more problematic.

What's a good way to do this? (since obviously putting logo as title image of navigation bar is out of the question due to weird placement)

I was thinking about either making it a subview of keyWindow or of the navigationController.view. Can the first one cause my app to be rejected by Apple?

I recently post answer on similar question - have a look at http://stackoverflow.com/questions/19878288/ios-custom-shape-navigation-bar — Jakub, Nov 15 '13 at 14:37

score 15 · Accepted Answer · answered Nov 15 '13 at 15:17

If you want to add an image from a UIViewController not from a subclass of UINavigationController you can do something like this:

-(void)addImageOnTopOfTheNavigationBar {
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"yourImage"]];

   imageView.frame = CGRectMake(....); //set the proper frame here 
   [self.navigationController.view addSubview:imageView];

}

score 3 · Answer 2 · answered Nov 15 '13 at 15:35

3

The navigation bar has something called titleView. Now this can be any view. But I just put a imageview on it.

Mine is in the init function.

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo"]];

answered Nov 15 '13 at 15:35

mashdup

875
7
18

As I said in my question, this is probably not a good idea. Mainly because it's going to get scaled to fit middle of the navigation bar, while I need it to stretch outside the borders of the bar. – johnyu Nov 15 '13 at 15:45
ah fair enough :). you need to add a subview like danypata said. Make sure you set the autoresize though otherwise it wont stay in the middle – mashdup Nov 15 '13 at 16:04

score 3 · Answer 3 · answered Sep 18 '15 at 18:08

3

You can do it from IB easily :

Add an image to your controller (not in your view hierarchy)
Connect your UINavigationItem's title view to this image
Et voilà !

answered Sep 18 '15 at 18:08

GPY

3,832
1
16
11

score 1 · Answer 4 · answered Apr 08 '15 at 07:03

UIImage*image = [UIImage imageNamed:@"logo"];

float targetHeight = self.navigationController.navigationBar.frame.size.height;
float logoRatio = image.size.width / image.size.height;
float targetWidth = targetHeight * logoRatio;

UIImageView*logoView = [[UIImageView alloc] initWithImage:image];
// X or Y position can not be manipulated because autolayout handles positions.
//[logoView setFrame:CGRectMake((self.navigationController.navigationBar.frame.size.width - targetWidth) / 2 , (self.navigationController.navigationBar.frame.size.height - targetHeight) / 2 , targetWidth, targetHeight)];
[logoView setFrame:CGRectMake(0, 0, targetWidth, targetHeight)];
self.navigationItem.titleView = logoView;

// How much you pull out the strings and struts, with autolayout, your image will fill the width on navigation bar. So setting only height and content mode is enough/
[logoView setContentMode:UIViewContentModeScaleAspectFit];

/* Autolayout constraints also can not be manipulated since navigation bar has  immutable constraints
self.navigationItem.titleView.translatesAutoresizingMaskIntoConstraints = false;

NSDictionary*metricsArray = @{@"width":[NSNumber numberWithFloat:targetWidth],@"height":[NSNumber numberWithFloat:targetHeight],@"margin":[NSNumber numberWithFloat:20]};
NSDictionary*viewsArray = @{@"titleView":self.navigationItem.titleView};

[self.navigationItem.titleView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>margin=)-H:[titleView(width)]-(>margin=)-|" options:NSLayoutFormatAlignAllCenterX metrics:metricsArray views:viewsArray]];
[self.navigationItem.titleView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[titleView(height)]" options:0 metrics:metricsArray views:viewsArray]];

NSLog(@"%f", self.navigationItem.titleView.width );
*/

So all we actually need is

UIImage*image = [UIImage imageNamed:@"logo"];
UIImageView*logoView = [[UIImageView alloc] initWithImage:image];
float targetHeight = self.navigationController.navigationBar.frame.size.height;
[logoView setFrame:CGRectMake(0, 0, 0, targetHeight)];
[logoView setContentMode:UIViewContentModeScaleAspectFit];

self.navigationItem.titleView = logoView;

How to add image on top of UINavigationController's navigation bar?

4 Answers4