CODEWITHSUNDEEP
iosobjective-cxcodeuitableview
sinθ
sinθ

Reputation: 11493

Displaying "loading bar" in Table View Cell

I've looked around for how to do this, but other than the basics of creating your own table-view cell, I can't figure out how. What I'm trying to do it hard to describe, so I made this image to try and explain:

image

So what the program basically does is it plays songs, possible at the same time, after a wait. This entire wait+song is called in my program a cue. Each cue has its own table-view cell, which shows how much of it has played. This is the part I'm struggling with. The best way I can think of to display how much has played is like in the photo, with the blue representing how much of the song has played, the green representing how much of the wait time has played, and the entire thing representing how much of the cue has played. I can't figure out how to make a table view cell in which I can make an animated bar (b/c the song is playing) with variable amounts of green/blue area. Can anyone help?

If any of this is unclear or confusing, please comment so I can clarify.

Upvotes: 0

Views: 189

Answers (1)

D_4_ni
D_4_ni

Reputation: 901

You can set the backgroundView property of your cells to a custom subclass of UIView which has a drawRect method similar to this: 

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextFillRect(context, rect);
    CGRect blueRect = CGRectMake(0, 0, self.bluePercentage/100.0*rect.size.width, rect.size.height);
    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
    CGContextFillRect(context, blueRect);
    CGRect greenRect = CGRectMake(0, 0, self.greenPercentage/100.0*rect.size.width, rect.size.height);
    CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 1.0);
    CGContextFillRect(context, greenRect);
}

You get the point: fill with white first (default background is black), paint blue bar over it, paint green bar over blue bar. bluePercentage and redPercentage are properties you'll have to set yourself.

Also, everytime you update the progress, you'll have to call [cell setNeedsDisplay] to tell the cell to redraw the progress bar.

Upvotes: 1

Related Questions