How do I show my own image on a UIToolbar's UIBarButtonItem

Question

I have seen variations of this question before in the forum, but I did not quite understand the solutions.

I have a regular ViewController that hosts a UIToolbar at the bottm. The toolbar has several UIBarbuttonItems for example one of them has: Style: Plain Identifier: Custom Title: Stop

Now I want it to display an image I heve provided So I add Image: MyImage.png

Now I get an opaque gray rectangle instead of my image.

Are there specific requirements from images that are to be show on a UIBarButtonItem? Size? Opcity? other?

Answer 1

1. Set the UIBarButtonItem Identifier to Custom.
2. Add a UIButton as a subview of the UIBarButtonItem.
3. Set the UIButton Type to Custom.
4. Set the UIButton Image to your image file.

The specific requirement for the image is that it be toolbar-compatible, in that the alpha channel holds the pertinent pixel data, and the RGB values are simply a grayscale for blending-- likely white or black.

More info: http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html