0

I've been thinking about this one for a while. Basically, the code below draws a border on a UIView, but, if I add another UIView as a subview to that UIView - it'll appear above the border.

Like this:

enter image description here

How do I (as cleanly as possible), keep the border above all subviews?

Like this:

enter image description here

This is what I have so far. But, like stated above, it doesn't keep the border above all its subviews.

    CGPathRef CGPathRect = CGPathCreateWithRect(rect, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGPathRef border = CGPathCreateCopyByStrokingPath(rect.CGPath, NULL, 5.0f, kCGLineCapButt, kCGLineJoinMiter, 0);
    CGContextAddPath(context, border);
    CGContextSetFillColorWithColor(context, someCGColor);
    CGContextDrawPath(context, kCGPathFill);
    CGPathRelease(border);

I could create a separate UIView for the border itself, and just insert subviews below that UIView, but that feels rather hackish. If there's a better way - I'd love to hear about it.

Vinodh
  • 5,262
  • 4
  • 38
  • 68
  • Is there a reason why you don't use view.layer.borderWidth and view.layer.borderColor ? –  Feb 11 '17 at 01:01
  • This is what i was about to ask, why use that expensive core graphics stuff, when u have two properties of view.layer who do exactly that. – Aragunz Feb 11 '17 at 01:02
  • The reason is that `layer.border` doesn't conform to views that are of circular shape. I.e, round the corners via `UIBezierPath` and you'll see what I'm talking about. `layer.border` will be a rectangle. –  Feb 11 '17 at 01:16
  • @Cookies view.layer.cornerRadius for rounded corners. So, what more you need? –  Feb 11 '17 at 01:17
  • cornerRadius is very expensive. Therefore, I'm using `UIBezierPath` –  Feb 11 '17 at 01:18
  • @Cookies view.layer.shouldRasterize = YES; view.layer.rasterizationScale = [UIScreen mainScreen].scale; for performance... what more you need? :) –  Feb 11 '17 at 01:20
  • What are those properties supposed to do? @Sneak –  Feb 11 '17 at 01:23
  • @Cookies Check http://stackoverflow.com/questions/11521959/uiview-self-layer-shouldrasterize-yes-and-performance-issues –  Feb 11 '17 at 01:25
  • @Sneak Read: http://asyncdisplaykit.org/docs/corner-rounding.html –  Feb 11 '17 at 01:27
  • @Cookies It's all basically up to use-case and what your app is doing. Did you even try it before linking that? I have a ** MASSIVE ** social feed page made in a UITableView where I have images with rounded corners, and I am scrolling at maximum FPS on an old 4s. So, it's all from case to case .. However, adding an UIView on top of another UIView is not a hacky way at all. I use UIViews for custom borders here and there. Also, you should look into https://coderwall.com/p/6gsc8g/applying-rounded-corners-to-a-view-in-objective-c –  Feb 11 '17 at 01:33

1 Answers1

1

I would say use:

 view.clipToBounds       = YES;
 view.layer.borderColor  = [UIColor redColor];
 view.layer.borderWidth  = 2;
 view.layer.cornerRadius = 4;

All subviews are clipped and u can keep ur border :).

Aragunz
  • 511
  • 5
  • 18