CODEWITHSUNDEEP
iphonegraphicsios4
Wayne Hartman
Wayne Hartman

Reputation: 18477

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 does not seem very scalable (pun intended) to have to include multiple images for different resolution devices.

alt text

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.

Upvotes: 3

Views: 5361

Answers (6)

Mohammed
Mohammed

Reputation: 334

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

Upvotes: 0

pterandon
pterandon

Reputation: 1816

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

Upvotes: 0

Wayne Hartman
Wayne Hartman

Reputation: 18477

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

Upvotes: 0

Greg Combs
Greg Combs

Reputation: 4262

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.

Upvotes: 1

Jesse Tayler
Jesse Tayler

Reputation: 126

You can list any image as [email protected] along with Image.png and the system will select the appropriate image at runtime.

Upvotes: 8

Jasarien
Jasarien

Reputation: 58448

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.

Upvotes: 1

Related Questions