UIBarButtonItem with custom view not properly aligned on iOS 7 when used as left or right navigation bar items

Question

The following code works up through iOS 6:

UIButton *myButton = nil;
myButton = [UIButton buttonWithType:UIButtonTypeCustom];
myButton.bounds = CGRectMake(0,0,44,30);
// setup myButton's images, etc.

UIBarButtonItem *item = nil;
item = [[UIBarButtonItem alloc] initWithCustomView:customButton];

This is how the button is supposed to be aligned:

Normal positioning

However, on iOS 7, the button appears to be offset from the right or left by too many pixels:

Incorrect positioning on iOS 7

How can I get my custom bar button items to be aligned properly?

Maybe my solution will help you: [How to fix iOS 7 UIBarButtonItem spacing](http://stackoverflow.com/a/19317105/2243451) — Marius Kažemėkaitis, Oct 11 '13 at 11:37

score 67 · Answer 1 · edited Apr 03 '18 at 21:42

67

Works until iOS11!

You can use negative flexible spaces and rightBarButtonItems property instead of rightBarButtonItem:

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
spacer.width = -10; // for example shift right bar button to the right

self.navigationItem.rightBarButtonItems = @[spacer, yourBarButton];

edited Apr 03 '18 at 21:42

pkamb

33,281
23
160
191

answered Apr 04 '14 at 16:23

malex

9,874
3
56
77

2

I cannot understand why we have to hack something so simple... This has been around for a year at least. No solution Apple ? – Petar Nov 10 '14 at 14:58
3

It violates the Human Interface Guide. That's why it's not customizable. They're hoping you leave it alone. This is a problem with designers who don't read the guideline. – SmileBot Dec 01 '14 at 19:09
Though I warned a designer friend about stuff like this, I can confirm that it works. We now have an oversized accessoryView. – Will Apr 14 '15 at 03:59
1

Works like a charm. And it's the only way I could find to work on all iOS 6 ~ 8 systems without subclassing `UINavigationBar`. Great answer! – liuyaodong May 21 '15 at 02:57
Yes. Apple changes layout of navigation bar. – malex Jul 23 '18 at 09:42

score 57 · Accepted Answer · answered Sep 17 '13 at 22:54

57

In order to fix this bug, you must subclass UIButton so that you can override alignmentRectInsets. From my testing, you'll need to return a UIEdgeInsets with either a positive right offset or a positive left offset, depending on the button position. These numbers make no sense to me (at least one of them should be negative, according to common sense), but this is what actually works:

- (UIEdgeInsets)alignmentRectInsets {
    UIEdgeInsets insets;
    if (IF_ITS_A_LEFT_BUTTON) {
        insets = UIEdgeInsetsMake(0, 9.0f, 0, 0);
    } 
    else { // IF_ITS_A_RIGHT_BUTTON
        insets = UIEdgeInsetsMake(0, 0, 0, 9.0f);
    }
    return insets;
}

Special thanks to @zev for suggesting I try adjusting alignmentRectInsets.

answered Sep 17 '13 at 22:54

jaredsinclair

12,687
5
35
56

1

Do I have to apply that code only on iOS7? What about iOS6? Thanks. – Ricardo Sep 23 '13 at 15:32
Chris: In my code, I set the position when I alloc/init the button. Since it's a subclass anyway, I added a custom `@property` for the position, left or right. Ricardo: this is only for iOS 7. – jaredsinclair Sep 23 '13 at 18:02
3

This works but when I go pop a view from the navigation stack and it animates "back", the button is still offset incorrectly for about a half a second, then it jumps to the correct location. Any idea how to keep this from happening? – Kyle Begeman Oct 07 '13 at 19:49
I have the same problem when I implemented this. Now my button jumps form its position. I used and this answer http://stackoverflow.com/questions/15261148/uibarbuttonitem-custom-background-appearance-jumping-after-flip-transition but this didn't helped me either. Any ideas? – Lily Oct 11 '13 at 15:24
@KyleBegeman & Lily — I don't see this behavior on iOS 7. Are you using this code on iOS 6? – jaredsinclair Oct 11 '13 at 19:23
@jaredsinclair I am using iOS7 exclusively and it is still doing this behavior – Kyle Begeman Oct 11 '13 at 19:28
@KyleBegeman I'd have to see your code. I'm using an otherwise vanilla UINavigationController (presented modally). – jaredsinclair Oct 11 '13 at 19:29
Yup I am adding this code because of iOS7. For a code I will post an answer as well. – Lily Oct 15 '13 at 07:31
This "jumping" is probably happening from you setting your barbuttonitems in the viewDidAppear method. Try sticking the barbuttinitem setup in viewWillAppear instead. Or, if you only want the buttons to be setup once in the view's lifecycle, stick the barbuttonitem setup in the viewDidLoad method. – NovaJoe Nov 09 '13 at 19:27
It is not needed from iOS 11. – Míng May 11 '21 at 06:00

score 28 · Answer 3 · answered Nov 13 '13 at 10:16

I have tried all of the answers above and nothing worked for me. And here is what works, if anyone would need this:

(No subclassing needed)

// Add your barButtonItem with custom image as the following 
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleBordered target:self action:@selector(categoryButtonPressed)];
// set your custom image
[barButton setImage:categoryImage];
// finally do the magic
barButton.imageInsets = UIEdgeInsetsMake(0.0, -20, 0, 0);

