0

I have a custom UIView that I would like to manually draw in the drawRect: method. I want the view to be a black rectangle with a single rounded corner and a red border on the bottom only. How can I implement drawRect: to draw this view?

Sample UIView

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
  • 5,711
  • 8
  • 54
  • 70

1 Answers1

1

I would do something like

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextClearRect(context, rect);

CGContextSaveGState(context);

CGFloat cornerRadius = 10.0f;

CGFloat redBorderHeight = 4.0f;

CGFloat minx = 0.0f;
CGFloat miny = 0.0f;
CGFloat midx = rect.size.width/2;
CGFloat midy = rect.size.height/2;
CGFloat maxx = rect.size.width;
CGFloat maxy = rect.size.height;

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, minx, midy);
CGPathAddArcToPoint(path, nil, minx, miny, midx, miny, 0);
CGPathAddArcToPoint(path, nil, maxx, miny, maxx, midy, 0);
CGPathAddArcToPoint(path, nil, maxx, maxy, midx, maxy, 0);
CGPathAddArcToPoint(path, nil, minx, maxy, minx, midy, cornerRadius);
CGPathCloseSubpath(path);

CGContextAddPath(context, path);

CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

CGContextDrawPath(context, kCGPathFill);

CGContextRestoreGState(context);

midy = (rect.size.height-redBorderHeight)/2;
maxy = rect.size.height-redBorderHeight;

CGMutablePathRef path2 = CGPathCreateMutable();
CGPathMoveToPoint(path2, nil, minx, midy);
CGPathAddArcToPoint(path2, nil, minx, miny, midx, miny, 0);
CGPathAddArcToPoint(path2, nil, maxx, miny, maxx, midy, 0);
CGPathAddArcToPoint(path2, nil, maxx, maxy, midx, maxy, 0);
CGPathAddArcToPoint(path2, nil, minx, maxy, minx, midy, cornerRadius);
CGPathCloseSubpath(path2);

CGContextAddPath(context, path2);

CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);

CGContextDrawPath(context, kCGPathFill);
joao
  • 4,067
  • 3
  • 33
  • 37
  • Thanks I will try this out. Where can I learn more about these drawing methods? Is this CoreGraphics? Sorry I'm new to iOS development. – zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz May 01 '13 at 05:32
  • 2
    apple docs are actually very good https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007533-SW1 – joao May 01 '13 at 05:39