iOS 7: Custom Back Indicator Image Position

Question

I'm having trouble setting properly a custom back indicator image. The indicator is not centered!

Here is a pic:

I'm setting the indicator image in didFinishLaunchingWithOptions: method...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

   UIImage *image = [UIImage imageNamed:@"Back"];
   [UINavigationBar appearance].backIndicatorImage = image;
   [UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

   return YES;
}

How can I center it?

p.s I've already read this Custom back indicator image in iOS 7 not vertically centered, but actually it didn't work for me.

Answer 1

 UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 2, 0);
 UIImage *backArrowImage = [[UIImage imageNamed:@"Back"] imageWithAlignmentRectInsets:insets];

 [[UINavigationBar appearance] setBackIndicatorImage:backArrowImage];
 [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backArrowImage];

Answer 2

That happens because you are just changing the image source of the Back Indicator in your UINavigationView, and not the frame as well. See, when the UINavigationView is created, the Back Indicator's frame is set to hold the size of the default iOS 7 back button image. The default back button image is bigger than yours, and that's why it looks not aligned.

To fix that you have to reset the Back Indicator's Frame to hold the size of your image. Another option is to create a UIButton with the right frame size and image and assign to a UIBarButtonItem. Then you can replace the backBarButtonItem from your UINavigationItem with the new UIBarButtonItem you created.