iOS: Rounded rectangle with border bleeds color

Question

I\'m drawing round avatar pics, by just applying cornerRadius to a UIImageView\'s layer, and also adding a border via borderWith and <

Answer 1

My UIButton needed a rounded corner radius which resulted in jagged edges. Setting borderStyle to .roundedRect fixed it.

button.borderStyle = .roundedRect
button.layer.cornerRadius = 4
button.layer.borderWidth = 1
button.layer.borderColor = .red.cgColor

Answer 2

You could try to use a CAShapelayer with a circular path as the mask for the Layer instead of using the corner radius.

Alternatively you can place the image view in a container that has the border and is one/two pixel larger.

Answer 3

OP's solution is unnecessarily complicated. An easier and cleaner solution. Create a UIView, clip to bounds, mask, border, and corner radius like above and then add a UIIamgeview as a subview of that UIView. The UIIamgeview will be clipped by the parent view and you won't have the bleeding issue.

Answer 4

As said in comments, you can add a transparent border to the image so it will be ok. Here is a piece of code to do so (a category to UIImageView) :

+ (UIImage *)imageWithImage:(UIImage *)image withTransparentBorderOfWidth:(CGFloat)width {
    CGSize size = image.size;
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(size.width + width * 2, size.height + width * 2), NO, 0.0);
    [image drawInRect:CGRectMake(width, width, size.width, size.height)];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

Answer 5

Try setting:

[self setClipToBounds:YES]

Answer 6

I had the same problem and wanted a solution which would work well with a Storyboard. What I did was place my image inside of a view and then set both to a custom class which controls the behavior. I can now totally control the design from a Storyboard.

I've placed the code on GitHub.

https://github.com/brennanMKE/CircleButton

What it does is override the drawRect function in UIView for both a UIButton and regular UIView so it can work with many views. A wrapper view is also used to control the border color and width. I simply make sure there is some margin between the wrapped view and the superview and use the difference as the border width. The background color of the superview becomes the border color. Now I can make these changes quickly in many scenes in a Storyboard without custom coding each instance.

- (void)drawRect:(CGRect)rect {
    // round view and superview with a border using the background color of the superview
    self.layer.cornerRadius = CGRectGetWidth(self.frame) / 2;
    self.layer.masksToBounds = YES;

    if ([self.superview isKindOfClass:[SSTCircleWrapperView class]]) {
        self.superview.layer.cornerRadius = CGRectGetWidth(self.superview.frame) / 2;
        self.superview.layer.masksToBounds = YES;
        self.superview.layer.borderColor = self.superview.backgroundColor.CGColor;
        self.superview.layer.borderWidth = (CGRectGetWidth(self.superview.frame) - CGRectGetWidth(self.frame)) / 2;
    }
}