-Take a look at the result.

Notice the space to the left button and from the right button (the right button has the default behavior)

enter image description here

score 10 · Answer 4 · answered Sep 19 '13 at 22:55

Ok, I went the other "direction". I made everything line up properly via Storyboard with iOS 7 (assuming this is how it will continue to work). And then using the describe sub-class approach, I sub-class UIButton with the following implementation.

- (UIEdgeInsets)alignmentRectInsets {
    UIEdgeInsets insets;
    if (SYSTEM_VERSION_LESS_THAN(@"7.0")) {
        if ([self isLeftButton]) {
            insets = UIEdgeInsetsMake(0, -10, 0, 0);
        } else {
            insets = UIEdgeInsetsMake(0, 0, 0, -10);
        }
    } else {
        insets = UIEdgeInsetsZero;
    }

    return insets;
}

- (BOOL)isLeftButton {
    return self.frame.origin.x < (self.superview.frame.size.width / 2);
}

So this code only runs if the device is pre-iOS 7.

Thanks for the insight @jaredsinclair!

Works fine, although you probably want UIEdgeInsetsMake(0, 0, 0, 10) instead of -10 for the right button case. — Şafak Gezer, Oct 08 '13 at 13:14
I actually ran into issues with this during animations on iOS 6 so I ended up pulling this out and going this route, http://stackoverflow.com/a/19169682/250190 — Chris Wagner, Oct 08 '13 at 16:38

score 3 · Answer 5 · answered Oct 11 '13 at 19:44

@jaredsinclair

Here is a look at my code.

// Create the tweetly button that will show settings
self.tweetlyDisplay = [NavButton buttonWithType:UIButtonTypeCustom];
[self.tweetlyDisplay setFrame:CGRectMake(0, 0, 90, 44)];
[self.tweetlyDisplay setBackgroundColor:[UIColor clearColor]];
[self.tweetlyDisplay setBackgroundImage:[UIImage imageNamed:@"settings.png"] forState:UIControlStateNormal];
[self.tweetlyDisplay setAdjustsImageWhenHighlighted:NO];
[self.tweetlyDisplay addTarget:self action:@selector(tweetlyPressed:) forControlEvents:UIControlEventTouchUpInside];

// Add the Tweetly button as the left bar button item
// This had a glitch that moves the image to the right somewhat
UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithCustomView:self.tweetlyDisplay];
self.navigationItem.leftBarButtonItem = leftBarButton;

See anything that isnt right?

Here is the result. The second image is not so visible because I had to time taking the screenshot and it is still in transition, but you can clearly see how it is improperly offset.

Good normal image:

This is the good image, before navigating around

Bad Offset Image:

You can see the offset is now off again before snapping into place

After about a half second, the image then snaps back to the original image location.

Here is my code for the NavButton.h and .m:

/**********************************************

 NavButton.h

 **********************************************/

#import <UIKit/UIKit.h>

@interface NavButton : UIButton

@end






/**********************************************

 NavButton.m

**********************************************/


#import "NavButton.h"

@implementation NavButton {

    int imageHeight;

}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code

        imageHeight = 44;

    }
    return self;
}

/*
 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect
 {
 // Drawing code
 }
 */


- (UIEdgeInsets)alignmentRectInsets {
    UIEdgeInsets insets;
    if ([self isLeftButton]) {
        insets = UIEdgeInsetsMake(0, 9.0f, 0, 0);
    }
    else { // IF ITS A RIGHT BUTTON
        insets = UIEdgeInsetsMake(0, 0, 0, 9.0f);
    }
    return insets;
}


- (BOOL)isLeftButton {
    return self.frame.origin.x < (self.superview.frame.size.width / 2);
}


// THIS IS THE TRICK.  We make the height of the background rect match the image.
-(CGRect)backgroundRectForBounds:(CGRect)bounds
{
    CGRect bgRect = bounds;
    bgRect.origin.y = (bounds.size.height - imageHeight)/2.0f;
    bgRect.size.height = imageHeight;

    return bgRect;
}


@end

