I have a UIToolbar in one of my VCs, it has 3 color buttons which changes the color of my drawing. Anyways I want to change the button's image when its selected. The images are shown below, the problem is apparently the button's "tintcolor" is messing with the original image.
If i set the "tintcolor" to red my active button looks like a bigger red circle, if its "clearcolor" it doesn't show. Any help would be much appreciated guys.
UIImage *image = [UIImage imageNamed:#"red-selected"];
[button setImage:image];
I even tried:
UIImage *image = [[UIImage imageNamed:#"red-selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[btn setImage:#"red-selected.png" forState:UIControlStateNormal];
you can also do it in the interface builder - indicates a photo for selected mode.
pay attention the type of the photo- is it png?
try #"red-selected.png"/ #"red-selected.jpg"
Related
I have to place 6 buttons in the bottom of particular screens like UITabBar. I have placed UIButton with Image and Text but, am not able to move the image on top of the button with centre alignment and place the button text in below of the image with center alignment. It should be look like UITabBarItem.
How can I achieve this in UIButton? Anyone can please help me on this? Thanks.
I tried this code but, text not visible and image not properly aligned. Can you please help me?
[self.languageButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self.languageButton setTitle:#"Language" forState:UIControlStateNormal];
[self.languageButton.titleLabel setFont:[UIFont boldSystemFontOfSize:10.0]];
UIImage *image = [UIImage imageNamed:#"lang_change_white"];
[self.languageButton setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -image.size.width, -25.0, 0.0)];
[self.languageButton setImage:image forState:UIControlStateNormal];
[self.languageButton setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, -self.languageButton.titleLabel.bounds.size.width)];
Thanks in advance.
your code work fine for me then what is problem ?
plz explein what you want with image and text of the button..?
you have to make 2 special image which contains symbol and text. one image is white image and second one is any color of image . and when user press button set background image as your color image and set initial image as white color image.
I can tint a UIImage in a UIImageView using :
imageView = [[UIImageView alloc]initWithImage:[myImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]];
imageView.tintColor = [UIColor redColor];
But when the image is initialized with AFNetworking's setImageWithUrl :
imageView = [imageView setImageWithUrl:url];
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
imageView.tintColor = [UIColor redColor];
This has no effect, the image is displayed with original colors.
Tested on iOS 7+.
Your code has no effect because you are assigning the image to be fetched from the remote URL, which takes time and thus happens later - after your code has finished. Thus, this line does nothing:
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
...because, at the time it runs, imageView.image is still nil.
Instead, use a networking command with a completion handler, and don't change the image rendering mode until the completion handler. In particular, what I would do is: First, download the image. Now (in the completion handler) derive the template image and assign it to the image view.
EDIT:
Another problem, based on your later comments, is that you seem not to understand what an image view is. It holds one image - the most recently assigned image. So your code is now behaving exactly as I would expect - the image view is displaying the template image, because that is the last image you assigned to it.
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate colors the non-transparent parts of the original image the tint color and that's all - and that is exactly what you are now seeing, so your code is working.
If someone still reaches this question, my suggestion would be to use UIButton instead of UIImageView. Import "UIButton+AFNetworking.h" and setUserInteractionEnabled as "FALSE" for UIButton to make it behave like a UIImageView.
The reason behind this is to use "setTintColor" of a system UIButton which functions likely in the same way as imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
Check below code:
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeSystem]; // to use tint color property
[myButton setFrame:CGRectMake(xPos, yPos, btnWidth, btnHeight)];
[myButton setTintColor:[UIColor lightGrayColor]];
[myButton setImageForState:UIControlStateNormal withURL:imageURL placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
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.
I want to build a UIButton out of 3 images (A,B,C). A and C are stretchable components (depending on the button text) the middle part is fixed.
What is the best way to attach these images to one another? How can I be flexible in the implementation without specifying all origins and widths and so on... Is it necessary to have a surrounding rectangle?
You need to stitch your images together in an image editor to create a single image. Then you'll load this image, and create a resizable version using the UIImage resizableImageWithCapInsets:resizingMode: method. You'll specify UIEdgeInsets that mirror the original widths of your two "end cap" images.
For the button itself you need to make this resizable image the background image of the button. It won't work as a foreground image.
UIImage* bgImage = [[UIImage imageNamed:#"my_bg_image"] resizableImageWithCapInsets: UIEdgeInsetsMake(0, 10, 0, 10)];
UIButton* b = [UIButton buttonWithType: UIButtonTypeCustom];
[b setBackgroundImage: bgImage forState: UIControlStateNormal];
I've had to implement something like this recently.
My strategy was to build what I wanted using UIView objects, and then write the created view to a UIImage.
I'd recommend:-create a container view-create UILabels for the button text, add to container view-for labels A and C, sizeToFit them after they have their text, and then use that information to place the stretchable buttons in the view-once the subviews are positioned, you'll probably want to reset the frame of your container view to make sure it is still correct.
once your view looks the way you want it, write it to an image using:
UIGraphicsBeginImageContextWithOptions(container.frame.size, NO, 0); //or YES if you have no opacity in your images
[container.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
-you can then set this as the image for your UIButton
The best way to do this is to put the 3 images into one file, and use resizableImageWithCapInsets:. See the doco here.
Here's a good tutorial on how to do this.
// Set the button background image
UIImage * buttonImage = [UIImage imageNamed:#"button_resizable.png"];
UIImage * resizableButtonImage = [buttonImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 12)];
[button setBackgroundImage:resizableButtonImage forState:UIControlStateNormal];
I have the following custom button:
_button = [UIButton buttonWithType:UIButtonTypeCustom];
_button.backgroundColor = [UIColor darkGrayColor];
UIImage *bg = [UIImage imageNamed:#"btn_bg_highlighted.png"];
[_button setBackgroundImage:bg forState:UIControlStateHighlighted];
As expected, the button has a dark gray background. When I press the button, the background image is shown (red square).
Later in the program I'm setting the buttons foreground image, which is transparent (red rectangle). After that the gray background changes to white. When I press the button, it becomes gray.
When I'm setting the image right after [UIButton buttonWithType:UIButtonTypeCustom] it works great.
Do you know what the problem is?
OK, I'm stupid. I'm getting the image from a NSData object. At the server the UIImage is converted to NSData with UIImageJPEGRepresentation(image, quality). But this should be UIImagePNGRepresentation(image), otherwise the transparency gets lost at the client. Now everything works great!