How to horizontally position the backIndicatorImage in UINavigationBar

Question

I use this code to add the insets to the backIndicator image for the navigaiton bar. However this only works for vertical positioning of the image. I can only move the image towards top or bottom, but not towards left or right. Looks like left/right inset is not working. I am not sure what could be the issue.

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

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

I also tried this:

  UIImage * backArrowImage =[[UIImage imageNamed:@"Back"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 0) resizingMode:UIImageResizingModeStretch];

If this is not possible, do I need to go back to adding custom back button ?

Answer 1

I've tried so many ways and finally this works for me, you can redraw your pic, do as following:

UIImage *arrow = [UIImage imageNamed:@"Back_Normal"];
UIGraphicsBeginImageContextWithOptions(CGSizeMake(arrow.size.width+10, arrow.size.height), NO, 0); // move the pic by 10, change it to the num you want
[arrow drawAtPoint:CGPointMake(10, 0)];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

then use the finalImage as your backIndicatorImage.

Answer 2

Swift version. For Image only back btn. Maintains the swipe to go back built in gesture recognizers for iOS 7+.

func setBackBtnTarget(target: AnyObject?, action: Selector) {
    var backImg: UIImage = // Your img
    let leftPadding: CGFloat = 10
    let adjustSizeForBetterHorizontalAlignment: CGSize = CGSizeMake(backImg.size.width + leftPadding, backImg.size.height)

    UIGraphicsBeginImageContextWithOptions(adjustSizeForBetterHorizontalAlignment, false, 0)
    backImg.drawAtPoint(CGPointMake(leftPadding, 0))
    backImg = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    navigationController?.navigationBar.backIndicatorImage = backImg
    navigationController?.navigationBar.backIndicatorTransitionMaskImage = backImg

    let backBtn: UIBarButtonItem = UIBarButtonItem(title: "", style: .Plain, target: target, action: action)
    navigationItem.backBarButtonItem = backBtn
  }

Answer 3

zhoujialei in a form of extension

extension UIImage {
    func translatedHorizontally(by constant: CGFloat) -> UIImage? {
        let newSize = CGSize(width: size.width + constant, height: size.height)
        let newPoint = CGPoint(x: constant, y: 0.0)

        UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
        draw(at: newPoint)
        let translatedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return translatedImage
    }
}