views:

894

answers:

1

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?

+5  A: 

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.

Alex
With a pill like Mail's, where the radius is equal to half the height, you can simplify this by drawing two 180° arcs instead of four 90° arcs.
Peter Hosey
Thanks a bunch Alex and Peter, testing now. If I want to plan a numeric value onto the ellipse, what kind of mathematics are involved to get to the center of elipse and write text over it?
Coocoo4Cocoa
I didn't notice it was pill-shaped! Do what Peter said; it saves lines of code. Take a look at the UIKit additions to NSString. You can call sizeWithFont: on the string you want to draw, then center it with x = CGRectGetMinX(rect) + (CGRectGetWidth(rect) - textSize.width) / 2.0. Repeat for Y coord.
Alex