Blurred rounded rect UIBezierPath, UIButton background

Question

I need to set a rounded rect as background for UIButton, and I need to generate it programmatically, related on color

+ (UIImage *)buttonBackgroundWithColor:(UIColor *)color {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(30.f, 30.f), NO, 1.0f);

    CGContextRef context = UIGraphicsGetCurrentContext();
    [color setStroke];

    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(2.f, 2.f, 26.f, 26.f)
                                                          cornerRadius:7.f];
    CGContextSetStrokeColorWithColor(context, color.CGColor);
    bezierPath.lineWidth = 1.f;
    [bezierPath stroke];

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();
    return [[image copy] resizableImageWithCapInsets:UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f)];
}

I've tried to do it like it described here https://stackoverflow.com/a/19142851/1090590

but, my button background is 'blurred'

What am I doing wrong? How can I make it legible?

enter image description here

I know about that solution, but it would be not so good for my UI component's API. — BergP, May 31 '15 at 10:27
I suspect the issue is the `scale` parameter of `UIGraphicsBeginImageContextWithOptions`. Set it to `0.0` to have it use the scale factor of the device's screen. — bobnoble, May 31 '15 at 10:38
@bobnoble you are right, thanks. I would accept your answer if you moved it in the answers section. — BergP, May 31 '15 at 11:22

score 0 · Answer 1 · answered May 31 '15 at 10:26

0

You can Use Layer to set corner radius

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(100, 100, 100,50);
[btn setTitle:@"Hello" forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor colorWithRed:128.0/255.0f green:0.0/255.0f  blue:0.0/255.0f alpha:0.7]];
btn.frame = CGRectMake(100.0, 100.0, 120.0, 50.0);//width and height should be same  value
btn.clipsToBounds = YES;

btn.layer.cornerRadius = 20;//half of the width
btn.layer.borderColor=[UIColor redColor].CGColor;
btn.layer.borderWidth=2.0f;

[self.view addSubview:btn];

answered May 31 '15 at 10:26

Omarj

1,151
2
16
43

I know about that solution, but it would be not so good for my UI component's API. It would be better to do it with background image. – BergP May 31 '15 at 10:28
@BergP check this and let me know if it is helpful or not http://orangejuiceliberationfront.com/are-your-rectangles-blurry-pale-and-have-rounded-corners/ – Omarj May 31 '15 at 10:39

Pankaj · Answer 2 · 2015-05-31T11:39:03.603

Try this

-(void)getButtonScreenShot:(UIButton *)button{
button.layer.cornerRadius = 5.0;
button.layer.borderWidth = 2.0;
button.layer.borderColor = [UIColor blueColor].CGColor;

UIGraphicsBeginImageContext(button.frame.size);

CGContextRef  context = UIGraphicsGetCurrentContext();

[self.mybutton.layer renderInContext:context];


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


button.layer.cornerRadius = 0;
button.layer.borderWidth = 0;
button.layer.borderColor = nil;}

change in cornerRadius,borderWidth and borderColor will not reflect in actual UI Of button.

Result

change color according to your choice

Blurred rounded rect UIBezierPath, UIButton background

2 Answers2