Mohamed Ghebaji Mohamed Ghebaji - 4 months ago 23
iOS Question

draw border on UIView using uibezierpath

I need you helps to draw this border on UIView using uibezierpath or similar.

enter image description here

I have made this solution : Nest a UIView in another one, but i think that there is better solution :

- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];

self.theView.layer.cornerRadius = self.theView.bounds.size.width/2;
self.theView.layer.masksToBounds = YES;

UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(4, 4, CGRectGetWidth(self.theView.frame) - 8, CGRectGetHeight(self.theView.frame) - 8)];
borderView.backgroundColor = [UIColor grayColor];
borderView.layer.cornerRadius = self.theView.bounds.size.width/2;
borderView.layer.masksToBounds = YES;

self.theView.layer.borderWidth = 2;
self.theView.layer.borderColor = [UIColor redColor].CGColor;
self.theView.backgroundColor = [UIColor clearColor];
[self.theView addSubview:borderView];

}


Thanks.

Answer

You can draw it in one UIView using two bezier paths. Subclass the UIView and include this in the the UIView drawRect method,

-(void)drawRect:(CGRect)frame
{
    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame) + 2, CGRectGetMinY(frame) + 2.5, CGRectGetWidth(frame) - 5, CGRectGetHeight(frame) - 5)];
    [UIColor.redColor setStroke];
    ovalPath.lineWidth = 1;
    [ovalPath stroke];

   UIBezierPath* oval2Path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame) + 10, CGRectGetMinY(frame) + 10, CGRectGetWidth(frame) - 20, CGRectGetHeight(frame) - 20)];
    [UIColor.lightGrayColor setFill];
    [oval2Path fill];
}

enter image description here

Comments