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;    
}

Answer 1

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.