UIBarButtonItem backButtonBackgroundImage: gets stretched

Question

I am using UIAppearance to set a custom backButtonBackgroundImage as well as hide the back button title:

// Back Button Image
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:[UIImage imageNamed:@"ZSSBackArrow"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -100) forBarMetrics:UIBarMetricsDefault];

This works really well, but the problem is that my arrow image get really stretched horizontally:

It should look like this:

Update: Using cap inset makes the image look like this:

Is there a way to prevent the image from being stretched?

Answer 1

Change the image's cap insets to make the image fit the way you want:

UIImage *barButtonImage = [[UIImage imageNamed:@"ZSSBackArrow"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,width,0,0)];

This will keep the width of the image as your specified width.

You may need to play with the numbers a bit to get it just right.