Creating a triangle shape in UIButton

Question

I am trying to create a button with an icon / triangle shape. I created a triangle in Paintcode , then copied the beizer path and added it to the button layer, as shown below.

 -(void)setupShowHideRouteButton { UIBezierPath* bezierPath = UIBezierPath.bezierPath; [bezierPath moveToPoint: CGPointMake(10.5, 8.5)]; [bezierPath addCurveToPoint: CGPointMake(40.5, 8.5) controlPoint1: CGPointMake(39.5, 8.5) controlPoint2: CGPointMake(40.5, 8.5)]; [bezierPath addLineToPoint: CGPointMake(26.39, 22.3)]; [bezierPath addLineToPoint: CGPointMake(25.2, 23.5)]; [bezierPath addLineToPoint: CGPointMake(10.5, 8.5)]; [UIColor.blackColor setStroke]; bezierPath.lineWidth = 1; [bezierPath stroke]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = self.showHideRouteViewBtn.bounds; shapeLayer.path = bezierPath.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.strokeColor = [UIColor blackColor].CGColor; shapeLayer.lineWidth = 2; [self.showHideRouteViewBtn.layer addSublayer:shapeLayer]; } 

However, this does not work. I set the background color of UIButton, so I know that the frame is correct and the output works as expected, it just does not add shape?

Second approach

 UIBezierPath* bezierPath = UIBezierPath.bezierPath; [bezierPath moveToPoint: CGPointMake(10.5, 8.5)]; [bezierPath addCurveToPoint: CGPointMake(40.5, 8.5) controlPoint1: CGPointMake(39.5, 8.5) controlPoint2: CGPointMake(40.5, 8.5)]; [bezierPath addLineToPoint: CGPointMake(26.39, 22.3)]; [bezierPath addLineToPoint: CGPointMake(25.2, 23.5)]; [bezierPath addLineToPoint: CGPointMake(10.5, 8.5)]; [UIColor.blackColor setStroke]; bezierPath.lineWidth = 1; [bezierPath stroke]; // Create a mask layer and the frame to determine what will be visible in the view. CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; CGRect maskRect = self.showHideRouteViewBtn.bounds; // Create a path with the rectangle in it. CGPathRef path = CGPathCreateWithRect(maskRect, NULL); // Set the path to the mask layer. maskLayer.path = bezierPath.CGPath; // Release the path since it not covered by ARC. CGPathRelease(path); // Set the mask of the view. self.showHideRouteViewBtn.layer.mask = maskLayer; 

That didn't work either.

Answer 1

Try the following:

 CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = self.showHideRouteViewBtn.bounds; shapeLayer.path = bezierPath.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.strokeColor = [UIColor blackColor].CGColor; shapeLayer.lineWidth = 2; self.showHideRouteViewBtn.layer.mask = shapeLayer;