Is it possible to add multiple colors in a UIProgressView?

Question

Basically, I want to create a custom progressview that will have different colors depending on the progress value. It should look like the following:

[-----Red----][--Yellow--][-Green-]

Answer 1

1. Create an image that has the desired color gradient in some image editing program.

2. Put the image into your asset library.

3. Generate a UIImage instance from the respective image.

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

4. Assign the UIImage instance to the progressImage property of UIProgressView.

    self.progressView.progressImage = image;

Answer 2

Or you can look at this library https://github.com/YannickL/YLProgressBar

Answer 3

Swift 5

My approach was this, hope this helps you. I piled 4 progres bars on top of each other and inside a stackView.

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


    }