CODEWITHSUNDEEP
iosiphoneobjective-cxcode
Vlad Z.
Vlad Z.

Reputation: 3451

iOS custom shape navigation bar

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

enter image description here

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.

Upvotes: 3

Views: 2373

Answers (4)

Jakub
Jakub

Reputation: 13860

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:

  1. Make a Category of UIViewController which can draw (for example - this is easiest way) UIButton.
  2. Style this 'UIButton' whatever you want (if you want
  3. Pin action to 'UIButton': [btn addTarget:self action:@selector(menuShow:) forControlEvents:UIControlEventTouchUpInside];
  4. menuShow: method should be declare in your category
  5. 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

Upvotes: 6

iSmita
iSmita

Reputation: 1292

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.

Upvotes: 2

persona non grata
persona non grata

Reputation: 59

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.

Upvotes: 2

kkodev
kkodev

Reputation: 2607

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.

Upvotes: 1

Related Questions