I have an image that I want to display on a UIBarButtonItem, but for some reason it only shows the outline of it and the rest is all white. How can I have it actually display the image?
Thanks!
Add a comment |
5 Answers
There's other iOS7+ solution:
NSString *iconFilename = // ... UIImage *image = [[UIImage imageNamed:iconFilename] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(onBarButtonItemTapped:)]; Swift 5:
let iconFilename: String = // ... let image = UIImage(named: iconFilename)?.withRenderingMode(.alwaysOriginal) let barButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(onBarButtonItemTapped(_:))) Extract from UIImage.h:
... navigation bars, tab bars, toolbars, and segmented controls automatically treat their foreground images as templates ... You can use UIImageRenderingModeAlwaysTemplate to force your image to always be rendered as a template or UIImageRenderingModeAlwaysOriginal to force your image to always be rendered as an original.
1 Comment
ToolmakerSteve
@Apfelsaft - it probably would be, if iOS 7 existed in 2009, when the question was asked :) I've edited the accepted answer to link to this one.
UPDATE: See MANIAK_dobrii's answer for an easier solution, available in iOS 7+.
Here is how I use an image for a UIBarButtonItem:
UIImage *image = [UIImage imageNamed:@"buttonImage.png"]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height ); [button setImage:image forState:UIControlStateNormal]; [button addTarget:myTarget action:@selector(myAction) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button]; … 
7 Comments
rein
If you want a title on your button you might want to change the setImage line to setBackgroundImage. If not, then the above code works just fine.
dvs
Don't forget
button.showsTouchWhenHighlighted = YES so the button glows when tapped like a standard UIBarButtonItem.
Rafael Sanches
any idea how to make the image white, just like the toolbar?
horsejockey
Use the answer by @MANIAK_dobrii. No need for custom view, by far the better answer.
jk7
@StaRbUck42 Try increasing the UIButton's height to match height of toolbar instead of height of image. That worked for me.
|
There is another way that does not involve coding at all.
First, place the images you want to put on the bar on the Assets.xcassets document.
Select the image on the assets browser.
Open the Attributes inspector for that image on the right vertical toolbar.
On "Render As" select "Original Image".
Even though on the storyboard the buttons will continue to be painted with the tint color, when running on the simulator the original image will be shown.
The default rendering mode for an image varies from one UI control to the other. If you set this parameter on the attributes inspector, though, you can force that an image will be always represented with a specific rendering mode.
If you need the same image to be represented with different rendering modes on different controllers, then the response from MANIAK_dobrii is more appropriate.
1 Comment
Alex Nguyen
Phenomenal. This is great!
In Swift 3:
let iconname = // ... let image = UIImage(named: iconname)?.withRenderingMode(.alwaysOriginal) let barButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(self. onBarButtonItemTapped)) self.navigationItem.leftBarButtonItem = barButtonItem 
1 Comment
pw2
Also works with UIButton and multi color image ! Thank you !
Nope. As you can read in the Human Interface Guidelines
After you’ve decided on the appearance of your icon, follow these guidelines as you create it:
Use the PNG format. Use pure white with appropriate alpha. Do not include a drop shadow. Use anti-aliasing. If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon). For toolbar and navigation bar icons, create an icon that measures about 20 x 20 pixels. For tab bar icons, create an icon that measures about 30 x 30 pixels.
Note: The icon you provide for toolbars, navigation bars, and tab bars is used as a mask to create the icon you see in your application. It is not necessary to create a full-color icon.
