w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Progress view with secondary progress for objective C (three colored progress bar)

he solution I came up with is fairly simple, and works beautifully for my needs.

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 want.

First, you make three Labels. enter image description

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
    questions (max)
    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 them beforehand.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.