What is the best way to render circles in iOS?

Question

When rendering opaque non-gradient round shapes of uniform color in iOS, there are apparently three possible methods:

Using images like circle-icon.png and [e-mail] . Then you can implement the following code so that iOS automatically displays the appropriate size:

 UIImage *image = [UIImage imageNamed:@"circle-icon"]; self.closeIcon = [[UIImageView alloc] initWithImage:image]; self.closeIcon.frame = CGRectMake(300, 16, image.size.width, image.size.height); 

Display rounded corners and use layers, for example :.

 self.circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,100,100)]; circleView.alpha = 0.5; self.circleView.layer.cornerRadius = 50; self.circleView.backgroundColor = [UIColor blueColor]; 

Using custom drawing libraries with something like CGContextFillEllipseInRect

What are the exact tradeoffs in performance and maintenance of these three approaches?

Answer 1

You are ignoring another very logical alternative, UIBezierPath and CAShapeLayer . Create a UIBezierPath , which is a circle, create a CAShapeLayer that uses this UIBezierPath , and then add this layer to your view / level hierarchy.

• Add the QuartzCore framework project to the project .

• Second, import the appropriate header:

   #import <QuartzCore/QuartzCore.h> 

• And then you can add CAShapeLayer to your layer:

   UIBezierPath *path = [UIBezierPath bezierPath]; [path addArcWithCenter:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0) radius:self.view.bounds.size.width * 0.40 startAngle:0 endAngle:M_PI * 2.0 clockwise:YES]; CAShapeLayer *layer = [[CAShapeLayer alloc] init]; layer.path = [path CGPath]; layer.fillColor = [[UIColor blueColor] CGColor]; [self.view.layer addSublayer:layer]; 

I think that either the CoreGraphics implementation or this CAShapeLayer implementation CAShapeLayer more sense than PNG files or rounded UIView objects.

Answer 2

The sharpest and best result is to have a well-drawn image that exactly matches the size of the circle. If you determine the size of the circles, you often don’t get the look you need, and some overhead is associated with them.

I think your best performance for cleanliness and speed comes from using the main graphics and adding an ellipse to the square:

 CGPathRef roundPath = CGPathCreateMutable(); CGRect rectThatIsASquare = CGRectMake(0, 0, 40, 40); CGPathAddEllipseInRect(roundPath, NULL, rectThatIsASquare); CGContextSetRGBFillColor(context, 0.7, 0.6, 0.5, 1.0); CGContextFillPath(context); 

Answer 3

Personally, I think you are thinking too much about the problem. If you only draw a few circles, there will be very little performance / maintenance, depending on what you decide, and even if you optimize it to hell, your users will not get any benefits from this. Do everything you do now; focus on making your app content great, and get back to performance later if you really need to.

With that said, I would recommend using drawing libraries.

1. Rounding corners is slow and rather unintuitive
2. Using image files will be a problem if you decide to do things such as color changes. In addition, sometimes images do not look so cool after you scale them.