Easiest Way to Put a Circular Frame Around a UIImage

Question

I'm trying to make a cool effect for one the of the apps I'm building, and would rather not muck around with the drawRect function. Can you guys think of a simple way to put a nice circular border around a UIImage? It should look something like a round picture frame.

Here's what I'm using 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 a UIView (self is a UIView). I'm expecting it to draw a circle around my UIView.

Answer 1

Probably the best way to do it is using QuartzCore.

Basically you'd need to include the QuartzCore framework and then create a UIView to put your image in, then round it's corners and set it's 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 a mask on the layer of the UIImageView, or just set the corner radius to half the height. In either case be sure to #import <QuartzCore/QuartzCore.h>

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

Example mask to make two rounded corners (change to make it 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;  
}