Stacked progress indicator swift - swift

Question

How can I create a stacked progress indicator to use with the interface builder like this one from the storage management?
Is there any similar cocoa control?
If there isn't, should I try with creating a custom view, in witch I add a new view inside every time i call a method like progress.add(width: 10.0, color: NSColor(...))?

Answer 1

I just made a function to draw some views, you can play with it a bit.
func drawStackedProgress(percentages:[Float], width:Float, height:Float, x:Float, y:Float){
var currentX = x
// I just threw a bunch of random (mostly probably ugly) colors in this array. Go ahead and make sure there's as many colors as stacked elements.
var colors = [UIColor.red, UIColor.blue, UIColor.green, UIColor.brown, UIColor.cyan]
var index = -1
for percentage in percentages{
index += 1
let DynamicView=UIView(frame: CGRect(x: CGFloat(currentX), y: CGFloat(y), width: CGFloat(Double(percentage)*Double(width)), height: CGFloat(height)))
currentX+=Float(Double(percentages[index])*Double(width))
DynamicView.backgroundColor=colors[index]
self.view.addSubview(DynamicView)
}
}
Implementation:
drawStackedProgress(percentages: [0.1,0.3,0.5,0.1], width: 200, height: 20, x: 200, y: 200)

Answer 2

Update: Translated code for a mac application.
Corrected index out of range for colors.
public func drawStackedProgress(percentages: [CGFloat], width: CGFloat, height: CGFloat, x: CGFloat, y: CGFloat){
var currentX = x
var colors = [NSColor.red, NSColor.blue, NSColor.green, NSColor.brown, NSColor.cyan]
var index = -1
for percentage in percentages{
index += 1
let DynamicView = NSView(frame: CGRect(x: currentX, y: y, width: percentage * width, height: height))
currentX += percentages[index] * width
// if the colors have been all used, it starts choosing again from the first
DynamicView.layer?.backgroundColor = colors[index % colors.count].cgColor
self.addSubview(DynamicView)
}
}

Answer 3

I've made this simple pod, you can check it: https://github.com/adriatikgashi/MultipleProgressBar
private lazy var multipleProgressView: MultiProgressView = {
let view = MultiProgressView()
return view
}()
private var kUsageModels = [
UsagesModel(color: .red, value: 110.58),
UsagesModel(color: .green, value: 5.23),
UsagesModel(color: .blue, value: 1.25),
UsagesModel(color: .yellow, value: 0.58),
UsagesModel(color: .purple, value: 0.31),
UsagesModel(color: .lightGray, value: 32.51),
]
// Update the multiprogressBar
multipleProgressView.updateViews(usageModels: kUsageModels)