UIButton: set background of image view (without setting an image)

Question

How can I change the background color of the image view on a UIButton but without setting an image? (so that I have for example a red square next to the button text).

When I simply set mybutton.imageView.backgroundColor = UIColor.red and set the constraints of the image view to 28x28px. I do not see the red square.

Thanks.

To clarify: I want to set the background color of only the image view on of the UIButton - I do not want to color the whole button!

for e.g see this https://stackoverflow.com/questions/41545599/how-to-change-tintcolor-of-image-in-uibutton-with-imageedgeinsets — Anbu.Karthik, Nov 07 '17 at 09:14
@Pascal Not the perfect solution but you can try adding a text and image inside a UIView and above it add a blank UIButton. — Mr.Kushwaha, Nov 07 '17 at 09:54

score 1 · Accepted Answer · answered Nov 07 '17 at 14:07

You tagged your question as both Swift and Objective-C, so...

In Swift, you can use this extension to create a "blank" image with a specific color:

public extension UIImage {
    public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
        let rect = CGRect(origin: .zero, size: size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        guard let cgImage = image?.cgImage else { return nil }
        self.init(cgImage: cgImage)
    }
}

Then, to add a "red square next to the button text":

    let btnImage = UIImage(color: .red, size: CGSize(width: 28, height: 28))
    btn.setImage(btnImage, for: .normal)

If you need to do this in Obj-C, it's the same process:

- (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)sz {
    CGRect rect = CGRectMake(0.0f, 0.0f, sz.width, sz.height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

and

    UIImage *btnImage = [self imageWithColor:[UIColor redColor] andSize:CGSizeMake(28.0, 28.0)];
    [_btn setImage:btnImage forState:UIControlStateNormal];

Note: make sure your UIButton type is set to Custom, or the image will be "tinted".

yeah I tagged it with both languages, since it's easy to translate one into the other and I'd be fine with answers for any of them :) Thanks for you response, it really looks like there is no option to get this done without setting an image, so, using a *pseudo-image* like in your approach seems to bee the the best approach — Pascal, Nov 07 '17 at 14:25

score 0 · Answer 2 · answered Nov 07 '17 at 09:56

Use this code.

UIButton *button =[[UIButton alloc]initWithFrame:CGRectMake(85, 290,110,20)];
button.layer.cornerRadius = ROUND_BUTTON_WIDTH_HEIGHT/2.0f;
button.backgroundColor = [UIColor redColor];
button.titleLabel.textAlignment = NSTextAlignmentCenter;
button.titleLabel.font = [UIFont systemFontOfSize:11.0];
[button setTitle:@"Download" forState:UIControlStateNormal];
[button addTarget:self action:@selector(downloadBtnClicked:)forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];

He's asking to change the background color of imageview, not the button. — Mr.Kushwaha, Nov 07 '17 at 10:00

score 0 · Answer 3 · answered Nov 07 '17 at 10:22

0

You should make your own custom UIButton. Another solution would be to try tweaking the default one using the IB available options.

UIButton Image + Text IOS

answered Nov 07 '17 at 10:22

Mihai Erős

1,129
1
11
18

score 0 · Answer 4 · answered Nov 07 '17 at 10:25

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];

[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes

[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes

[_button setClipsToBounds:false];

[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes

[_button setTitle:@"Button" forState:UIControlStateNormal];

[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];

[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes

[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes

[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes

[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

UIButton: set background of image view (without setting an image)

4 Answers4