是否可以在 UIProgressView 中添加多种颜色？答案

【问题标题】：Is it possible to add multiple colors in a UIProgressView?是否可以在 UIProgressView 中添加多种颜色？
【发布时间】：2015-02-27 21:06:35
【问题描述】：

基本上，我想创建一个自定义进度视图，该视图将根据进度值具有不同的颜色。它应该如下所示：

[-----红色----][--黄色--][-绿色-]

【问题讨论】：

当进度到达适当的区域时，您希望颜色堆叠，还是整个栏改变颜色？前者将要求您编写自定义 UI；后者只是随着进度值的变化而改变颜色的问题。
堆叠。是的，我想，我将不得不创建一个自定义 uiview。但想知道这是否可以实现。
这个功能你实现了吗？
创建了一个自定义 UIView，它添加了一个 1px 的 uiview 容器。自定义类也管理进程。
这可以通过检查这个答案的第二部分stackoverflow.com/a/71575844/4833705来实现。您可以使滑块或进度视图的轨道颜色清晰，将答案中的类放在其后面/下方，然后在进度时使用您选择的 caLayer 颜色进行动画处理

标签： ios calayer uiprogressview

【解决方案1】：

或者你可以看看这个库https://github.com/YannickL/YLProgressBar

【讨论】：

它似乎在演示中扩展了完整的渐变颜色。就我而言，我只希望它在某个点显示红色，然后显示黄色，然后显示绿色，具体取决于进度
YLProgressBar 现在通过将progressStretch 属性设置为NO 来支持这种功能。备注：我是项目的维护者。

【解决方案2】：

斯威夫特 5

我的方法是这样的，希望对你有所帮助。我将 4 个进度条堆叠在一个堆栈视图中。

struct statsData {
    var number: Int
    var name: String
    var color: UIColor
}

var data: [statsData] = []

data += [statsData(number: participants.filter{ $0.CATEGORY == "yde"}.count, name: "young", color: #colorLiteral(red: 0.02044569142, green: 0.5364668965, blue: 0.7812533975, alpha: 1)), statsData(number: participants.filter{ $0.CATEGORY == "del"}.count, name: "Delegate", color: #colorLiteral(red: 0.01050937176, green: 0.2793724537, blue: 0.4485790133, alpha: 1)), statsData(number: participants.filter{ $0.CATEGORY == "spk"}.count, name: "Speaker", color: #colorLiteral(red: 0.7677220702, green: 0.6388614774, blue: 0.03215418011, alpha: 1)), statsData(number: participants.filter{ $0.CATEGORY == "acc"}.count, name: "Companion", color: #colorLiteral(red: 0.9999409318, green: 0.5844026208, blue: 0.5724465251, alpha: 1))]


func percentageBar(){

        data = data.sorted{ $0.number < $1.number }
        //        Front
        Bar0.transform = CGAffineTransform(scaleX: 1, y: 3)
        Bar0.layer.cornerRadius = 4
        Bar0.clipsToBounds = true
        Bar0.progress = Float(100.0 / Float(total) * Float(data[0].number))/100
        Bar0.tintColor = data[0].color


        Bar1.transform = CGAffineTransform(scaleX: 1, y: 3)
        Bar1.layer.cornerRadius = 4
        Bar1.clipsToBounds = true
        Bar1.progress = Float(100.0 / Float(total) * Float(data[0].number + data[1].number))/100
        Bar1.tintColor = data[1].color


        Bar2.transform = CGAffineTransform(scaleX: 1, y: 3)
        Bar2.layer.cornerRadius = 4
        Bar2.clipsToBounds = true
        Bar2.progress = Float(100.0 / Float(total) * Float(data[0].number + data[1].number + data[2].number))/100
        Bar2.tintColor = data[2].color
        //      Back

        Bar3.transform = CGAffineTransform(scaleX: 1, y: 3)
        Bar3.layer.cornerRadius = 4
        Bar3.clipsToBounds = true
        Bar3.layer.sublayers![1].cornerRadius = 4
        Bar3.subviews[1].clipsToBounds = true
        Bar3.progress = Float(100.0 / Float(total) * Float(data[0].number + data[1].number + data[2].number + data[3].number))/100
        Bar3.tintColor = data[3].color


    }

【讨论】：

你能分享完整的例子吗？

【解决方案3】：

在某些图像编辑程序中创建具有所需颜色渐变的图像。
将图像放入您的资源库。

从相应的图像生成一个 UIImage 实例。

UIImage *image = [UIImage imageNamed:@"imageName"];

将 UIImage 实例分配给 UIProgressView 的 progressImage 属性。
```
self.progressView.progressImage = image;
```

【讨论】：

这不会只是扩展进度图像。在整个过程中，您仍然会看到完整的渐变颜色吗？
AFAIK 没有。进度的右侧部分由 trackImage 属性覆盖。