How to make a UIView with extra rounded corners and a border?

Question

I apply the angular radius to UIView ie UIRectCornerTopLeft and UIRectCornerTopRight . When I apply this, the border disappears at the corners. How to avoid this?

This is how I apply the border to the UIView :

  [self.middleView addRoundedCorners:UIRectCornerTopLeft|UIRectCornerTopRight withRadii:CGSizeMake(4, 4)]; self.middleView.layer.borderWidth = 0.5f; self.middleView.layer.borderColor = [[UIColor colorWith8BitRed:0 green:0 blue:0 alpha:0.25] 

And this is the category that I use to apply extra rounded corners:

  #import "UIView+Roundify.h" @implementation UIView (Roundify) - (void)addRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii { CALayer *tMaskLayer = [self maskForRoundedCorners:corners withRadii:radii]; self.layer.mask = tMaskLayer; } - (CALayer*)maskForRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii { CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.frame = self.bounds; UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect: maskLayer.bounds byRoundingCorners:corners cornerRadii:radii]; maskLayer.fillColor = [[UIColor whiteColor] CGColor]; maskLayer.backgroundColor = [[UIColor clearColor] CGColor]; maskLayer.path = [roundedPath CGPath]; return maskLayer; } 

Answer 1

Try the code below.

Your Opinion You Want to Round TopLeft and TopRight

  UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 100, 100)]; [view1 setBackgroundColor:[UIColor grayColor]]; [self.view addSubview:view1]; 

Set the angle as below code

 UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:view1.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(5.0, 5.0)]; CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.view.bounds; maskLayer.path = maskPath.CGPath; view1.layer.mask = maskLayer; 

OUTPUT:

Answer 2

If there is no specific requirement that we do not know about, a path without a mask and a mask are not needed, if all you are trying to do is round corners and have a border. Usually I just do this: myView.layer.borderWidth = 2; myView.layer.cornerRadius = 5;

Is it only necessary that the top corners be rounded, that you do not need to use rounding of the layer? If so, why not use this and then impose a subtle look to cover the bottom bit? A bit unrealistic, but I find that the more you can rely on standard controls to draw yourself, rather than enter into the main graphics, the better.

Edit : ok, given that this requires the bottom corners not to be rounded, how about whether you had a category on a UIView with two subzones: 1 with 4 rounded corners and the other at the top (self bringSubviewToFront), which just covers rounded view "footer" with a non-circular strip, that is, a view with equal width and tiny height equal to the rounded corner radius. If you have a solid background color, then just make both subviews the same; if you have a texture or image background, make it transparent and put the texture / image in a super view (the parent view using your layout method of a certain category). Then finally put the border on the same supervisor. Should work, let me know what you think.

Answer 3

Found this piece of code. They haven’t actually tried, but it seems like this is what you need.

 - (void)drawDashedBorderAroundView:(UIView *)v { //border definitions CGFloat cornerRadius = 10; CGFloat borderWidth = 2; NSInteger dashPattern1 = 8; NSInteger dashPattern2 = 8; UIColor *lineColor = [UIColor orangeColor]; //drawing CGRect frame = v.bounds; CAShapeLayer *_shapeLayer = [CAShapeLayer layer]; //creating a path CGMutablePathRef path = CGPathCreateMutable(); //drawing a border around a view CGPathMoveToPoint(path, NULL, 0, frame.size.height - cornerRadius); CGPathAddLineToPoint(path, NULL, 0, cornerRadius); CGPathAddArc(path, NULL, cornerRadius, cornerRadius, cornerRadius, M_PI, -M_PI_2, NO); CGPathAddLineToPoint(path, NULL, frame.size.width - cornerRadius, 0); CGPathAddArc(path, NULL, frame.size.width - cornerRadius, cornerRadius, cornerRadius, -M_PI_2, 0, NO); CGPathAddLineToPoint(path, NULL, frame.size.width, frame.size.height - cornerRadius); CGPathAddArc(path, NULL, frame.size.width - cornerRadius, frame.size.height - cornerRadius, cornerRadius, 0, M_PI_2, NO); CGPathAddLineToPoint(path, NULL, cornerRadius, frame.size.height); CGPathAddArc(path, NULL, cornerRadius, frame.size.height - cornerRadius, cornerRadius, M_PI_2, M_PI, NO); //path is set as the _shapeLayer object path _shapeLayer.path = path; CGPathRelease(path); _shapeLayer.backgroundColor = [[UIColor clearColor] CGColor]; _shapeLayer.frame = frame; _shapeLayer.masksToBounds = NO; [_shapeLayer setValue:[NSNumber numberWithBool:NO] forKey:@"isCircle"]; _shapeLayer.fillColor = [[UIColor clearColor] CGColor]; _shapeLayer.strokeColor = [lineColor CGColor]; _shapeLayer.lineWidth = borderWidth; _shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:dashPattern1], [NSNumber numberWithInt:dashPattern2], nil]; _shapeLayer.lineCap = kCALineCapRound; //_shapeLayer is added as a sublayer of the view, the border is visible [v.layer addSublayer:_shapeLayer]; v.layer.cornerRadius = cornerRadius; } 

This piece of code adds a dashed line, but you can change it to _shapeLayer.lineDashPattern .