0

I am using the following code to customise the back button of our UINavigationBar. However, the image is stretched too far, resulting in an image like the following. Please can you tell me how to prevent this?

Thanks!

[[UIImage imageNamed:@"back_button"] stretchableImageWithLeftCapWidth:14 topCapHeight:0]

enter image description here

Original Back Button Image: enter image description here

max_
  • 24,076
  • 39
  • 122
  • 211

4 Answers4

2

The minimum width of the UIBarButtonItem is largely determined by the size of the image you provide. You should export your back arrow image from your editor so that there is only 1 pixel of tileable image content in the middle column of the image, such that the left and right portions can be used as the left and right caps:

Back bar button item arrow example

warrenm
  • 31,094
  • 6
  • 92
  • 116
1

As per the image, it seems image is stretched correctly. Just check the back button frame. Also please verify, if there is no whitespace in end of the string "Profile".

Ankit Thakur
  • 4,739
  • 1
  • 19
  • 35
  • Also you might be adding custom UIButton, so add image as background image of button, that will help in fixing within the frame content size. – Ankit Thakur Aug 19 '12 at 15:12
0

stretchableImageWithLeftCapWidth:topCapHeight is deprecated in iOS 5.

This doesn't answer your question. It's just a hint.

Deprecated UIImage Methods

Max B.
  • 881
  • 10
  • 21
0

I have an image with a noise texture on it and wanted to do the same thing. I finally arrived at this solution which I believe does exactly what you want (at least in iOS 6):

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] init];
UIImage *buttonBg = [[UIImage imageNamed:@"back-arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 6)];
[backButton setBackButtonBackgroundImage:buttonBg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
backButton.title = @"Back";

You can customize your edge insets to exclude portions that shouldn't stretch.

jakeonfire
  • 75
  • 4