Creating animated progress bar in iOS

Question

I am trying to make a custom animated bar graph for an iPad application (i.e., bar height increases to set level when activated). I am quite new to iOS development and I just want to get feedback on how to approach this task.

I am trying to play around with the answer in this entry and I want to know if it's right that I'm starting from this point.

score 3 · Answer 1 · answered Sep 29 '11 at 05:20

If you just want a solid bar, you can create a UIView of the size and placement that you need, set its background color, and add it to your view. This is decent coding, no shame in using a UIView to draw solid rectangles. :]

For more complicated graphics, you might want to create a custom subclass of UIView and override its drawRect message to do some custom drawing. For example:

- (void)drawRect:(CGRect)rect
{
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(context, 4.0);
  CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0, 1.0); // opaque yellow
  CGContextMoveToPoint(context, x1, y1); // for suitable definition of x1,y1, etc
  CGContextAddLineToPoint(context, x2, y2);
  CGContextStrokePath(context);
}

or whatever other CGContext* sort of drawing you might want to do (e.g. pie charts, line charts, etc).

To animate a bar that you create by adding a UIView with a background color, stick the following whenever the animation starts:

timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(onTimer:) userInfo:nil repeats:YES];
self.startTime = [NSDate date];

and then add the following message (note: the bar will grow upwards).

- (void) onTimer:(NSTimer*)firedTimer
{
  float time = [self.startTime timeIntervalSinceNow] * -1;
  if (time>kMaxTime)
  {
    [timer invalidate];
    timer = nil;
    time = kMaxTime;
  }
  int size = time * kPixelsPerSecond;
  myBar.frame = CGRectMake(x, y - size, width, size);
}

The bar moves up (like a snake) instead of growing up. What could be the problem? — Kee, Oct 05 '11 at 03:51
Sounds like you're changing the y but not the size. Double-check the coordinates of everything to make sure that you're telling iOS to draw a taller bar. — AndrewS, Oct 05 '11 at 17:08
In this example, what are x1, x2, y1, y2, kMaxTime, x and y? I'm guessing the final x and y are the final coords for the bar to grow into? kPixelsPerSecond i'm guessing is the speed. — Alex, Aug 17 '12 at 18:48
they are whatever you want them to be... pick a number, any number. The best way to understand what's going on here is to try a few things; like 0,0 and 10,10, etc. kMaxTime is how long you want the animation to last. The point of my answer was to help the asker to get started drawing custom graphics objects. Once you can draw lines, it's easy to peruse the API to see how to do other stuff. — AndrewS, Aug 17 '12 at 18:52

score 0 · Answer 2 · answered Sep 29 '11 at 04:10

0

idk about that link, but you can generate them from here http://preloaders.net/ that should give you a good base to make your own

answered Sep 29 '11 at 04:10

albert

8,112
3
47
63

Thanks, but I actually need to do something like a grapher (set max value, set the height of the bar, and when you activate, it will slowly progress until it reaches the value indicated) that can be reused. So creating a custom preloader won't actually do. – Kee Sep 29 '11 at 04:19

Creating animated progress bar in iOS

2 Answers2

Linked