Question

如何创建堆叠进度指示器以与存储管理中的接口构建器一起使用？

是否有类似的可可控制？

如果没有，我应该尝试创建一个自定义视图，我会在每次调用progress.add(width: 10.0, color: NSColor(...))?

之类的方法时添加一个新视图

Answer 1

我刚刚创建了一个绘制一些视图的函数，你可以稍微玩一下。

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)
        }

    }

实现：

drawStackedProgress(percentages: [0.1,0.3,0.5,0.1], width: 200, height: 20, x: 200, y: 200)

Answer 2

更新：mac应用程序的翻译代码。修正了超出颜色范围的索引。

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

我做了这个简单的pod，你可以查看：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)

堆叠的进度指示器迅速

3 个答案: