Placing a custom view based UIBarButtonItem in the navigation bar without default horizontal padding

Question

How do I remove the horizontal padding to the left and right of custom left and right UINavigationBar items? There seems to be ~ 10 points of padding that iOS sets by default.

I'm customizing left and right navigation bar buttons (I have given up on trying to set my own backButtonItem, so I'm just using the leftBarButtonItem).

In either case (left or right), pressing these custom buttons indicates that Apple seems to preserve some padding to the left of the leftBarButtonItem, and to the right of the rightBarButtonItem; regardless of how wide I make the custom background and image properties of the UIButton I place inside the left/right bar button item as its custom view.

Since UIBarButtonItems have no "frame" I can access, I can't position them within their superview like I can normal UIViews.

Any suggestions on how to remove this default padding? See screen shot attached to see the bit I'm trying to reduce to a zero width. In the screen shot, the plus icon appears shifted to the right because I gave it an inset; but the highlighted background image, also presumably using that inset, is getting clipped on its right side).

See image at: https://skitch.com/starbaseweb/rj2e5/ios-simulator

For reference, here's how I'm creating my custom UIBarButtonItem (in this case, it's the right button):

- (UIBarButtonItem *)customAddButtonItemWithTarget:(id)target action:(SEL)action {
  UIButton *customButtonView = [UIButton buttonWithType:UIButtonTypeCustom];

    customButtonView.frame = CGRectMake(0.0f, 0.0f, 45.0f, 44.0f);

    [customButtonView setBackgroundImage:
        [UIImage imageNamed:@"bgNavBarButton-OutsideRight-Normal.png"] 
        forState:UIControlStateNormal];
    [customButtonView setBackgroundImage:
        [UIImage imageNamed:@"bgNavBarButton-OutsideRight-Highlighted.png"] 
        forState:UIControlStateHighlighted];

    [customButtonView setImage:
        [UIImage imageNamed:@"bgNavBarButton-Add-Normal.png"] 
        forState:UIControlStateNormal];
    [customButtonView setImage:
        [UIImage imageNamed:@"bgNavBarButton-Add-Highlighted.png"] 
        forState:UIControlStateHighlighted];

    [customButtonView addTarget:target action:action 
        forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *customButtonItem = [[[UIBarButtonItem alloc] 
        initWithCustomView:customButtonView] autorelease];
    [customButtonView setImageEdgeInsets:UIEdgeInsetsMake(0.0f, 10.0f, 0.0f, 0.0f)];

    //customButtonItem.imageInsets = UIEdgeInsetsMake(0.0f, 10.0f, 0.0f, 0.0f);

    return customButtonItem;    
}

+1: i had this issue and tried a number of things..including insets, and just making the image at -10 in the x position and etc..had no luck so i just kept the small padding and redid the image to make it more appropriate. good luck. — Jesse Naugher, Jan 17 '11 at 16:22

score 83 · Accepted Answer · edited May 23 '17 at 12:06

83

55As commented above, the solution I went with is based on this answer to a different, but very much related question: How to adjust UIToolBar left and right padding. It is also facilitated by (and depends on) iOS5, which allows you to set multiple buttons on the left or right side, instead of just one.

Here's an example of removing the padding to the left of a custom left button item:

UIBarButtonItem *backButtonItem // Assume this exists, filled with our custom view

// Create a negative spacer to go to the left of our custom back button, 
// and pull it right to the edge:
UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] 
    initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace 
    target:nil action:nil];
negativeSpacer.width = -5; 
// Note: We use 5 above b/c that's how many pixels of padding iOS seems to add

// Add the two buttons together on the left:
self.navigationItem.leftBarButtonItems = [NSArray 
    arrayWithObjects:negativeSpacer, backButtonItem, nil];

And with this, the left padding for the left bar button item in a navigation bar, is gone!

NOTE: This has worked for me in iOS5 and iOS6. Given that iOS7 is considerably different (from the public demos), those of you with the early seeds of iOS7 should test if something so unintentional, like this hack, will actually continue to work for you beyond iOS6.

edited May 23 '17 at 12:06

Community

1
1

answered Nov 09 '11 at 19:54

idStar

10,674
9
54
57

7

Works also for the rightBarButtonItems without changing the order (you could be tempted to reverse the order of the backButtonItem & negativeSpace but it's not) – Martin Dec 14 '12 at 13:11
In particular I was having a difficult problem with a navigation controller being presented as a child in an iPad view controller. My custom back button kept being pushed to the left, off the navigation bar, but adding a 33pt spacer to the left fixed it for me :) – Marky Apr 12 '13 at 04:16
Nice hack. Yet IMO a testament to how screwed-up-complicated iOS programming is becoming. – Clay Bridges May 29 '13 at 14:46
@idStar this appears to still work in iOS 7 Beta 2. Is there a way to remove the vertical padding? I cannot adjust the height of negativeSpacer. – michaellindahl Jun 25 '13 at 20:58
@michaellindahl I haven't had any experience with adjusting the vertical spacing. You've had better success than I post iOS6.1. I'll link to an Apple Forum post shortly on that topic, given the iOS7 NDA. – idStar Jul 18 '13 at 19:24
excellent stuff thanks. Although to note, my experimentation says the spacer width should be 7 not 5, ergo negativeSpacer.width = -7; – Max MacLeod Jul 31 '13 at 10:24
@RicardoSantos yes,in my project iOS7 is different from iOS6...that's strange. – frank Sep 29 '13 at 16:17
I can't get this to work for iOS 7. No changes occur with a negative width UIBarButtonSystemItemFixedSpace (I'm setting the rightBarButtonItems). – Stian Høiland Nov 09 '13 at 23:07
Works in iOS 9 too, spacer width should be -8.0 – Babu Lal Apr 30 '16 at 09:42
No longer works on iOS 11. See https://stackoverflow.com/q/45544961/934710 – pckill Sep 14 '17 at 09:58

score 3 · Answer 2 · answered Mar 03 '11 at 19:09

3

I have tried this and it works:

1) Create a custom UIToolbar subclass, which does nothing in -drawRect:, and is not opaque, and has backgroundColor = [UIColor clearColor].

2) Create a custom UIBarButtonItem with the toolbar as the custom view.

3) Add your buttons to the custom toolbar.

4) In your custom toolbar override -layoutSubviews and do your own spacing.

answered Mar 03 '11 at 19:09

Evadne Wu

3,190
1
25
25

Another trick is that you can simply make the navigation bar somehow wider than the viewport, so the right padding is clipped off, and your button appears at the right place! This only works if you manage the UINavigationBar directly, i.e. not thru a navigation controller. – Evadne Wu Mar 03 '11 at 19:11
Thanks Evadne. I moved past this with a workaround, but I'll try to come back to this post release to confirm the suggested workaround you have so I can then mark it as the accepted answer. – idStar Mar 04 '11 at 12:31
I did find a cleaner implementation, possible with iOS5. See the answer here: http://stackoverflow.com/questions/6021138/how-to-adjust-uitoolbar-left-and-right-padding/7042201#7042201 I tested this solution and it worked. Two lines of code and the least intrusive. – idStar Nov 09 '11 at 18:48

Placing a custom view based UIBarButtonItem in the navigation bar without default horizontal padding

2 Answers2

Linked