6

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-]

Frank
  • 3,073
  • 5
  • 40
  • 67
  • Do you want the colors stacked, or the whole bar to change color when progress reaches the appropriate zone? The former will require you to write custom UI; the later is just a matter of changing the color as the progress value changes. – i_am_jorf Feb 27 '15 at 21:09
  • Stacked. Yea I imagine, I would have to create an custom uiview. But was wondering if this is achievable. – Frank Feb 27 '15 at 21:11
  • have you achieved this functionality? – BhavikKama Dec 24 '15 at 11:47
  • Created a custom UIView that adds a 1px uiview container. The custom class manages the progressions as well. – Frank Jan 05 '16 at 20:02
  • This can be achieved by checking the 2nd part of this answer https://stackoverflow.com/a/71575844/4833705. You can make the track colors of the slider or a progressView clear, put the class from the answer behind/underneath it, then animate using the caLayer colors of your choice as it progresses – Lance Samaria Mar 23 '22 at 16:37

3 Answers3

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;
pkamb
  • 33,281
  • 23
  • 160
  • 191
Earl Grey
  • 7,426
  • 6
  • 39
  • 59
  • wouldn't this just expand on the progress image. you would still see the full gradient color throughout the whole progress? – Frank Mar 03 '15 at 16:35
  • AFAIK no. The right part of progress is covered by the trackImage property. – Earl Grey Mar 03 '15 at 16:37
1

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

  • it seems in the demo it expands the full gradient color. in my case, i just want it to display red at certain point then yellow then green depending on the progress – Frank Mar 03 '15 at 16:36
  • The `YLProgressBar` now supports this kind of features by setting the `progressStretch` property to `NO`. Notes: I'm the maintainer of the project. – Yannick Loriot Sep 01 '15 at 07:33
1

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


    }
rh16
  • 1,056
  • 14
  • 24
Bernardo
  • 11
  • 2