iPhone Circular Progress Indicator

Question

I'm trying to create a circular progress indicator like Shazam. It will represent progress during recording. There will be a finite amount of time and I want it to react to the sound level like Shazam's does. Any clues where to begin?

Thanks

score 3 · Answer 1 · answered May 19 '10 at 07:54

3

Subclass an UIView (maybe CircularProgress : UIView) and draw it manually with Quartz (paths, circles, etc) on the drawRect method passing the % of the progress as it changes.

answered May 19 '10 at 07:54

emenegro

6,901
10
45
68

yeah, I was thinking of that, but I guess I'm trying to figure out how to make the radius grow as the volume increases. thanks. – Ward May 19 '10 at 14:18

score 0 · Answer 2 · answered Nov 16 '13 at 06:02

I'm doing something similar here: https://github.com/DougFischer/DFCircleActivityIndicator

You can check my code and make something more appropriated. In my scenario, I'm drawing once and then I just rotate the image/layer. You'll need to animate the strokeEnd property using something like CABasicAnimation.

This property is animated and if you increase it from 0 to 1, you'll get the "filling effect". Again, in my scenario I need the empty center, probably you won't need it, your line width will be larger.

iPhone Circular Progress Indicator

2 Answers2