9

I have a custom table view cell that is intended to draw a circle like the iPhone’s Mail.app does:

Circles that don't suck

Instead, it draws like this:

Circles that suck

Here’s my code:

CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *grayColor = [UIColor grayColor];

[grayColor set];

CGContextStrokeEllipseInRect(context, CGRectMake(9, 10, 23, 23));

How can I make it not suck? :)

Edit: Ignore the fact that I omitted the code that draws the white background color.

What about it sucks? It doesn’t look close to, if not exactly like, the circle from Mail.

Jacob Relkin
  • 161,348
  • 33
  • 346
  • 320
Abraham Vegh
  • 1,490
  • 1
  • 12
  • 32

2 Answers2

18

I was able to solve this by changing the UIColor to the same color Apple uses, #E5E5E5:

[UIColor colorWithRed: 0.8980392157 green: 0.8980392157 blue: 0.8980392157 alpha: 1.0]

And changing the line width from the default 1.0 to 2.0:

CGContextSetLineWidth(context, 2.0);

Tweaking the size was also necessary: 

CGContextStrokeEllipseInRect(context, CGRectMake(10, 11, 21, 21));

The final code looks like this:

CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *grayColor = [UIColor colorWithRed: 0.8980392157 green: 0.8980392157 blue: 0.8980392157 alpha: 1.0];

[grayColor set];

CGContextSetLineWidth(context, 2.0);
CGContextStrokeEllipseInRect(context, CGRectMake(10, 11, 21, 21));

And outputs like this:

Circle that doesn't suck

Abraham Vegh
  • 1,490
  • 1
  • 12
  • 32
  • 2
    Your answer reminded me of, and inspired me to experiment with, C's hexadecimal floating-point literals. You could represent the color component values as, for example, `0xE5p+0 / 0xFFp+0`. – Peter Hosey Feb 16 '13 at 01:12
5

Try setting its alpha to 0.5 and making the borders thicker, for example, like this:

CGContextSetAlpha(context, 0.5);
Knodel
  • 4,359
  • 8
  • 42
  • 66
  • and a lttle smaller it looks like - to exactly match the other circle. – Randy Nov 30 '10 at 15:52
  • Setting the alpha to `0.5` does improve the color situation, but I'll probably make that better by getting an actual UIColor representation of that particular shade of gray, to keep computational effort lower. What CG call do I use to make the border thicker? – Abraham Vegh Nov 30 '10 at 16:02
  • 3
    use CGContextSetLineWidth(CGContextRef c, CGFloat width); – Matthias Bauch Nov 30 '10 at 16:19