I added custom image to to assets.xcassets as 3x in xcode project. It shows fine.
Next, I added the iage to Tab Bar Item by selecting system item as custom and selected image as custom image. Also populated Bar Item image by selecting custom image.
In my storyboard, the image icon is completely grayed out in both the Tab Bar Item and Bar Item.
The image was created in Gimp as transparent image size scaled to 75x75
Can someone tell me how to fix this?
Like #luiyezheng said, this is caused by the image rendering mode.
A better way to apply the rendering mode to all items in your TabBar will be to put this code in your TabBarController viewDidLoad method:
for item in self.tabBar.items! {
item.image = item.image?.imageWithRenderingMode(.AlwaysOriginal)
item.selectedImage = item.selectedImage?.imageWithRenderingMode(.AlwaysOriginal)
}
After iOS7, you can set whether a UIImage render using tint color of current view with imageWithRenderingMode:
AlwaysOriginal
Always draw the original image, without treating it as a template.
AlwaysTemplate
Always draw the image as a template image, ignoring its color
information.
Automatic
Use the default rendering mode for the context where the image is
used.
So what you want is:
self.barItem.image = UIImage(named: "yourImage")?.imageWithRenderingMode(.AlwaysOriginal)
By set renderingMode to AlwaysOriginal, the UIImage will always draw the original image and won't apply the template. Then you can get what you want.
Good luck:-)
Related
To animate the image in a UIBarButton Item, I've created two regular UIButtons, button1 and button2 with different images, image1 and image2 and assign them to the UIBarButtonItem's customView property with:
self.myBarButton.customView = button1;
I am able to do the animation by assigning one or the other buttons to the UIBarButtonItem.
My problem is the first image is a line drawing that I want to tint. The second is a full color image that I don't want to tint. For some reason, if I set the rendering mode of the first image to UIImageRenderingModeTemplate which allows it to tint, then the second image does not display even if I set the rendering mode of the second to UIImageRenderingModeAlways.
Is there any way to tint the image that does not involve changing the rendering mode. I do have the line [button1 setTintColor:[UIColor blueColor]]; but it has no effect.
Also can anyone explain why setting the rendering mode would prevent the second image from appearing?
Thanks in advance for any suggestions.
I uploaded a picture in the project, have it in the inspector, but only bar button draws a gray square. In other examples, nothing further is required. What to do?
UITabBarItems' image property automatically sets the render mode of images to template. If you want to use a full color image as a tabbar item image you should explicitly set the render mode of the image to UIImageRenderingModeAlwaysOriginal. You can set this in a .xcassets folder by selecting the image, opening the right pane, and setting render as "Original Image". Right now the tabbar is only looking at the alpha value of the image and tinting it gray. For more information you should look at the UIKit User Interface Catalog
I'm trying to specify an image for the selectedImage of a UITabBar tab. This image is contained in the Asset Catalogs folder. The image is called secondActive.
The image that shows up in the Simulator, however, does not represent the image. It's just a blue square. When the tintColor changes, the color of the square changes too.
I'm specifying the selectedImage of the tab in the User Defined Runtime Attributes and in the Attributes Inspector.
Why does't the selectedImage of a tab bar show up properly?
This happens because your images do not contain alpha transparency. By default, bar and tab bar items use images in template rendering mode. You can tell the system to load it in original form, but then changing tint will not work (image will have the pixel color given in the image itself). Best to reauthor your images to include transparency where needed.
I have a image and want to create a black tinted image of same as shown below:
I have a view and a image view as it's subview. The alpha of Image view is 0.5 and its tint color to Black color. Also the background color of view was set to black color. Using this the second screenshot is generated and I want a similar output to a new UIImage.
PS: I need a new image which can stored or reused independent of background views etc.
Also I have tried following so check before reporting duplicate:
How would I tint an image programatically on the iPhone?
Overlaying a UIImage with a color?
Making a UIImageView grey
iPhone: How to Dynamically Color a UIImage
I've also tried getting image from a view but that does not help as I've more components in view not shows here.
iPhone - flattening a UIImageView and subviews to image = blank image might help you with your problem. The idea is to "render in context" a UIView object with 2 subviews (the image, and the black overlay view) to get an image. If you have more subviews which you do not want in the image, simple hide them when rendering.
i create a 4 button like tabbar , but image show as colored ,i need show images as like tabbar image color (gray) .
Thanks
Set the icon to the tabbar like this
self.tabBarItem.image = [UIImage imageNamed:#"myImage"];
Don't use
[self.tabBarItem setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
because then the image will not be automatically styled to the default tabbar style
You just need to set the image mask (gray, 1 color image with the transparency), not the complete image. According to the documentation
A custom icon that you provide for a toolbar, navigation bar, or tab
bar is also known as a template image, because iOS uses it as a mask
to create the icon you see in your app. It is not necessary to create
a full-color template image.
See for more info:
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html%23//apple_ref/doc/uid/TP40006556-CH14-SW1