How to create iOS image buttons that scale well across multiple resolutions?

I've run into the issue of using a UIBarButtonItem with a custom color. Everything out on the 'net seems to indicate that the only way around this lack of official API support revolves around the use of images. This is all fine and dandy when developing for pre-iOS 4 devices, except when using the new iPhone 4. Creating an image for iPad and pre-iOS 4 devices is straightforward enough, but the images developed for those devices look absolutely horrid on iPhone 4. I suspect that this problem will be exacerbated further with the introduction of next generation devices.

Consider the example below. Notice how the default colored button is nice and smooth, but the iPhone 3GS image looks terrible. It 开发者_Python百科does not seem very scalable (pun intended) to have to include multiple images for different resolution devices.

In the absence of an official API for changing the color of a UIBarButtonItem, what strategies are out there for creating images that scale well against differing resolution devices? This problem is hardly unique to UIBarButtonItems, how is the community adapting to other UI elements that are bitmapped? Is there a better solution for this particular case than using an image (such as using Quartz to draw it)?

If at all possible, please offer concrete code examples.

You can list any image as Image@2x.png along with Image.png and the system will select the appropriate image at runtime.

If you look at the source for Three20 you can see how they draw custom buttons and shapes that will scale well, regardless of resolution.

Give Opacity (for Mac) a try. Draw your button in it with vector elements and effects, and it'll spit out the necessary Quartz code to reproduce it, drawing natively in your iOS application. You get Retina (@2x) support automatically.

Been over a year since I posted this question, but ran into a use case where I wanted to be able to do this, so instead of having to draw or otherwise create the buttons, I decided to write an open source application to create them. This application uses private APIs to change the colors of the UIBarButtonItem objects and then uses a graphics context to save them to a determined location on your computer's file system. This way you can have pixel perfect UIBarButtonItem images to use in your UIToolbars.

The app creates both the standard and @2x resolution images.

UIBarButtonItem-Generator @ GitHub

Any vector drawing app may work, but I would also consider povray, which allows you to create in a C-like scripting 3D language, then export any pixel size you choose.

http://povray.org

I have the same problem with navigation bar so solve as the following: first i subclass my navigation bar inside this class - (void)drawRect:(CGRect)rect { UIImage *image=[UIImage imageNamed:@"MyImage.png"];

self.frame=CGRectMake(0, 0, image.size.width, image.size.height);

self.backgroundImage  =image;

}

finally save the same image with different resolution With @2x at the end