This all looks good to me. It may be that the workaround I proposed above doesn't work in this particular case. You could try a design with that button on the top right, no? — jaredsinclair, Oct 11 '13 at 20:46
Top right already has its own button! I will just have to see what else I can do. Any idea how to know when the root view controller is being loaded again after the stack is popped? Maybe I can just add the button to the nav bar view instead of as a bar button item and then fade it out when pushing a view controller and then fade it back in when popping to the root view controller — Kyle Begeman, Oct 11 '13 at 20:50
Adding your own views to a navigation bar is a bag of hurt. I wouldn't do that unless I had no other choice. You can try using the UINavigationControllerDelegate methods to find out. — jaredsinclair, Oct 12 '13 at 20:22
The solution can be found here: http://stackoverflow.com/questions/19233591/custom-uibarbuttonitem-alignment-off-with-ios7/19317105#19317105 — rockstarberlin, Oct 29 '13 at 18:29

score 2 · Answer 6 · edited May 23 '17 at 12:18

2

A better solution without jumping buttons arround can be found here:

Custom UIBarButtonItem alignment off with iOS7

edited May 23 '17 at 12:18

Community

1
1

answered Oct 29 '13 at 18:29

rockstarberlin

1,853
1
18
31

score 1 · Answer 7 · edited May 23 '17 at 12:26

Not a huge fan of subclassing UIButton or method swizzling from Marius's answer: https://stackoverflow.com/a/19317105/287403

I just used a simple wrapper, and moved the button's frame's x in a negative direction until I found the correct positioning. Button tapping appears to be fine as well (although you could extend the width of the button to match the negative offset if you needed).

Here's the code I use to generate a new back button:

- (UIBarButtonItem *) newBackButton {
    // a macro for the weak strong dance
    @weakify(self);
    UIButton *backButton = [[UIButton alloc] init];
    [backButton setTitle:@"Back" forState:UIControlStateNormal];
    backButton.titleLabel.font = [UIFont systemFontOfSize:17];
    CGFloat width = [@"Back" boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:17]} context:nil].size.width + 27;
    backButton.frame = CGRectMake(-17.5, 0, width + 17.5, 44);
    [backButton setImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] forState:UIControlStateNormal];
    [backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 14, 0, 0)];
    [backButton setTitleColor:mTCOrangeColor forState:UIControlStateNormal];
    backButton.contentEdgeInsets = UIEdgeInsetsZero;
    backButton.imageEdgeInsets = UIEdgeInsetsZero;
    [backButton addEventHandler:^(id sender) {
        // a macro for the weak strong dance
        @strongify(self);
        // do stuff here
    } forControlEvents:UIControlEventTouchUpInside];
    UIView *buttonWrapper = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 44)];
    [buttonWrapper addSubview:backButton];
    return [[UIBarButtonItem alloc] initWithCustomView:buttonWrapper];
}

ozba · Answer 8 · 2014-01-28T17:15:13.800

I would like to add to @jaredsinclair confirmed answer the below override methods to those who have text and/or image in their navigation button, otherwise the text and the image won't be aligned (only the background image):

- (UIEdgeInsets) titleEdgeInsets {
if(SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
{
    if (IF_ITS_A_LEFT_BUTTON) {
    {
        return UIEdgeInsetsMake(0, 0, 0, 9.0f);
    }
    else
    { // IF_ITS_A_RIGHT_BUTTON
        return UIEdgeInsetsMake(0, 9.0f, 0, 0);
    }
}
return [super titleEdgeInsets];
}

- (UIEdgeInsets)imageEdgeInsets {
if(SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
{
    if (IF_ITS_A_LEFT_BUTTON)
    {
        return UIEdgeInsetsMake(0, 0, 0, 9.0f);
    }
    else
    { // IF_ITS_A_RIGHT_BUTTON
        return UIEdgeInsetsMake(0, 9.0f, 0, 0);
    }
}

return [super imageEdgeInsets];
}

p.s. the macro is:

#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

Lily · Answer 9 · 2013-10-31T12:13:38.390

*Solution found, read on the end of the answer.*

@jaredsinclair

I have similar case as Kyle Begeman

This is the button

 - (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    }
    return self;
}

- (UIEdgeInsets)alignmentRectInsets {
    UIEdgeInsets insets;

    if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")){
        if ([self isLeftButton]) {
            insets = UIEdgeInsetsMake(0, 9.0f, 0, 0);
        } else {
            insets = UIEdgeInsetsMake(0, 0, 0, 9.0f);
        }
    }else{
        insets = UIEdgeInsetsZero;
    }

    return insets;
}

- (BOOL)isLeftButton {
    return self.frame.origin.x < (self.superview.frame.size.width / 2);
}

and I use it in this case

PBNavigationBarButton *dashboardButton = [PBNavigationBarButton buttonWithType:UIButtonTypeCustom];
    UIImage *dashboardImage = [UIImage imageNamed:@"btn_dashboard.png"];
    UIImage *dashboardImageHighlighted = [UIImage imageNamed:@"btn_dashboard_pressed.png"];

    NSInteger halfImageWidth = ceilf([dashboardImage size].width/2.0f);

    [dashboardButton setBackgroundImage:[dashboardImage stretchableImageWithLeftCapWidth:halfImageWidth topCapHeight:0] forState:UIControlStateNormal];
    [dashboardButton setBackgroundImage:[dashboardImageHighlighted stretchableImageWithLeftCapWidth:halfImageWidth topCapHeight:0] forState:UIControlStateHighlighted];
    [dashboardButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
    [dashboardButton sizeToFit];

    UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc]  initWithCustomView:dashboardButton];

