The easiest way to place a circular frame around a UIImage

Question

I am trying to make a cool effect for one of the applications that I create, and would rather not guess with the drawRect function. Can you guys think of a simple way to put a circular border around a UIImage? It should look something like a round frame.

Here is what I use so far:

CGFloat radius = self.layer.bounds.size.width / 2; CAShapeLayer *mask = [CAShapeLayer layer]; mask.frame = self.layer.bounds; [mask setFillColor:[[UIColor whiteColor] CGColor]]; CGFloat width = self.layer.bounds.size.width; CGFloat height = self.layer.bounds.size.height; CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, width, 0); CGPathAddLineToPoint(path, NULL, width, height - radius); CGPathAddCurveToPoint(path, NULL, width, height, width - radius, height, width - radius, height); CGPathAddLineToPoint(path, NULL, 0, height); CGPathAddLineToPoint(path, NULL, 0, radius); CGPathAddCurveToPoint(path, NULL, 0, 0, radius, 0, radius, 0); CGPathCloseSubpath(path); [mask setPath:path]; CGPathRelease(path); self.layer.mask = mask; [self setNeedsDisplay]; 

My UIImage is encapsulated in UIView (self - UIView). I expect him to draw a circle around my UIView.

Answer 1

Probably the best way to do this is to use QuartzCore.

Basically, you will need to enable the QuartzCore environment, and then create a UIView to place your image, then round it around the corners and set the clipsToBounds property to YES.

Example:

 #include <QuartzCore/QuartzCore.h> //More code stuff UIView *newView = [[UIView alloc] initWithFrame:frame]; newView.clipsToBounds = YES; newView.layer.cornerRadius = 10; [newView addSubview:imageView]; 

Answer 2

You can use the mask on the UIImageView layer or just set the radius of the corner to half height. In any case, be sure to #import <QuartzCore/QuartzCore.h>

 myImageView.layer.cornerRadius = myImageView.bounds.size.width / 2; 

An example mask to make two rounded corners (make a circle instead):

 + (void) applyTwoCornerMask: (CALayer *) layer withRadius: (CGFloat) radius { CAShapeLayer *mask = [CAShapeLayer layer]; mask.frame = layer.bounds; [mask setFillColor:[[UIColor blackColor] CGColor]]; CGFloat width = layer.bounds.size.width; CGFloat height = layer.bounds.size.height; CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, width, 0); CGPathAddLineToPoint(path, NULL, width, height - radius); CGPathAddCurveToPoint(path, NULL, width, height, width - radius, height, width - radius, height); CGPathAddLineToPoint(path, NULL, 0, height); CGPathAddLineToPoint(path, NULL, 0, radius); CGPathAddCurveToPoint(path, NULL, 0, 0, radius, 0, radius, 0); CGPathCloseSubpath(path); [mask setPath:path]; CGPathRelease(path); layer.mask = mask; } 

Answer 3

How about the following approach: Use a second UIImageView that sits on top of the original, which has the image you want to create. This second UIImageView has an extensible version of the image of your photo frame, so your image frame may change if the original image is resized.

Not easy to reuse, but that would be easy.

You must use the stretchableImageWithLeftCapWidth method for UIImage to create a stretch version of the image with the image.