How to set UIButton background color by state

Question

As we know, UIButton provide the image setters based on UIControlState. But seems it doesn't provide to set background color based on UIControlState.
How to do it?

Answer 1

Get an UIImage from UIColor, use that image as background image for the button.

- (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;
}

[button setBackgroundImage:[self imageWithColor:[UIColor lightGrayColor]] forState:UIControlStateNormal];
[button setBackgroundImage:[self imageWithColor:[UIColor redColor]] forState:UIControlStateHighlighted];

Answer 2

Yes that's correct... you need to handle this in a UIButton subclass.

This is a StyleKitButton, UIButton subclass I use. It stores the background colours for each mode in a dictionary, then some fancy handling for touches to transition correctly.

Usage

StyleKitButton *button = [[StyleKitButton alloc] init];
button.layer.borderColor = [UIColor blue].CGColor;

[button setTitleColor:[UIColor white] forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blue] forState:UIControlStateNormal];

[button setTitleColor:[UIColor white] forState:UIControlStateHighlighted];
[button setBackgroundColor:[UIColor purple] forState:UIControlStateHighlighted];

Class:

#import <UIKit/UIKit.h>

@interface StyleKitButton : UIButton

@end

//------------------------------------------------------


#import "StyleKitButton.h"

@interface StyleKitButton()

@property (nonatomic, strong) NSMutableDictionary *backgroundColors;

@end

@implementation StyleKitButton

#pragma mark - Background Colors

- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state {
    if (!self.backgroundColors) {
        self.backgroundColors = [[NSMutableDictionary alloc] init];
    }

    if (backgroundColor) {
        self.backgroundColors[@(state)] = backgroundColor;
    }

    if (state == UIControlStateNormal) {
        self.backgroundColor = backgroundColor;
    }
}

- (void)transitionBackgroundToColor:(UIColor*)color {
    CATransition *animation = [CATransition animation];
    animation.type = kCATransitionFade;
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [self.layer addAnimation:animation forKey:@"EaseOut"];
    self.backgroundColor = color;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];

    UIColor *selectedColor = self.backgroundColors[@(UIControlStateHighlighted)];
    if (selectedColor) {
        [self transitionBackgroundToColor:selectedColor];
    }
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesCancelled:touches withEvent:event];

    UIColor *normalColor = self.backgroundColors[@(UIControlStateNormal)];
    if (normalColor) {
        [self transitionBackgroundToColor:normalColor];
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];

    UIColor *normalColor = self.backgroundColors[@(UIControlStateNormal)];
    if (normalColor) {
        [self transitionBackgroundToColor:normalColor];
    }
}

@end