带有渐变的 UIProgressView

Posted 2023-02-23

【中文标题】带有渐变的 UIProgressView

【英文标题】：UIProgressView with gradient

【发布时间】：2012-11-01 16:28:28

【问题描述】：

有没有办法让progressTintColor 做一个渐变？具体来说，我想让它成为从绿色到红色的渐变色 - 标准温度模式。

添加子图层不起作用，因为它将图层放在视图“后面”：

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.testBar.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor greenColor] CGColor], (id)[[UIColor redColor] CGColor], nil];
[self.testBar.layer insertSublayer:gradient atIndex:0];

【参考方案1】：

您可以尝试创建 patterned UIColor 并将其设置为 tint 颜色，但我怀疑它会起作用。

否则，您可能需要继承 UIProgressView 或构建自己的 UIView 子类。进度条并不难画。

【参考方案2】：

我发现了这个，它在我的本地运行得很好

https://medium.com/academy-poa/how-to-create-a-uiprogressview-with-gradient-progress-in-swift-2d1fa7d26f24

1.Extent UIImage

    extension UIImage 
    
        public convenience init?(bounds: CGRect, colors: [UIColor], orientation: GradientOrientation = .horizontal) 
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = bounds
            gradientLayer.colors = colors.map( $0.cgColor )
            
            if orientation == .horizontal 
                gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5);
                gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5);
            
            
            UIGraphicsBeginImageContext(gradientLayer.bounds.size)
            gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            
            guard let cgImage = image?.cgImage else  return nil 
            self.init(cgImage: cgImage)
        
    

public enum GradientOrientation 
    case vertical
    case horizontal

创建自己的渐变进度条

导入 UIKit

class GradientProgressView: UIProgressView 
    
@IBInspectable var firstColor: UIColor = UIColor.white 
    didSet 
        updateView()
    


@IBInspectable var secondColor: UIColor = UIColor.black 
    didSet 
        updateView()
    


func updateView() 
            
    if let gradientImage = UIImage(bounds: self.bounds, colors: [firstColor, secondColor]) 
        self.progressImage = gradientImage
    

在你的班级

让progressView = GradientProgressView(progressViewStyle: .bar)

 progressView.firstColor = UIColor(red: 0.949, green: 0.478, blue: 0.329, alpha: 1) //your own color
 progressView.secondColor = UIColor(red: 0.631, green: 0.329, blue: 0.949, alpha: 1) //your own color
 progressView.updateView()