iOS custom shape navigation bar

Question

I want to developer app with a custom navigation bar like in the following images:

enter image description here

I think that i need to subclass UINavigationBar and add button to centre of nav bar, but i don't really know how to make navigation bar look like on image. Can you please give me advice what should i do, links to any kind of documentation would be awesome!

Similar questions about navBar that doesn't helped me:

EDIT:

My idea is next: make custom navigation bar height little bigger than default size, and add background image with arrow in it and with some transparency on the edges.

score 6 · Accepted Answer · answered Nov 14 '13 at 09:11

If you want a button (you probably do want) you can achieve it completely by subclassing UINavigationBar. You should remember that height of UINavigationBar is read-only property.

Style but not tappable:

So let's assume we subclass the navigation bar and add button there. You could do this and it will be going look great. For example:

- (void)drawRect:(CGRect)rect
{
    self.backgroundColor = [UIColor lightGrayColor];
    UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(self.frame.size.width/2-50, 0 , 100, 100)];
    [myButton setBackgroundColor:[UIColor lightGrayColor]];
    [myButton setTitle:@"Normal" forState:UIControlStateNormal];
    [myButton setTitle:@"Highlighted" forState:UIControlStateHighlighted];
    [self addSubview:myButton];
    [self sendSubviewToBack:myButton];
}

But you will facing a problem that your button is non tapeable below UINvaigationBar. (I post an image on the bottom of the answer)

So there is clearly not a path you want to follow. Don't even try that.

Style but not tappable 2:

You may override this method in your navigation bar subclass

- (CGSize) sizeThatFits:(CGSize)size  {
  return CGSizeMake(custom_width, custom_height);
}

And then mask it using UIBezierPath for example

The right (tappable) way:

You have to create a view stick to your UINavigationBar. What i will do here (if you want it to every screen) is:

Make a Category of UIViewController which can draw (for example - this is easiest way) UIButton.
Style this 'UIButton' whatever you want (if you want
Pin action to 'UIButton': [btn addTarget:self action:@selector(menuShow:) forControlEvents:UIControlEventTouchUpInside];
menuShow: method should be declare in your category
You can call drawing button every time you want to redraw view controller.

As you can see there there will be two separates View: UINavigationBar and UIButton. This is allow you to set content under this little button and make it tapable.

So why just don't hide navigation bar, and use different view? Because iOS7 ;) When Apple change it in iOS7 for example then you have to rebuild your pseudo NavigationBar, with only additional view, you don't need to do anything.

enter image description here

This is going to be a perfect solution for me, but could I get a little clarification? "Make a Category of UIViewController which can draw (for example - this is easiest way) UIButton." Does this mean the UIViewController category overrides -drawRect or something of that sort? And is the category imported in your AppDelegate or do you subclass UINavigationBar and import it there? Thanks! — Ryan, Dec 17 '13 at 21:34
No - you shouldn't override this method (of any method) in categories - debugging is a horror :) The case here is that category constains ecery actin require to draw something on `UIViewController` and pin target there. Why? To avoid copy and paste code between VCs. — Jakub, Dec 18 '13 at 07:16

score 2 · Answer 2 · answered Nov 11 '13 at 11:38

2

You do not need to subclass UINavigationBar. Create UIView add to it UIImageView as background with image in the shape you need, add button.

Subclass UINavigationController hide UINavigationBar, add custom navigation bar.

answered Nov 11 '13 at 11:38

persona non grata

59
2

You don't need to subclass UINavigationController. There is an option for "shows navigation bar". – Fogmeister Nov 14 '13 at 09:03

score 2 · Answer 3 · answered Nov 14 '13 at 09:00

First Hide navigation bar using -

self.navigationController.navigationBarHidden = YES;

Then create UIView with required height,height of navigationBar is 44px.Then create background image view, object of required UIButton and add all objects on created UIView as a subview.It will look like navigationBar.Thank you.

score 1 · Answer 4 · answered Nov 09 '13 at 17:51

1

You can add your custom shaped view as titleView on the navigation bar. Just make sure that clipsToBounds is set to NO, so it doesn't get clipped.

answered Nov 09 '13 at 17:51

kkodev

2,557
23
23

iOS custom shape navigation bar

4 Answers4

Linked