Creating a triangle shape in a UIButton

Question

I am trying to create a button with a triangle icon/shape in it. I have created the triangle in Paintcode then copied the beizer path and added it to the button layer as 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 appear to work. I am setting the background color of the UIButton so I know the frame is correct and outlet working as expected it is just not adding the 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's not covered by ARC.
CGPathRelease(path);

// Set the mask of the view.
self.showHideRouteViewBtn.layer.mask = maskLayer;

This did not work either.

Revengeful

Try masking the layer – Iceskate

If you set the backgroundColor of the shape layer, can you confirm that it’s correctly aligned inside the view? – Cleveland

@troop231 - See the second approach in question, this did not work for me either – Revengeful

Please provide your UIButton setup code so I can see the frame size, color, etc. – Iceskate

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;

Iceskate

Thanks, that did the trick. I also noticed a stupid mistake I made along the way which resolved it... Too late at night, my bad! Thanks – Revengeful

Gotta wait 5 mins, you'll get it :) – Revengeful