On my nav bar, I have a couple of rightBarButtonItems that have custom icons (the icon images are white, which worked well with the basic color scheme of iOS 6).
Under iOS 7, loading the images using initWithTitle (see code snippet 1) replaces the "white" color in the icon with the proper global tint (a specific color of dark blue in this case)
Code Snippet 1:
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:(UIBarButtonItemStyle) UIBarButtonSystemItemCancel target:(self) action:#selector(refreshList)];
refreshButton.image = [UIImage imageNamed:#"RefreshIcon.png"];
However, I needed to use initWithCustomView to overcome a weird change in behavior that was causing the icons to move out of view. The basic idea was to specifically set the size of the icons. initWithCustomView solved the sizing problem, but does not display the button images with the global tint, they are displayed in the color of the image (white). Code Snippet 2 shows how I am creating the button with initWithCustomView.
Code Snippet 2:
CGRect frameCustomButton2 = CGRectMake(0.0, 0.0, 18.0, 18.0);
UIButton *customButton2 = [[UIButton alloc] initWithFrame:frameCustomButton2];
[customButton2 setBackgroundImage:iconRefreshButton forState:UIControlStateNormal];
UIBarButtonItem *barCustomButton2 =[[UIBarButtonItem alloc] initWithCustomView:customButton2 ];
barCustomButton2.image = iconRefreshButton;
[customButton2 addTarget:self action:#selector(refreshList) forControlEvents:UIControlEventTouchUpInside];
All of this code is of course in (void)viewDidLoad. I have tried things like:
barCustomButton2.tintColor = [UIColor blackColor]; //doesn't work
or
[barButtonAppearance setTintColor:[UIColor blackColor]]; // doesn't work
and they do not override the white color of the image. It is almost as if the creation of the custom view takes place after the view looks at the global tint color?
How can I ensure the button icon takes on the global tint?
Thanks!
Just wanted to get this into a root comment to give better context to the "answer" checkmark, and give better formatting.
I was able to figure this one out! You can tell the image to always render as template, which will force it to take on the global tint color.
UIImage *iconRefreshButton = [UIImage imageNamed:#"MyIconFilename.png"];
iconRefreshButton = [iconRefreshButton imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
The default, if you don't set it, is "UIImageRenderingModeAutomatic" which means it will render as a template or original image based on context.
You'll either have to work around the issue you were having with the first code snippet, or you'll have to create a UIButton subclass that uses its image as a mask to show the tint color in drawRect:.
I'd recommend the first approach.
Related
UIButton top border appears thicker than the following ,but sometimes correct ，why?
code:
UIImage * sanImage = [UIimage imageNamed:#"product_bt1_normal"];
[self.saveBtn setBackgroundImage:[sanImage
stretchableImageWithLeftCapWidth:sanImage.size.width/3
topCapHeight:sanImage.size.height/3] forState:UIControlStateNormal];
Are you trying to make a button? If so, perhaps use a UIButton instead? You can control the border with button.layer.borderWidth = 1.0f
If you're set on using an image, create a UIImageView, and modify the border thickness that way:
UIImageView *iv = [[UIImageView alloc] initWithImage:sanImage];
[iv.layer setBorderWidth:0.5f];
It could be because of off-pixel boundaries. Since you are using height/3.0f, your image is maybe not returning a well-behaved image.
Also, there is a new stretchable image method you should be using, resizableImageWithCapInsets:.
So try this code out:
[self.saveBtn setBackgroundImage:[sanImage resizableImageWithCapInsets:UIEdgeInsetsMake(3.0f, 3.0f, 3.0f, 3.0f)] forState:UIControlStateNormal];
You might need to mess with the values for the insets a bit, I don't know the dimensions of your button image.
i'm trying to add a back button using a custom png file for the background, but every time i add the background using the storyboard it just become blue like this:
How can i add a background image on a UIbarbutton?
the back button look like this:
This is the standard behavior in iOS 7 for an image in a button. The image is rendered as a template image, with opaque areas colored the current tint color, and transparent areas, transparent. If you want to see the image, you need to create the image with imageWithRenderingMode: and pass UIImageRenderingModeAlwaysOriginal as the argument.
You will need to do it grammatically.
I have tried doing it in storyboard, and it looks like there is a really strange bug, that causes the developer to decide - either use text or use an image, not both....
- (void)viewDidLoad
{
[super viewDidLoad];
[self addButtonsToNavigationBar];
}
- (void)addButtonsToNavigationBar
{
UIButton *regularButton = [[UIButton alloc] initWithFrame: CGRectMake(0, 0, 100.0f, 30.0f)];
UIImage *historyButtonImage = [UIImage imageNamed:#"image_name.png"];
// can set the background color instead of setting an image.
[regularButton setBackgroundImage:historyButtonImage forState:UIControlStateNormal];
[regularButton setTitle:#"Some button name" forState:UIControlStateNormal];
[regularButton addTarget:self action:#selector(historyButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *navigationBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:regularButton];
self.navigationItem.leftBarButtonItem = navigationBarButtonItem;
}
I have run into a strange issue. I have a UIButton with UIButtonTypeCustom.
For it's background image, I am using a transparent image. The issue is that the transparency on the actual image doesn't seem to be correct. The odd thing is that it is in fact transparent, because the background shows correctly behind the button.
Below is an example of what the button looks like (left) and what the button should look like (right). I took a screenshot and overlaid the image on the background in Photoshop, and the background shows correctly inside the image, while in the actual button on the left it does not. Noticeably, the glow is more intense on the left UIButton vs. the actual image when inserted onto the background.
Here's the image I am using to show that it does in fact have transparency:
Here's my code:
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.backgroundColor = [UIColor clearColor];
nextButton.frame = CGRectMake(0, 0, 30, 30);
[nextButton setBackgroundImage:[[UIImage imageNamed:#"ButtonBackground.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:5] forState:UIControlStateNormal];
forState:UIControlStateHighlighted];
[self addSubview:nextButton];
I have used the exact same image elsewhere to draw with and had no issue with transparency.
UPDATE: Adding other transparent images similarly increases the intensity of the alpha. While they're transparent, they seem darker and therefore less transparent. Again, works perfect elsewhere.
UPDATE 2: Even worse, I just created a new project with the exact same image dragged from the other project, created a button and had no issues with the button displaying correctly. How incredibly annoying!
You shouldn't have to set the background color for it to be transparent. Also, try removing the stretchable call on the image.
Also, you should be setting the image, not the background image.
If none of that helps, then Apple may just be improperly rendering your image. Try creating a CALayer and set its contents to your image and see if that works properly.
try this
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(0, 0, 30, 30);
nextButton.alpha=0.5f;
[nextButton setBackgroundColor:[UIColor clearColor]];
[nextButton setOpaque:NO];
[nextButton setBackgroundImage:[UIImage imageNamed:#"ButtonBackground.png"]
forState:UIControlStateNormal];
I have made a tab bar iOS project, when I received the request to change the tab bar's background image to a custom image. The project is developed for iOS 4.x, so the iOS5's
[tabBar setTabBarBackgroundImage:[UIImage imageNamed:#"custom.jpg"]] does not work. Can you suggest me some simple solutions (if there is any possibility, I would not like to change the entire project)?
Edit:
Only three lines of code can resolve all:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"customImage.png"]];
[self.tabBarController.tabBar insertSubview:imageView atIndex:0];
[imageView release];
A possible solution would be to put an UIView with your background image exactly behind the UITabBar. Then lower the opacity of your tabbar to 0.5 so you can see the background-image coming through.
UIView *bckgrndView = [[UIView alloc] initWithFrame:CGRectMake(tabbar.frame.coords.x, tabbar.frame.coords.y, tabbar.frame.size.width, tabbar.frame.size.height)];
[bckgrndView setBackgroundImage:[UIImage imageNamed:#"custom.jpg"]];
[tabbar.superView insertSubView:bckgrndView belowSubview:tabbar];
tabbar.alpha = 0.5;
[bckgrndView release];
Sorry if my code contains some errors. I tried doing this by heart... But you'll catch the drift.
I have answered similar kind of question here. Hope it will help.
Check out NGTabBarController, an open source tab bar replacement with customizable background image.
I have successfully added a background image to my UINavigationBar with the following code:
UIImageView *barView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"subHeader_lg.png"]];
[calculatorBar addSubview:barView];
[barView release];
However, with this method, the title of the view is covered by the image.
If I navigate further into the app, and then back, the title appears on top of the background image like so:
Any ideas how I can get the title to appear on top from the beginning?
I have tried pushing the barView to the back, but that makes it hidden behind everything else.
EDIT:
It seems that the custom draw function is the accepted answer, but I am unable to get the draw function to be called. I have this code at the bottom of my appdelegate.m file
#implementation UINavigationBar (UINavigationBarCustomDraw)
- (void)drawRect:(CGRect)rect
{
UIImage *image = [UIImage imageNamed: #"subHeader_lg.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end
When you call "addSubview" it adds it above any view that have already been added, thus covering the title.
What you want is
[calculatorBar insertSubview:barView atIndex:0];
However, this won't make it "stick" on subsequent pushes, so use the methods described at http://www.developers-life.com/custom-uinavigationbar-with-image-and-back-button.html for a better solution.
Also in iOS 5, Apple has added a built in way to customize the nav bar see http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html#//apple_ref/doc/uid/TP40010906
To set the background image on your navigation bar, use the following.
On iOS 5.x, use
[calculatorBar setBackgroundImage: barView.image forBarMetrics: 0];
On iOS 4.x use
calculatorBar.layer.contents = (id)barView.image.CGImage;