0

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:

enter image description here

It should look like this:

enter image description here

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

enter image description here

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

Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412

2 Answers2

3

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.

chrissukhram
  • 2,957
  • 1
  • 13
  • 13
  • Try putting space on the right side, the background image will be tileable and that may be why it looks strange. You need to put enough padding on the left side to prevent it from tiling. – chrissukhram Mar 13 '15 at 05:17
  • Don't do the left padding, do the right padding to push it over to the left side. I just did a quick test and doing this made my button look okay:UIEdgeInsetsMake(0,0,0,90). Some numbers give me strange results as well but play with the numbers to find a sweet spot. – chrissukhram Mar 13 '15 at 05:39
  • Actually can you post the UIEdgeInsets that you used? just putting the width should actually work. I just tested it again with an image of 64 x 64 pixels and UIEdgeInsetsMake(0,64,0,0) – chrissukhram Mar 13 '15 at 05:54
  • Still acting strange: http://cl.ly/image/2Q140V2G270J Using `UIEdgeInsetsMake(0,37,0,0)`. – Nic Hubbard Mar 13 '15 at 06:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72897/discussion-between-chrissukhram-and-nic-hubbard). – chrissukhram Mar 13 '15 at 06:20
  • Got it working! I realized my image had no extra pixels of transparency on the right side. Once I added two extra pixels, it worked! – Nic Hubbard Mar 13 '15 at 16:18
0

Using the background image property forces the stretching. Try using the image property and play around with the image inset/offset to position the image where you want it.

bsarrazin
  • 3,990
  • 2
  • 18
  • 31
  • Using `self.navigationItem.backBarButtonItem.image = [UIImage imageNamed:@"ZSSBackArrow"];` doesn't seem to work. – Nic Hubbard Mar 13 '15 at 05:21
  • Create a new `UIBarButtonItem` and assign it to `self.navigationItem.backBarButtonItem = newUIBarButtonItem` – bsarrazin Mar 13 '15 at 05:23
  • That doesn't seem to work either. Gives me the system default rather than my barButton I was trying to set. – Nic Hubbard Mar 13 '15 at 05:34