Draw triangle cutout for selection indication in UIView

Question

I\'m creating a view that serves as a category selector for my app. I\'d like it to have a cutout triangle as the selection indication, as in this image:

Answer 1

Have you looked at the CAShapeLayer? You can create a path for your selection pane that defines the whole outline including the exclusion of the triangle for each state you need to mask. You can then stroke the layer if you want the outline you're showing in your image by setting the lineWidth and strokeColor properties. That should be able to give you what you need. The path property in the CAShapeLayer is animatable which means that all you have to do is set the path property and it will animate (assuming your layers are sublayers of the view and not the root layer).

Best Regards.

Update With Code

This code:

- (void)viewDidLoad
{
  [super viewDidLoad];

  [[self view] setBackgroundColor:[UIColor blueColor]];

  CGMutablePathRef path = CGPathCreateMutable();
  CGPathMoveToPoint(path,NULL,0.0,0.0);
  CGPathAddLineToPoint(path, NULL, 160.0f, 0.0f);  
  CGPathAddLineToPoint(path, NULL, 160.0f, 100.0f);
  CGPathAddLineToPoint(path, NULL, 110.0f, 150.0f);
  CGPathAddLineToPoint(path, NULL, 160.0f, 200.0f);
  CGPathAddLineToPoint(path, NULL, 160.0f, 480.0f);
  CGPathAddLineToPoint(path, NULL, 0.0f, 480.0f);
  CGPathAddLineToPoint(path, NULL, 0.0f, 0.0f);


  CAShapeLayer *shapeLayer = [CAShapeLayer layer];
  [shapeLayer setPath:path];
  [shapeLayer setFillColor:[[UIColor redColor] CGColor]];
  [shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
  [shapeLayer setBounds:CGRectMake(0.0f, 0.0f, 160.0f, 480)];
  [shapeLayer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
  [shapeLayer setPosition:CGPointMake(0.0f, 0.0f)];
  [[[self view] layer] addSublayer:shapeLayer];

  CGPathRelease(path);

}

results in this display:

And you can download the sample project here:

https://dzwonsemrish7.cloudfront.net/items/180s2a200N2i3b0y1g37/ArrowIndicator.zip