如何为每种颜色创建具有不同值的多色进度视图

Question

我尝试了不同的方法和其他资源来创建具有 3 种不同颜色的进度条并根据服务器提供的值显示进度，但我找不到任何东西。我怎样才能创建一个像下面这样的进度条。我想根据我可以从后端获得的值来显示进度，这些值可以针对不同的用户进行更改。这是示例 json。绿色 -> “获胜”，红色 -> “失败”和深灰色 -> “未决定”

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

Answer 1

你可以使用这个框架来获得输出

https://github.com/minjoongkim/MJProgressView

另一个相关框架

Answer 2


- (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];
    }
}

如何为每种颜色创建具有不同值的多色进度视图

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

uiprogressview

ios

progress-bar

swift