Everything looks great except that, when I go back to the previous VC, the button repositions itself. Like a small jump. For me it does jump right away not after a second. And it happens after I go do the popVC from NavigationViewController.

Edit: The answer below, the swizzling method from Marius helped me as well.

score 0 · Answer 10 · answered Feb 05 '14 at 15:15

I came up with a shortened Version of jaredsinclair's approach:

- (UIEdgeInsets)alignmentRectInsets {
    return [self isLeftButton] ? UIEdgeInsetsMake(0, 9.0f, 0, 0) : UIEdgeInsetsMake(0, 0, 0, 9.0f); 
}

- (BOOL)isLeftButton {
    return self.frame.origin.x < (self.superview.frame.size.width / 2);
}

Works like a charm.

score 0 · Answer 11 · answered Feb 26 '14 at 16:45

in ios7 you can just add a dummy barbuttonitem for fixing left space you should add dummy as first, for right as last

example for left, you should add this after setting your original items or in viewdidload if you are setting buttons using storyboard.

NSMutableArray *buttons = [[NSMutableArray alloc] init];
UIBarButtonItem *spacerItem = [[UIBarButtonItem alloc] init];
[buttons addObject:spacerItem];
for(UIBarButtonItem *item in self.leftBarButtonItems){
    [buttons addObject:item];
}
[self setLeftBarButtonItems:[NSArray arrayWithArray:buttons] animated:NO];

score 0 · Answer 12 · answered Jun 28 '17 at 09:21

It just simply adjust imageEdgeInsets to fix this bug.

try this.

    UIButton *actionBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    [actionBtn setImage:[UIImage imageNamed:@"arrow.png"] forState:UIControlStateNormal];
    [actionBtn addTarget:self action:@selector(goToSetting) forControlEvents:UIControlEventTouchUpInside];
    actionBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 9, 0, -9);

    UIBarButtonItem *profileBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:actionBtn];
    self.topViewController.navigationItem.rightBarButtonItems = @[profileBarButtonItem];

score 0 · Answer 13 · answered Jul 23 '18 at 09:38

Tested in iOS 11

 public lazy var navigationBackBarButton : UIBarButtonItem = {

        let backBarButtonIcon = <Image Literal here>
        let backBarButton = UIBarButtonItem(image: backBarButtonIcon, style: .plain, target: self, action: #selector(self.backBarButtonTouched(_:)))
        backBarButton.imageInsets = UIEdgeInsets(top: 0.0, left: -9.0, bottom: 0.0, right: 0.0)
        return backBarButton

    }()

score 0 · Answer 14 · answered Sep 04 '18 at 08:17

2018, iOS 11+, Swift 4.x, this worked for me.

Combining the top answers:

Property

internal lazy var button_Favorite: UIButton = {
    let button = UIButton(type: .custom)
    button.setImage(.favNormal, for: .normal)
    button.contentHorizontalAlignment = .right
    button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -9.0)
    return button
}()

In viewDidLoad:

    let barButton = UIBarButtonItem(customView: self.button_Favorite)
    self.button_Favorite.frame = CGRect(x: 0, y: 0, width: 40.0, height: 44.0)
    let negativeSpacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.fixedSpace, target: nil, action: nil)
    negativeSpacer.width = -10.0
    self.navigationItem.rightBarButtonItems = [negativeSpacer, barButton]

score -1 · Answer 15 · edited Feb 07 '15 at 01:57

-1

Change the following for your UIButton

Control -> Alignment -> Horizontal to Align Right

edited Feb 07 '15 at 01:57

Ram

3,092
10
40
56

answered Feb 07 '15 at 00:45

XuanZ

1

UIBarButtonItem with custom view not properly aligned on iOS 7 when used as left or right navigation bar items

15 Answers15

Linked

Related