Rounded Corners at bottom CoreGraphics iOS - ios

Question

To draw
border at the bottom, left and right .
rounded corners at the bottom
clip to the border
Fill the colour with the actual colour, which might be set in the .xib file, but in the following code I had set the colour to clear colour.
For the the above things and the code listed below I get the following output.
A rough idea of the required output can be found as below in the image.
-(id) initWithCoder:(NSCoder *)aDecoder{
self=[super initWithCoder:aDecoder];
if(self){
self.clipsToBounds=YES;
self.backgroundColor=[UIColor clearColor];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGFloat margin=2.0;
CGRect outerRect=CGRectInset(rect, margin, margin);
CGMutablePathRef path=createRoundedRectForRect(outerRect, 10.0);
CGFloat margin1=1.0;
CGRect innerRect=CGRectInset(outerRect, margin1, margin1);
CGMutablePathRef innerPath=createRoundedRectForRect(innerRect, 5.0);
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextAddPath(context, innerPath);
CGContextClip(context);
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor
);
CGContextStrokeRect(context, rect);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor
);
CGContextFillRect(context, innerRect);
CGContextRestoreGState(context);
}
CGMutablePathRef createRoundedRectForRect (CGRect rect, CGFloat radius){
CGMutablePathRef path=CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect),CGRectGetMinY(rect));
return path;
}
Part 2, Changes
These below changes gives me the following output, where "Add" Button still overlaps and is not clipped to the border.
The output is almost the expected one, as seen in the following image.
- (void)drawRect:(CGRect)rect
{
CGSize radii=CGSizeMake(10.0, 10.0);
UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:radii];
[[UIColor blackColor] setFill];
[path fill];
CGFloat margin=4.0;
CGRect innerRect=CGRectMake(rect.origin.x+margin, 0, rect.size.width-(2*margin), rect.size.height-margin);
//Scaling InnerRadii
CGSize radii2=CGSizeMake(radii.width-margin, radii.height-margin);
UIBezierPath *innerPath=[UIBezierPath bezierPathWithRoundedRect:innerRect byRoundingCorners:UIRectCornerBottomRight|UIRectCornerBottomLeft cornerRadii:radii2];
[[UIColor redColor] setFill];
[innerPath fill];
}

Answer 1

Here is how I would do it. I would create an outer rectangle with the bottom corners rounded. Then, I would duplicate this rectangle and change its dimensions so it's slightly smaller and overlay it on top of the first rectangle.
- (void) drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10.0f, 10.0f)];
[[UIColor blackColor] setFill];
[path fill];
CGRect innerRect = CGRectInset(rect, 4.0f, 2.0f);
innerRect.origin.y -= 2.0f;
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRoundedRect:innerRect
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(8.0f, 8.0f)];
[[UIColor redColor] setFill];
[innerPath fill];
}
This produces the following output:
Edit: scaled the cornerRadii as Paul.s suggested.