he solution I came up with is fairly simple, and works beautifully for
I would simply make three labels, with different colors i need, and set
their width accordingly.
Also, by doing this, I was able to set progress bar height to as much I
First, you make three Labels.
You will want to place them one on top of another, to achieve that
progress bar look.
I placed the pic below, showing how they actually look.
Gray part of the progress bar will never change it's width (Which we set
to be 280for example)
If there is nothing to show, just put _redLabel and _greenLabel width to 0,
and you get the progress bar that is not set.
If you want to show the case where there are total of
- 10 questions a student has to answer
- 8 he answered
4 answered right (green) 4 answered wrong (red)
//question size represents width of one question on progress
bar. You just divide the width of the entire bar with number of possible
int questionSize = 280 / num_possible_question;
int greenProgressSize = green * questionSize;
CGRect greenProgress = CGRectMake( 20, 95, greenProgressSize, 8 );
cell.greenLabel.frame = greenProgress;
int redProgressSize = (red+green) * questionSize;
CGRect redProgress = CGRectMake( 20, 95, redProgressSize, 8 );
cell.redLabel.frame = redProgress;
CGRect grayProgress = CGRectMake( 20, 95, 280, 8 );
cell.grayLabel.frame = grayProgress;
And there you go. You have your own progress bar. You can set the width
and height as you want, you can set the colors you want and you can even
add as much labels as you want.
Also, you can make all those labels programmatically, no need to define