Search code examples
iphoneiosipadcore-animation

CAShapeLayer with border and fill color and rounding


How do I use CAShapeLayer to draw a line that has both a border color, border width and fill color?

Here's what I've tried, but it's only ever blue...

self.lineShape.strokeColor = [UIColor blueColor].CGColor;
self.lineShape.fillColor = [UIColor greenColor].CGColor;
self.lineShape.lineWidth = 100;
self.lineShape.lineCap = kCALineCapRound;
self.lineShape.lineJoin = kCALineJoinRound;
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:self.lineStart];
[path addLineToPoint:self.lineEnd];
self.lineShape.path = path.CGPath;

Solution

  • Swift 3+ extension method (combined from AechoLiu answer below):

    // Usage:
    self.btnGroup.roundCorner([.topRight, .bottomRight], radius: 4.0, borderColor: UIColor.red, borderWidth: 1.0)
    
    // Apply round corner and border. An extension method of UIView.
    public func roundCorner(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
    
    let path = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    self.layer.mask = mask
    
    let borderPath = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let borderLayer = CAShapeLayer()
    borderLayer.path = borderPath.cgPath
    borderLayer.lineWidth = borderWidth
    borderLayer.strokeColor = borderColor.cgColor
    borderLayer.fillColor = UIColor.clear.cgColor
    borderLayer.frame = self.bounds
    self.layer.addSublayer(borderLayer)
    
    }
    

    Objective-C:

    self.lineShapeBorder = [[CAShapeLayer alloc] init];
    self.lineShapeBorder.zPosition = 0.0f;
    self.lineShapeBorder.strokeColor = [UIColor blueColor].CGColor;
    self.lineShapeBorder.lineWidth = 25;
    self.lineShapeBorder.lineCap = kCALineCapRound;
    self.lineShapeBorder.lineJoin = kCALineJoinRound;
         
    self.lineShapeFill = [[CAShapeLayer alloc] init];
    [self.lineShapeBorder addSublayer:self.lineShapeFill];
    self.lineShapeFill.zPosition = 0.0f;
    self.lineShapeFill.strokeColor = [UIColor greenColor].CGColor;
    self.lineShapeFill.lineWidth = 20.0f;
    self.lineShapeFill.lineCap = kCALineCapRound;
    self.lineShapeFill.lineJoin = kCALineJoinRound;
      
    // ...
        
    UIBezierPath* path = [UIBezierPath bezierPath];
    [path moveToPoint:self.lineStart];
    [path addLineToPoint:self.lineEnd];
    // call addLineToPoint over and over to create the outline for the shape
    self.lineShapeBorder.path = self.lineShapeFill.path = path.CGPath;
    

    Also calling out @FarrasDoko comment to try changing borderWidth to lineWidth and borderColor to strokeColor.