Question

I’m having this issue when trying to overlay a UIButton‘s Image with a color.

The overlay color is appearing underneath the Image.

Here is the code that I have in my drawRect method (I have subclassed UIButton):

(void)drawRect:(CGRect)rect
{
    CGRect bounds = self.imageView.bounds;
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextTranslateCTM(context, 0.0, self.imageView.image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextClipToMask(context, bounds, [self.imageView.image CGImage]);
    CGContextFillRect(context, bounds);
}

Any ideas on how to get the red color on top of the Image?

Answer 1

Succeeded with this hacky code:

- (void)drawRect:(CGRect)rect
{
    UIImage* img = [self imageForState:UIControlStateNormal];
    [self setImage:nil forState:UIControlStateNormal];
    CGRect bounds = self.imageView.bounds;
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2].CGColor);
    CGContextDrawImage(context, bounds, img.CGImage);
    CGContextFillRect(context, bounds);
}

It seems the image is drawn after drawRect so unless you make it nil, it goes on top of whatever you draw there.

This is solution is not final. I’ll edit it with what I get to next.

EDIT: The right solution is to add a semi-transparent UIView on top of the image like this:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        UIView* tintView = [[UIView alloc] initWithFrame:self.bounds];
        tintView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2];
        tintView.userInteractionEnabled = NO;
        [self addSubview:tintView];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        UIView* tintView = [[UIView alloc] initWithFrame:self.bounds];
        tintView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2];
        tintView.userInteractionEnabled = NO;
        [self addSubview:tintView];
    }
    return self;
}

Note: you should do this in your UIButton subclass.