Bar Button Item not correctly aligned

Question

I have an issue with my navigation bar, the UIBarButtonItem is not correctly vertically aligned. I don't know why because I'm using a simple UIBarButtonItem and not a custom view. See my code below and thanks for your help!

UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithTitle:@"New Game" style:UIBarButtonItemStyleDone target:self action:@selector(newGame)];
self.navigationItem.rightBarButtonItem = newGameItem;

Screenshot navigation bar issue

That doesn't look like the default font for a standard UIBarButtonItem. Are you modifying any barbutton font properties? Maybe with UIAppearance? — hgwhittle, May 08 '14 at 15:39
You're wondering why "new game" is slightly **below** the "board" title? — CrimsonChris, May 08 '14 at 15:40
Yes I use Avenir Next, but I use this font in another app and there's no issue with the navigation bar. [[UIBarButtonItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor], NSFontAttributeName: [UIFont fontWithName:@"Avenir Next" size:18.0]} forState:UIControlStateNormal]; [[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor], NSFontAttributeName: [UIFont fontWithName:@"AvenirNext-DemiBold" size:18.0]}]; — Seb Thiebaud, May 08 '14 at 15:41
It sounds like a font size issue. Just to be clear, is "Board" a `title` or a `titleView`? — CrimsonChris, May 08 '14 at 15:43
Its dues to padding in the Font itself, you can try use `self.navigationItem.titleView` to set the title.. — iphonic, May 08 '14 at 15:44
Decreasing the font size of UIBarButtonItem from 18 to 16 is resolving the issue. — Seb Thiebaud, May 08 '14 at 15:56
i've updated my answer. Mark it as the answer for your question if you don't mind — kas-kad, May 08 '14 at 16:52
because it is the answer to your current question, not the advice to change font :) — kas-kad, May 08 '14 at 17:05
@SebThiebaud Which method did you use from the accepted answer? — ZeMoon, Sep 12 '14 at 09:08

kas-kad · Accepted Answer · 2014-05-08T17:09:56.133

Actually there are couple ways to align the bar buttons. Try to adjust the button title position with this:

[self.navigationItem.rightBarButtonItem setTitlePositionAdjustment:UIOffsetMake(-10, -10) 
                                                     forBarMetrics:UIBarMetricsDefault];

-10 -10 - just for example

OR

you can initialize your newGameItem with custom UIButton. The custom button is a subclass of UIButton with this method overridden

- (UIEdgeInsets)alignmentRectInsets {
    return UIEdgeInsetsMake(0, -10, 0, 15.0f); // here you can play with values to align your button properly
}

then initialize your newGameItem

CustomBarButton *button = [CustomBarButton buttonWithType:UIButtonTypeCustom];
[button setTitle:@"New game" forState:UIControlStateNormal];
button.frame = CGRectMake (0, 0, 60, 40);
[button addTarget:self action:@selector(newGame) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = newGameItem;

Second solution does indeed work, albeit not so elegant. Thanks! — micnguyen, Apr 01 '15 at 13:24

hagi · Answer 2 · 2015-06-03T13:38:20.080

2

I had a similar issue: We use custom fonts via UIAppearance for both navigation titles and bar button items, and in some cases, the right item was vertically misaligned.

I could easily fix the misalignment by using [self.navigationItem setRightBarButtonItem:rightItem animated:YES] instead of the property setter.

edited Jun 03 '15 at 13:38

answered Jun 03 '15 at 12:44

hagi

11,503
3
35
48

score 1 · Answer 3 · answered May 20 '15 at 13:41

I had the same problem with a button on the left, I was able to fix it in Xcode 6.3.1: select the button (bar button item) right column tab "ruler" inset image Top value: -54 instead of 0. Note that: my device is an iPhone4 with iOS 7, the button was perfectly in place in Xcode and misplaced on the device, now it is in place on the device and misplaced in Xcode

score 0 · Answer 4 · answered May 08 '14 at 15:46

Unfortunately, there is not much you can do about UIBarButtonItem vertical spacing. I believe you'll have to either increase the font size of your title on the UINavigationBar (you can do this with UIAppearance also), or decrease the font size of your UIBarButtonItem.

Bar Button Item not correctly aligned

4 Answers4

Linked