Search code examples
iphonecocoacocoa-touchquartz-graphics

What is the best way to draw this ellipse in an iPhone app?

I'd like to have a similar ellipse as the Mail app in my iPhone app. A screenshot just for reference is here: http://dl-client.getdropbox.com/u/57676/screenshots/ellipse.png

Ultimately I'd like the ellipse with a numerical value centered in it. Is it best to use a UIImage for this task? Perhaps less overhead to draw it with Quartz? If it's done with Quartz, can anyone display a solution for drawing it?

Solution

  • Ah, a rounded rectangle. That's not too hard to draw. You can use Bezier paths to get what you want. The code looks like this:

    CGRect rect;
CGFloat minX = CGRectGetMinX(rect), minY = CGFloatGetMinY(rect), maxX = CGFloatGetMaxX(rect), maxY = CGRectGetMaxY(rect);

CGFloat radius = 3.0; // Adjust as you like
CGContextBeginPath(context);
CGContextMoveToPoint(context, (minX + maxX) / 2.0, minY);
CGContextAddArcToPoint(context, minX, minY, minX, maxY, radius);
CGContextAddArcToPoint(context, minX, maxY, maxX, maxY, radius);
CGContextAddArcToPoint(context, maxX, maxY, maxX, minY, radius);
CGContextAddArcToPoint(context, maxX, minY, minX, minY, radius);
CGContextClosePath(context);

    Now that you have a path on your graphics context, you can draw it or outline it using the CGContextDrawPath and CGContextFillPath functions.