iOS UIProgressView с градиентом

Question

Возможно ли создать пользовательский вид прогресса ui с градиентом слева направо?

Я пытался сделать это с помощью следующего кода:

let gradientLayer = CAGradientLayer() 
    gradientLayer.frame = self.frame 

    gradientLayer.anchorPoint = CGPoint(x: 0, y: 0) 
    gradientLayer.position = CGPoint(x: 0, y: 0) 

    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0); 
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0); 

    gradientLayer.colors = [ 
     UIColor.red, 
     UIColor.green 
    ] 

    // Convert to UIImage 
    self.layer.insertSublayer(gradientLayer, at: 0) 
    self.progressTintColor = UIColor.clear 
    self.trackTintColor = UIColor.black 

Но, к сожалению, градиент не видно. Любые другие идеи?

Answer 1

У меня была такая же проблема, и я решил ее, создав градиентный пользовательский вид, который затем конвертирую в изображение и назначаю его как изображение трека прогресса.

Затем я поворачиваю ход по горизонтали, чтобы индикатор хода становился фоном, а изображение дорожки становится передним планом.

Это визуальный эффект, показывающий изображение градиента снизу.

Вы просто должны помнить, инвертировать ваши проценты, которые действительно просто, см пример кнопки и код ниже:

СВИФТ 3 Пример:

class ViewController: UIViewController { 

    @IBOutlet weak var progressView: UIProgressView! 

    @IBAction func lessButton(_ sender: UIButton) { 
     let percentage = 20 
     let invertedValue = Float(100 - percentage)/100 
     progressView.setProgress(invertedValue, animated: true) 
    } 

    @IBAction func moreButton(_ sender: UIButton) { 
     let percentage = 80 
     let invertedValue = Float(100 - percentage)/100 
     progressView.setProgress(invertedValue, animated: true) 
    } 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     //create gradient view the size of the progress view 
     let gradientView = GradientView(frame: progressView.bounds) 

     //convert gradient view to image , flip horizontally and assign as the track image 
     progressView.trackImage = UIImage(view: gradientView).withHorizontallyFlippedOrientation() 

     //invert the progress view 
     progressView.transform = CGAffineTransform(scaleX: -1.0, y: -1.0) 

     progressView.progressTintColor = UIColor.black 
     progressView.progress = 1 

    } 

} 

extension UIImage{ 
    convenience init(view: UIView) { 

     UIGraphicsBeginImageContext(view.frame.size) 
     view.layer.render(in: UIGraphicsGetCurrentContext()!) 
     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     self.init(cgImage: (image?.cgImage)!) 

    } 
} 

@IBDesignable 
class GradientView: UIView { 

    private var gradientLayer = CAGradientLayer() 
    private var vertical: Bool = false 

    override func draw(_ rect: CGRect) { 
     super.draw(rect) 
     // Drawing code 

     //fill view with gradient layer 
     gradientLayer.frame = self.bounds 

     //style and insert layer if not already inserted 
     if gradientLayer.superlayer == nil { 

      gradientLayer.startPoint = CGPoint(x: 0, y: 0) 
      gradientLayer.endPoint = vertical ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0) 
      gradientLayer.colors = [UIColor.green.cgColor, UIColor.red.cgColor] 
      gradientLayer.locations = [0.0, 1.0] 

      self.layer.insertSublayer(gradientLayer, at: 0) 
     } 
    } 

}