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.
Related
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:-)
I created a button on interface builder and set set its "image" to a png file and did not set any background image to it.
I want the button background to be transparent so I set its alpha to 0.6 in IB. The problem is I DO NOT WANT the image to be transparent too ( only the surrounding background ) but the image apparently inherits the button alpha and I can see throughout it.
Is there a way to completely avoid the button image to be transparent ?
Thanks
Update 1:
Using Xcode 5.02
I'm testing it on an iOS6 device, but can also test with iOS7 in the simulator.
Update 2:
Apparently the solution is to rescale the images to match the button rectangle.
The problem is that the button has a title that is positioned below the image to describe the functionality. In this case how could I put the text "floating" above the image ?
I'm assuming you're not programming in iOS 7?
Set the backgroundColor property of your UIButton to [UIColor clearColor]`;
If you've connected an IBOutlet to your UIButton then you can do something like this
[myButton setBackgroundColor:[UIColor clearColor]];
This will only work if you have a well defined transparent image. If you have some areas in your image that is not transparent then the above method will not work and you will simply need to edit your image again to make sure all the areas are actually transparent.
If you're in iOS 7, I believe the UIButton is already transparent and its up to your image to do the rest.
UPDATE 1
OP has requested for the title to remain above the image of the UIButton. Here is the solution for that,
What you need to do is set the backgroundImage property of the UIButton instead of simply setting the image of the button which will push the title down as you have found out.
Again I'm assuming you have an IBOutlet connected to your button; simply do the following:
Make sure you delete any image setting code in interface builder so that the properties are blank.
Then implement the code below
//This is the bit that does the magic - setting the background property
[myButton setBackgroundImage:[UIImage imageNamed:#"button.png"] forState:UIControlStateNormal];
//Then you can set the title as you require, the title will be centered floating above your background image.
[myButton setTitle:#"Localised String" forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
And you will get something like this:
If you are using a proper PNG file with transparency in the file, this works automatically without changing the alpha value. If the PNG does not have the transparent area defined properly you will not be able to achieve this by a property (only by complicated drawing methods, which is probably not want you want).
You have to use a PNG image with transparent background. To remove background colour of a image, Let me suggest you a free tool "GIMP" I've been using it for a while.
As already been said - you can use semi-transparent PNG for image.
As for putting up title over the image - you would need to write some code.
You won't be able to do this in Interface Builder.
So you can easy create button
#interface MyButton : UIButton
#end
#implementation MyButton
- (void)layoutSubviews {
[super layoutSubviews];
[self bringSubviewToFront:self.titleLabel];
}
#end
As for image, covering the whole area - it's better, when possible, to use background image rather image.
For partial background color transparency - you always can set semi-transparent background color for it in IB or in code:
[button setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.5]];
I have an ImageView with a picture and a button centered within it. On the button I have a different UIImage and the background on the button is white. In Attributes Inspector I have selected the UIImage for the button and made the button custom but still I have white background on the button.
I want the background on the button to be the same as the picture on the ImageView. I thought it was enough to change the button to custom. I am using Xcode 5.0.2, is there anyone that could help me with this. This is what my ImageView + button looks like now:
And these are the settings for the button:
If you're asking how to make background for the button clear, from within the Attributes Inspector scroll down to the View section and change the background to Clear Color from the dropdown menu.
Also make sure your .png has a transparent background. If you've already set the background to Clear Color the issue could simply be that your .png has a white background rather than a clear one.
try
[button setBackgroundImage:[UIImage imageNamed:#"name" forState:UIControlStateNormal]
Add image that you use for ImageView to Background properties of your button.
The following should do:
yourButton.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:#"yourImage"]]
I am trying to achieve this look for my back button:
But no matter where I sample the shade of green in photoshop, it never comes out correct. For example:
Any suggestions on how I can achieve the exact same look?
The tint color is exactly that—a tint. iOS uses that color as a base to create a nice-looking button in the style of normal navigation bars.
If you want to control your button's appearance more precisely than tinting allows, your best bet is to create a set of images and use -setBackButtonBackgroundImage:forState:barMetrics: to use them. If you want this look for all bar button items in your app, use that method on +[UIBarButtonItem appearance], rather than a specific bar button item.
In order to produce the BackBarButtonItem's gradient, iOS does the following:
Applies the tint color that you specify
Applies a transparent overlay on top of the back button
Here are the retina-display overlays it uses for iPhone (these were obtained using UIKit-Artwork-Extractor):
Default Back Button Overlay
Pressed Back Button Overalay
Unfortunately, there is no way to tell iOS / UIBarButtonItem NOT to render these overlays on the back button (thereby, this gives the default navigation bar and buttons a pretty consistent look across all apps).
If you don't want to have this overlay applied (it will darken the button in both states), you have to create your own back button images - for the default and pressed states, portrait and landscape orientations, and retina and non-retina displays (8 total images).
As Brent Royal-Gordon mentions in his answer, you can apply these images using the appearance proxy for UIBarButtonItem to have them used throughout the app. In example, you'd set the default background image state like this for portrait orientation:
UIImage *defaultBackImage = [UIImage imageNamed:#"My-Default-Back-Button"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:defaultBackImage forState: UIControlStateNormal barMetrics:UIBarMetricsDefault];
It looks like the button is adding another semi-transparent gray layer over the button. I can't check right now but I would look for settings to disable the semi-transparent layer effect or try different button style/states.
I have a UITableViewController. I want a "toolbar-ish" component at the bottom.
I started by using a background image and a button. In interface builder, I added them to the bottom of the iPhone screen. The problem I ran into was that the background image and button scrolled with the table. I obviously need this fixed at the bottom.
Not finding too much direction online, I decided to customize a UIToolbar to look how I want since the position is fixed by default. In my initWithNibName for my UITableViewController, I have:
UIImage *shuffleButtonImage = [UIImage imageNamed:#"shuffle_button.png"];
NSArray* toolbarItems = [NSArray arrayWithObjects:
[[UIBarButtonItem alloc] initWithImage:shuffleButtonImage
style:UIBarButtonItemStylePlain
target:self
action:#selector(push:)],
nil];
[toolbarItems makeObjectsPerformSelector:#selector(release)];
self.toolbarItems = toolbarItems;
The problem I am running into now is that the "shuffleButtonImage" is not showing up properly. The shape of the button shows up fine but it is colored white and therefore does not look like the image.
Does anyone know why a "white image" would be showing instead of the actual image?
Also does it sound like a good idea to customize a UIToolbar or is there a simple way to ensure a fixed position "toolbar-ish" component.
To reiterate - my "toolbar-ish" component only needs to be one button at the button of my UITableView. The single button has a gradient color background that I create with an image.
From the description of the "image" parameter in the documentation for the initWithImage:style:target:action: method of the UIBarButtonItem class:
The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.
Basically, the image you provide is used as a mask to create an outline/shadow for the actual button image. I do not believe you can change this behavior for a UIBarButtonItem.
As an alternative, you can create a UIButton (with your color image) and then set it as the custom view for your UIBarButtonItem, as suggested here. If you go that route, setting the bounds of the UIButton to match the bounds of the UIBarButtonItem might also be necessary (see this discussion).
Your image may be showing up blank because it's not being found in your resources. Put a breakpoint after your definition of shuffleButtonImage and check it's not nil.