4

So, this is what I'm trying to accomplish:

That's how it should look

It's a UINavigationBar with a UIBarButtonItem that gets initialized with a custom UIButton.
Basically like this:

UIButton *favoriteButton = [UIButton buttonWithType:UIButtonTypeCustom];
[favoriteButton addTarget:target
                   action:action
         forControlEvents:UIControlEventTouchUpInside];
favoriteButton.frame = CGRectMake(0.0f, 0.0f, 44.0f, 44.0f);

UIImage *backgroundImage = [[UIImage imageNamed:@"favorite-button-background-orange"]
                    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 2, 0, 0)];
[favoriteButton setBackgroundImage:backgroundImage
                          forState:UIControlStateNormal];

UIBarButtonItem *favoriteButtonItem = [[UIBarButtonItem alloc] initWithCustomView:favoriteButton];

The problem is I can't seem to get rid of that nasty little border on the right hand side of the UINavigationBar.

That's how it looks

I tried setting a custom TitleView as described in "How to remove padding next to a UIBarButtonItem" but this didn't change a thing.

I also tried adding another UIBarButtonItem with a negative width (as suggested in some blogposts I read) but that didn't help either.

UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
                 target:nil
                 action:nil];
negativeSpacer.width = -5.0f;
self.navigationItem.rightBarButtonItems = %[favoriteButtonItem, negativeSpacer];

I assume iOS won't let me change it because the "rounded border" reserves some (unavoidable?) space / padding? So my question is. How should I work around this limitation? Do I need to create a custom UINavigationBar class? Can I fake it somehow by modifying the UIBarButtonItem? Am I just using the wrong component?

Community
  • 1
  • 1
Pascal
  • 5,879
  • 2
  • 22
  • 34
  • There is work around solution, is that you create such image and assign to Toolbar/Navigation bar which is having same gradient color as of your button. Home this helps you.. – P.J Apr 19 '13 at 14:04

3 Answers3

1

There is no option for customizing the default navigation bar button items(back button, right bar button and left barbutton ) in navigation bar. For getting your requirement you can use custom navigation bar.

unnu
  • 744
  • 1
  • 5
  • 13
Balu
  • 8,470
  • 2
  • 24
  • 41
  • can you give me a hint regarding "custom navigation bar"? No matter what I try, I can't get rid of the border on the right. – Pascal Apr 22 '13 at 11:16
  • "no option for customising the default navigation bar button items" the border doesn't seem to come from the navigation button items but the navigation bar itself. Even implementing my own drawRect method in my navigation bar subclass doesn't help, well it doesn't even seem to get called anymore – Pascal Apr 22 '13 at 11:17
  • hide your navigation bar and keep an imageview with topbar and add buttons over the imageview . – Balu Apr 22 '13 at 11:18
1

The second solution you mention actually works (tested today on both iOS6 & 7). The problem is that the elments of the rightBarButtonsItem array are displayed from right to left; this means that the negative space actually needs to appear as first item of the array to achieve the desired effect.

Norswap
  • 11,740
  • 12
  • 47
  • 60
0

There would be two solutions. (It may not be exact solution)

1) You should subclass UINavigationBar and play around with it. For example you may have to draw your UIBarButtonItem yourself in the right corner.

2) Instead of using UINavigationBar, Use UIView and add subviews to make it exactly look like the UINavigationBar and use it.

I hope second solution would be easy to achieve in your requirement. I don't think there would be any other way to achieve your requirement.

Dinesh Raja
  • 8,501
  • 5
  • 42
  • 81