帶有漸變的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

我有同樣的問題，並通過創建一個漸變自定義視圖，然後轉換爲圖像並將其分配爲進度視圖軌道圖像解決它。

然後我水平翻轉進度，以便進度條變爲背景，並且軌跡圖像變爲前景。

這具有揭示下面的梯度圖像的視覺效果。

你只需要記住反轉的百分比是非常簡單的，見例如按鈕和下面的代碼：

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

}