How to create a multi colour progress view with different values for each colour

Question

I've tried different ways and other resources on how to create a progress bar with 3 different colours and show progress according the values provided from the server but i can't find anything. How can i create a progress bar like this one below. I want to show the progress according to the values i can get from the backend which can change for different users. Here is the example json. Green -> "Won", Red -> "Lost" and darkGray -> "undecided"

"condition": {
          "won": 2,
          "lost": 3,
          "undecided": 0
        }

I'd draw myself 3 "bars" (maybe 3 `UIView`). It's should be better than customising the `UIProgressView` which isn't really made for that. — Larme, Apr 01 '21 at 09:11
This can be achieved by checking the 2nd part of this answer https://stackoverflow.com/a/71575844/4833705 — Lance Samaria, Mar 23 '22 at 16:36

score 0 · Answer 1 · answered Apr 01 '21 at 10:34


- (void)setCurrentProgressWithIndex1:(float)index1 index2:(float)index2 index3:(float)index3 {
    _index1 = index1;
    _index2 = index2;
    _index3 = index3;
    
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [self drawProgressWithContext:ctx];
}

- (void)drawProgressWithContext:(CGContextRef)ctx {
    float width = self.frame.size.width;
    //  index
    float start_index = 0.0f;
    if (_index1 != 0.0f) {
        UIBezierPath* bezierPath = UIBezierPath.bezierPath;
        bezierPath.lineCapStyle = kCGLineCapRound;
        bezierPath.lineJoinStyle = kCGLineJoinBevel;
        [bezierPath moveToPoint: CGPointMake(start_index, 0)];
        [bezierPath addLineToPoint: CGPointMake(start_index, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index1, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index1, 0)];
        [UIColor.redColor setFill];
        [bezierPath fill];
        start_index += width * _index1;
    }
    
    if (_index2 != 0.0f) {
        UIBezierPath* bezierPath = UIBezierPath.bezierPath;
        bezierPath.lineCapStyle = kCGLineCapRound;
        bezierPath.lineJoinStyle = kCGLineJoinBevel;
        [bezierPath moveToPoint: CGPointMake(start_index, 0)];
        [bezierPath addLineToPoint: CGPointMake(start_index, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index2, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index2, 0)];
        [UIColor.greenColor setFill];
        [bezierPath fill];
        start_index += width * _index2;
    }

    if (_index3 != 0.0f) {
        UIBezierPath* bezierPath = UIBezierPath.bezierPath;
        bezierPath.lineCapStyle = kCGLineCapRound;
        bezierPath.lineJoinStyle = kCGLineJoinBevel;
        [bezierPath moveToPoint: CGPointMake(start_index, 0)];
        [bezierPath addLineToPoint: CGPointMake(start_index, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index3, 20)];
        [bezierPath addLineToPoint: CGPointMake(start_index + width * _index3, 0)];
        [UIColor.blueColor setFillx];
        [bezierPath fill];
    }
}

Shivam Parmar · Accepted Answer · 2021-04-02T03:58:52.103

-1

you can use this framework to get the output

https://github.com/minjoongkim/MJProgressView

another related framework

edited Apr 02 '21 at 03:58

answered Apr 01 '21 at 09:48

Shivam Parmar

1,520
11
27

While this may answer the question, posting links-only to other sites is a bad idea... links can go away. Either provide enough detail to make the answer useful *if the link becomes invalid*, or make this a comment, not an answer... review [answer]. – DonMag Apr 01 '21 at 14:24

How to create a multi colour progress view with different values for each colour

2 Answers2