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

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;
    }
}