UIImageView sides and top rounded borders

Question

Hi all I need to realize borders around an UIImageView like these.

Left, top and right border like an half-moon

http://imageshack.com/a/img841/3269/o90p.png

How can i do it ?

Answer 1

You need to:

1. Create a CAShapeLayer
2. Set its path to be a CGPathRef based on view.bounds but with only two rounded corners (probably by using [UIBezierPath bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:])
3. Set your view.layer.mask to be the CAShapeLayer

Just take in account that this have a bad effect on performance. This might help

Answer 2

You can user CALayer for the same.

CALayer *l = [_btn layer];
[l setMasksToBounds:YES];
[l setCornerRadius:8.0];

and add QuartzCore.framework

Answer 3

You may want to subclass UIView and override the drawRect: method. Then place add your image view as a subview. Your drawRect: method would look something like this (with clipsToBounds set to YES):

- (void)drawRect:(CGRect)rect
{
    UIColor *fillColor = [UIColor clearColor];
    UIColor *borderColor = [UIColor redColor];
    float borderWidth = 2.0f;

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, fillColor.CGColor);
    CGContextSetLineWidth(context, borderWidth);
    CGContextSetStrokeColorWithColor(context, borderColor.CGColor);

    CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMidY(rect));
    CGContextAddArc(context, CGRectGetMidX(rect), CGRectGetMidY(rect), rect.size.height/2, 2*M_PI, M_PI, 1);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
}

Alternatively you can look into masking with a semicircle image or creating a CAShapeLayer for the image view.