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

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!

Answer 1

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".

Answer 2

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

Answer 3

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

Answer 4

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