i want to change the button color when it is clicked. I used :
[button setBackgroundColor:[UIColor redColor]];
but this shows red color only on the four corners of button not on the whole button and also when i use forState:UIControlStateNormal then the application hangs.
Is their any way to show some color on button when clicked?
[click1 setBackgroundColor:[UIColor redColor] forState:UIControlStateHighlighted];
Any help will be appreciated.
You could create an image programmatically and so have the ability to use your colors in a dynamic way:
Create a category for UIButton with this method and be sure to have QuartzCore lib imported via @import QuartzCore:
- (void)setColor:(UIColor *)color forState:(UIControlState)state
{
UIView *colorView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1, 1)];
colorView.backgroundColor = color;
UIGraphicsBeginImageContext(colorView.bounds.size);
[colorView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *colorImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self setBackgroundImage:colorImage forState:state];
}
This is gonna create an image with the size of your button for your specified color and then assigning it for the wished state. Because of the usage of the backgroundImage you can still set a title for the button via the setTitle:forState: method.
This is what I do ... it's a custom subclass of a UIButton, just set the normal and highlighted colors and everything shpould work fine ;)
Header file:
//
// FTCustomButton.h
// FTLibrary
//
// Created by Ondrej Rafaj on 14/01/2013.
// Copyright (c) 2013 Fuerte International. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface FTCustomButton : UIButton
@property (nonatomic, strong, readonly) UIColor *normalColor;
@property (nonatomic, strong, readonly) UIColor *highlightedColor;
- (void)setNormalColor:(UIColor *)normalColor;
- (void)setHighlightedColor:(UIColor *)highlightedColor;
@end
This is the implementation file:
//
// FTCustomButton.m
// FTLibrary
//
// Created by Ondrej Rafaj on 14/01/2013.
// Copyright (c) 2013 Fuerte International. All rights reserved.
//
#import "FTCustomButton.h"
//*****************************************************************************
// private interface declaration
//*****************************************************************************
@interface MCSelectionButton ()
@property(nonatomic, strong, readwrite) UIColor *normalColor;
@property(nonatomic, strong, readwrite) UIColor *highlightedColor;
@end
//*****************************************************************************
// public interface implementation
//*****************************************************************************
@implementation FTCustomButton
#pragma mark Settings
- (void)setNormalColor:(UIColor *)normalColor {
[self setBackgroundColor:normalColor];
_normalColor = normalColor;
}
- (void)setHighlightedColor:(UIColor *)highlightedColor {
_highlightedColor = highlightedColor;
}
#pragma mark Actions
- (void)didTapButtonForHighlight:(UIButton *)sender {
[self setBackgroundColor:_highlightedColor];
}
- (void)didUnTapButtonForHighlight:(UIButton *)sender {
[self setBackgroundColor:_normalColor];
}
#pragma mark Initialization
- (void)setupButton {
[self addTarget:self action:@selector(didTapButtonForHighlight:) forControlEvents:UIControlEventTouchDown];
[self addTarget:self action:@selector(didUnTapButtonForHighlight:) forControlEvents:UIControlEventTouchUpInside];
[self addTarget:self action:@selector(didUnTapButtonForHighlight:) forControlEvents:UIControlEventTouchUpOutside];
}
- (id)init {
self = [super init];
if (self) {
[self setupButton];
}
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
[self setupButton];
}
return self;
}
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupButton];
}
return self;
}
@end
Make sure the button type is custom as someone else already stated. Then doing the following will bring back those rounded corners:
[self.myButton.layer setCornerRadius:8.0f];
[self.myButton.layer setMasksToBounds:YES];
[self.myButton.layer setBorderWidth:1.0f];
[self.myButton.layer setBorderColor:[[UIColor whiteColor] CGColor]];
self.myButton.backgroundColor = [UIColor redColor];
Though, personally, I'm a big fan of gradient buttons over solid colors... also, background color doesn't have different states, whereas background images do:
[self.myButton setBackgroundImage:[UIImage imageNamed:@"gradient.png"] forState:UIControlStateNormal];
Using an image, your button will darken with selection (or you could provide a different background image per state to do something different). This won't happen with background color, the background will always stay the same, only your button label changing per state.
Completing Dima answer, I've implemented an extension in Swift:
extension UIButton {
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor)
CGContextFillRect(context, rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
func setBackgroundColor(color: UIColor, forUIControlState state: UIControlState) {
self.setBackgroundImage(imageWithColor(color), forState: state)
}
}
I believe a more efficient solution than any of the ones listed is to just draw the image in Core Graphics directly. You avoid having to make a UIView and calling renderInContext:, which can be pretty slow.
+ (UIImage *) imageWithColor:(UIColor *)color
{
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
You can use this in a UIImage category to create an image to use in a UIButton.
To get a button with a single color you can set the button to custom button. Here is my known list of available button api (you can set them in viewDidLoad after setting them as outlets). Just import quartz and change the border radius to make it look like a button.
//highlightcolor - this changes the status for UIControlStateHighlighted
OUTLETNAME.tintColor = [UIColor orangeColor];
//borderradius *quartz
[[OUTLETNAME layer] setCornerRadius:20.0f];
//border *quartz
[[OUTLETNAME layer] setBorderWidth:5.0f];
//bordercolor
[OUTLETNAME.layer setBorderColor:[[UIColor greenColor] CGColor]];
//backgroundcolor
OUTLETNAME.backgroundColor = [UIColor blackColor];
//image
[OUTLETNAME setImage:[UIImage imageNamed:PICNAME] forState:UIControlStateNormal];
//text
[OUTLETNAME setTitle:@"TEXT" forState:UIControlStateNormal];
//fontsize
OUTLETNAME.titleLabel.font = [UIFont systemFontOfSize:36.0];
//fontcolor
OUTLETNAME.titleLabel.textColor = [UIColor blackColor];
//fontcolor
[OUTLETNAME setTitleColor:[UIColor orangeColor] forState: UIControlStateNormal];
If you want custom buttons with a gradient color you have to make a custom button class.
This blog has a glossy button class project for download. http://didikot.com/?p=217
You have to refractor and convert to ARC to use it, I think.
This blog does the same thing but without the gloss. http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/
@pankaj Gyani says correct
UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom] initWithFrame:CGRectMake(0, 0, 24, 24)];
[button addTarget:self action:@selector(prevButtonClick:) forControlEvents:UIControlEventTouchUpInside];
[button setBackgroundImage:[UIImage imageNamed:@"IntroArrowLeft.png"] forState:UIControlStateNormal];
[self addSubview:button];
You should set UIButton's type to custom and set its image or background image properties for normal and highlighted states.
For professional and nice looking buttons that you can easily use in your apps this custom button component may also help.
You have everything correct. Just set your button type to UIButtonTypeCustom..
button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(200, 8, 100, 30);
[button setTitle:@"Set up" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor greenColor]];
button.clipsToBounds = YES;
button.layer.cornerRadius = 10;
button.alpha = 0.5;
Just an update to Hendrik answer.
To work well with Auto Layout you need to set UIView frame size to button intrinsicContentSize, otherwise it will screw up layout.
- (void)setColor:(UIColor *)color forState:(UIControlState)state
{
UIView *colorView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.intrinsicContentSize.width, self.intrinsicContentSize.height)];
colorView.backgroundColor = color;
UIGraphicsBeginImageContext(colorView.bounds.size);
[colorView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *colorImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self setBackgroundImage:colorImage forState:state];
}
Thanks to @Dima
Here is an updated code for swift 3.0 as UIButton extension
extension UIButton {
// thanks to @Dima http://stackoverflow.com/a/24665476/2581637 update code for swift 3
func setBackgroundColor(color: UIColor, forUIControlState state: UIControlState) {
func imageWithColor(color: UIColor) -> UIImage? {
let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
UIGraphicsBeginImageContext(rect.size)
if let context = UIGraphicsGetCurrentContext() {
context.setFillColor(color.cgColor)
context.fill(rect)
}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
self.setBackgroundImage(imageWithColor(color: color), for: state)
}
}
