Creating the perfect standard UIBarButtonItem pixel with a custom image inside

Question

I've been combing my head over this for the last couple of hours. Is it possible to create a standard UIBarButtonItem with a custom image inside? All I want is a standard blue button, but with an image that represents the settings (screwdriver or gear that I will create myself) inside it. I would prefer not to use Photoshop for this, as I would like every pixel to be an ideal and future proof if Apple releases higher-resolution iOS devices.

I found a great project on GitHub that includes every graphic element shipped with iOS, and I extracted what Apple apparently uses when creating the standard UIBarButtonItems . The problem is that it cannot be resized to the desired size in the way that I know of. In case it is impossible to do what I want with the code, then maybe someone can tell me how to use this image.

GitHub - UIKit-Artwork-Extractor

[e-mail]

Thanks!

Answer 1

Just create your image in one color (significant alpha channel only) and use initWithImage:style:target:action: using the UIBarButtonItemStyleBordered or UIBarButtonItemStyleDone style.

If you want a full color image, you will need to use a linked image. The secret is to resize it by duplicating the “middle” column and a series of pixels in the 9-patch image style, rather than scaling everything.

Answer 2

Images like these are used, making them stretchable. Basically, you want only the middle part of the image to be stretched when you resize the image, while the left and right cover should not be scaled to avoid distortion.

 UIImage *buttonImage = [UIImage imageNamed:@"UINavigationBarDefaultButton.png"]; UIImage *stretchableButtonImage = [buttonImage stretchableImageWithLeftCapWidth:5 topCapHeight:0]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setBackgroundImage:stretchableButtonImage forState:UIControlStateNormal]; 

In your case, why don't you just use UIBarButtonItem with UIBarButtonItemStyleDone or UIBarButtonItemStyleBordered as your style?