When I add an icon to a UIBarButtonItem via the Interface Builder, the icon is displayed white. When I add the same icon file programmatically to another UIToolbar, the icon is displayed black. Why?
UIImage *image = [UIImage imageNamed:#"icon.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
rootViewController.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:reloadButton] autorelease];
Everything Jongsma said is right, you should use the initWithImage:style: message.
The next problem is not the way you create the UIBarButtonItem, but the place you assign it. You create it with UIBarButtonItemStylePlain, which should normally render the icon's outline in white, but the rightBarButtonItem of a UINavigationItem (just like the left) is not allowed the UIBarButtonItemStylePlain. It's implicitly converted to UIBarButtonItemStyleBordered. In the bordered style the icon is rendered 'as is', which is black with a slight gradient.
I think if you want the item in white on a bordered barButton, you'll have to touch the image itself.
Answer: If you want it white, color your image white.
Details:
UIBarButtonItems behave a little differently depending on how you use them.
When adding to a UIToolbar:
initWithImage:style:target:action: creates "white icons" (image color is ignored, opaque pixels are used as a mask to create a white image).
This is true for bordered and plain styles (but on UIToolbar only).
initWithCustomView: displays normal colored image.
When adding to a UINavigationItem:
initWithImage:style:target:action: creates colored images and converts plain to bordered.
In your code, you are setting an UIButton as the subview of an UIBarButtonItem.
UIBarButtonItem is already a button, so you shouldn't add another button as the subview.
Try this:
UIImage *image = [UIImage imageNamed:#"icon.png"];
rootViewController.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithImage:image] autorelease];
Had the same problem. I Noted that the #2X images were used instead...
Related
I'm trying to add an image to a UINavigationBar that has a custom color. I was hoping to avoid having to use a .png for the entire thing, and to programmatically set the color, and drop the icon on top of the colored navigation bar.
self.navigationController.navigationBar.tintColor = [UIColor redColor];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"icon.png"] forBarMetrics:UIBarMetricsDefault];
The UIBarMetricsDefault causes a repeat for the image icon, and I just want one in the center. The UIBarMetricsDefault and UIBarMetricsLandscapePhone settings are not working for me, and I was hoping someone would know a better suggestion.
I am trying to avoid using a .png for the entire navigation bar, and would like to add the image to a color that is set programmatically. Thank you!
The way you set color is correct.
To set image in center use titleView property of navigationItem as shown below :
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"icon.png"]];
How is it possible to have something like http://www.nutsaboutmac.com/wp-content/uploads/2012/11/ShareLinktoFacebook.png
Until now, I've put the same background image for my NavigationBar and my BarButtonItem. The problem is that the button is no longer bordered, you can't do the difference between the NavigationBar and the Button anymore...
UIImage *image = [UIImage imageNamed:#"facebook_texture.png"];
[cancelButton setBackgroundImage:image forState:UIControlStateNormal style:UIBarButtonItemStyleBordered barMetrics:UIBarMetricsDefault];
[topBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
How can I change the background but keep the bordered style ?
you can't set a custom bg image. the border is the bg image and it is either your own or the system.
=> no way but making your own image
Edit:
I THOUGHT for what you describe use tinting: barButton.tintColor=color and supply a color either with an alpha or a pattern image made with colorwithPatternImage
but... the tinting with a clear color or a pattern doesn't work. this is a bug in the sdk IMO
=> no way but making your own image
I am making a custom UI for Navigation bar and I have a question exactly as asked in this post
Custom background/transparent background on UIBarButtonItem?
In StoryBoard I tried every sort of combination to make my UIbarbuttonitem tint transparent or clear color but I still see this ugly black button (see then + sign). How can I achieve the effect of transparency so that it looks like my button is blended in with the background?
My screenshot
Some other app screenshot. Look how nice this looks?!
Note here the + image is my own custom png img of 20 x 20 pixels with transparent/blank background.
You can achieve that and more using the new appearance API introduced in iOS 5.
Basically you set the appearance for your UI once and it gets reflected in the whole program.
Here is an example for the UIBarButtonItem:
// You can also use stretchable images
UIImage *image = [[UIImage imageNamed:#"myCoolBarButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:image forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
If you cannot use iOS 5, then you have to build those programmatically like this:
// Create a custom button with an image
UIImage *image = [UIImage imageNamed:#"myCoolBarButton.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
button.frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
// Create a custom UIBarButtonItem with the button
UIBarButtonItem aBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:aButton];
Anyway, here are a few links with good tutorials on the appearance subject
User Interface Customization in iOS 5
How To Make Your App Stand Out With The New iOS 5 Appearance API
EDIT:
Just for clarification, it is much easier to do with custom images than playing around with colors, gradients and transparency.
You can't do it with tint. You will have to set both the backgroundImage of the navigation bar and the backgroundImage of the bar button item, so that they harmonize as desired.
When drawing the background image of the bar button item you may have to draw the entire button including the rounded rect outine and the shadowing of the rounded rect outine, but this is not difficult, and when you've done it once you've reusable code forever.
I think your png image with + sign does not contain alpha channel. I have transparent image and it's working perfectly fine for me.
I'm trying to add a custom image on a standard UIButton. I know of the setBackgroundImage and setImage methods to do that. However, this will remove the 'standard' borders! Using UIButtonTypeCustom or UIButtonTypeRoundRect gives the same results...
Can this be so hard?
A normal button like those in the navigationbar - just a custom image instead of the titleLabel. Do I really have to draw the button itself in an image editor?
Yes you do have to draw a custom image.
Well you can add a subview of image to the UIButtonRoundRect. So just create a RoundRect button the usual way:
UIButton *button = [UIButton buttonWithType:UIButtonRoundRect];
then create an image view with your image and add it as subview to the button:
UIImageView *iv = [[UIImageView alloc] initWithImage:(UIImage *)image];
[button addSubivew:iv];
That should do the trick. Plus you can also set the position of that imageview by [iv setCenter:CGPointMake(x,y)];
Hope that helps.
I have UISegmented control with image -to be able to set background tint. This is added to navigation bar through code in viewDidLoad:
UISegmentedControl *myCustomButton = [[UISegmentedControl alloc] initWithItems:
[NSArray arrayWithObjects:[UIImage imageNamed:#"spiral"],nil]];
[myCustomButton setSegmentedControlStyle:UISegmentedControlStyleBar];
[myCustomButton setTintColor:[UIColor blackColor]];
UIBarButtonItem *segmentBarItem = [[UIBarButtonItem alloc]
initWithCustomView:myCustomButton];
self.navigationItem.rightBarButtonItem = segmentBarItem;
problem is that the image within the button gets stretched all the way it can, so I would like to use image insets, but how do I call them for that code?
I've tried this:
[self.navigationItem.rightBarButtonItem setImageInsets:UIEdgeInsetsMake(5, 5, 5, 5)];
but it does not do anything visible.
I'm not sure there's an easy programmatic way to do this. What I've done is just make png images with transparent backgrounds in photoshop (or whatever image editor) and make them fit so that your image fits vertically in the button and has a size that will fit just about right in your button. It's a bit of work to make the images, but usually you're not going to be changing your button size once you have the screen layout set up.