iPhone : How to set BackgroundColor of UIButton with buttonType UIButtonTypeCustom

Question

i want to change the button color when it is clicked. I used :

[button setBackgroundColor:[UIColor redColor]];

but this shows red color onl

Answer 1

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.

Answer 2

you have take a red color image for your button and then you can set it when user clicks

[yourButtonName setBackgroundImage:[UIImage imageNamed:@"yourRedButton.png"] forState:UIControlStateHighlighted];

Answer 3

@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];

Answer 4

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)
    }
}

Answer 5

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

Answer 6

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.