Horizontally centering all items in UIToolbar, including custom view with UILabel

Question

I have a UIPopoverController with a toolbar and two buttons. Between these system buttons is a custom view with a label. I notice that the system buttons appear slightly higher than the middle line of the toolbar.

If you look at the screenshot, the Cancel and + system buttons look higher up than the label -- even though the label is horizontally centered. Is this the default look in iOS 7 and thus "normal"? Or is there some tweak I can do with the code below to align the label? Maybe move it slightly upwards within its view?

I know this is a minor thing, but it looks weird to me.

I've tried changing the custom view's frame, but when it's added to the toolbar it seems to adjust it however it sees fit. Should I instead add the view containing the label above the toolbar, and not as a button which contains the label?

Firstly I create the popover controller:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIViewController *viewController = [[UIViewController alloc] init];
    viewController.view.frame = CGRectMake(0, 0, 200, 200);

    self.popoverController = [[UIPopoverController alloc] initWithContentViewController:viewController];
    UIToolbar *viewToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 200, 39)];
    viewToolbar.backgroundColor = [UIColor grayColor];
    viewToolbar.barStyle = UIBarStyleDefault;

    [self.popoverController.contentViewController.view addSubview:viewToolbar];
    self.popoverController.popoverContentSize = CGSizeMake(200, 200 + 39);

    _toolbar = viewToolbar;
}

Then when the button is tapped:

- (IBAction)buttonTapped:(id)sender {
    UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelAction:)];
    UIBarButtonItem *separator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
    label.font = [UIFont systemFontOfSize:17];
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor blackColor];
    label.text = @"The Title";
    label.textAlignment = NSTextAlignmentCenter;
    [label sizeToFit];

    UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithCustomView:label];
    UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addAction:)];

    _toolbar.items = @[ cancelButton, separator, title, separator, addButton ];

    [self.popoverController presentPopoverFromRect:self.button.frame inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:NO];
}

Answer 1

One solution would be to put your UILabel *label inside a 'container' UIView with a y origin of the *label label at maybe -2px. Then set the 'container' UIView as the view for the UIBarButtonItem

UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
label.font = [UIFont systemFontOfSize:17];
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor blackColor];
label.text = @"The Title";
label.textAlignment = NSTextAlignmentCenter;
[label sizeToFit];

UIView *labelContainerView = [[UIView alloc]initWithFrame:label.frame];

//adjust the origin
CGRect labelFrame = label.frame;
labelFrame.origin.y = -2;
label.frame = labelFrame;

[labelContainerView addSubView:label];
UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithCustomView:labelContainerView];