Slice a UIImageView into a custom shape

Question

I have a UIImageView that contains an image of a circle. I would like to be able to remove a portion of the image (while maintaining the transparency) to create the effect of a slice missing as shown below. My ultimate goal is to create something like the ITunes app, where as you play a song preview, the circle slowly fills in, in a clockwise direction.

Answer 1

If you don't need the image of the circle for anything other than the progress display, you could skip the UIImageView and just use CoreGraphics to draw the progress indicator. The basic steps would be:

1. Create a path - CGContextBeginPath
2. Add an arc using CGContextAddArc
3. Fill the path using CGContextFillPath
4. Close the path - CGContextClosePath

Repeat this for each progress step, changing the endpoint of your arc each time.

Answer 2

I've implemented a similar filling-up circle with the following code: (the delegate provides a value between 0 and 1)

- (void)drawRect:(CGRect)rect
{
CGFloat endAngle=([self.delegate giveCompletion]+0.75)*2*M_PI;

UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:self.center radius:self.bounds.size.width/(3) startAngle:0.75*2*M_PI endAngle:endAngle clockwise:YES];
[path addLineToPoint:self.center];
[path addLineToPoint:CGPointMake(self.center.x, self.center.y+self.bounds.size.width/(3)) ];
[path addClip];
[[UIColor blueColor]setFill];
UIRectFill(self.bounds);
}

I haven't figured out how to dynamically make it fill up yet, though I guess that this would depend heavily on the specific context where it is being used. Hope it is of any help! Cheers.