iOS 7 UIBarButtonItem ridiculous spacing issue

Question

I'm having an issue that so far I cannot find a solution to. I am adding a new feature to my app and wish to add a second UIBarButtonItem on the left side of my UINavigationBar. For some reason iOS 7 takes this as a button1, grandCanyon, button2. I cannot find any way to remove the ridiculous spacing between these two buttons, which is also causing my title to be out of alignment. Can anyone help!? Is there a solution to this!?

Code:

UIBarButtonItem *firstButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"firstButton"] style:UIBarButtonItemStylePlain target:self action:@selector(showSettings)];
UIBarButtonItem *secondButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"secondButton"] style:UIBarButtonItemStylePlain target:self action:@selector(showAttachments)];
[self.navigationItem setLeftBarButtonItems:[NSArray arrayWithObjects:firstButton, secondButton, nil]];

Answer 1

Think I've managed to sort out the problem using a custom view as shown below, it's not perfect (selection dims the buttons darker rather than lighter for example) but I'll try fixing that tomorrow. Just glad my headache is over! Thank you for your help, it lead me to a few new approaches I didn't try.

UIImage *firstButtonImage = [UIImage imageNamed:@"firstButton"];
firstButtonImage = [firstButtonImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

UIButton *firstButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
[firstButton setImage:firstButtonImage forState:UIControlStateNormal];
[firstButton addTarget:self action:@selector(firstButtonPressed) forControlEvents:UIControlEventTouchUpInside];

UIImage *secondButtonImage = [UIImage imageNamed:@"secondButton"];
secondButtonImage = [secondButtonImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

UIButton *secondButton = [[UIButton alloc] initWithFrame:CGRectMake(45, 0, 35, 35)];
[secondButton setImage:secondButtonImage forState:UIControlStateNormal];
[secondButton addTarget:self action:@selector(secondButtonPressed) forControlEvents:UIControlEventTouchUpInside];

UIView *leftBarItemsView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)];
[leftBarItemsView addSubview:firstButton];
[leftBarItemsView addSubview:secondButton];

UIBarButtonItem *leftBarItem = [[UIBarButtonItem alloc] initWithCustomView:leftBarItemsView];

[self.navigationItem setLeftBarButtonItems:[NSArray arrayWithObject:leftBarItem]];

Answer 2

There may be a better way, but to correct spacing issues on bar button items on iOS 7, I've subclassed UINavigationBar and overridden the layoutSubviews method. There you can move each bar button item wherever you want.

As an example:

- (void)layoutSubviews
{
    [super layoutSubviews];

    // If iOS 7, fix the bar button positions
    BOOL isIOS7 = [[[UIDevice currentDevice] systemVersion] compare:@"7" options:NSNumericSearch] != NSOrderedAscending;
    if (isIOS7)
    {
        for (UIBarButtonItem *item in self.topItem.leftBarButtonItems)
        {
            // Reposition the customView property
        }

        for (UIBarButtonItem *item in self.topItem.rightBarButtonItems)
        {
            // Reposition the customView property
        }
    }
}

Actually, as I looked at my code, I was using UIBarButtonItems with custom views. So I was able to move the custom view position.

You will likely need to loop through the subviews of the UINavigationBar to move them if you're just using UIBarButtonItems with images like this:

- (void)layoutSubviews
{
    [super layoutSubviews];

    // If iOS 7, fix the bar button positions
    BOOL isIOS7 = [[[UIDevice currentDevice] systemVersion] compare:@"7" options:NSNumericSearch] != NSOrderedAscending;
    if (isIOS7)
    {
        for (UIView *subview in self.subviews)
        {
            // Reposition as needed
        }      
    }
}