渐变环形进度条

关于ios渐变环形进度条网上方法很多，我们可以使用lay来实现。这里提供第三种实现思路

1.继承UIView，重写OnDraw
2.绘画一个渐变色的正方形
3.假设圆环宽度W，则在以正方形中心为圆心，半径为R =(L/2)-W,圆环填充背景色，此时则可以看见一个渐变的圆环。
4.此时以画笔宽度为W，半径为R，绘画圆环的默认背景色，进行渐变圆环覆盖
5.设置UIView的layer圆角为L/2，此时一个完整的渐变圆就出来了
6.当进度发生改变的时候，调用setNeedsDisplay，重新绘画即可

以下是源码

class UIGradientArc:UIView{
    let PIE:CGFloat = CGFloat(Double.pi)
    
    var progress:Int = 0
    let obsolateView = UIObsolateView()
    let progressLabel = UILabel()
    let img = UIImageView()
    override init(frame: CGRect) {
        super.init(frame: frame)
        initView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initView()
    }
   
    func setProgress(progress:Int){
        self.progress = progress
        progressLabel.text = String.init(format: "%02d", progress)
        img.isHidden = (progress < 100)
        
        setNeedsDisplay()
    }
    
    func setImg(url:String,imgdefault:String){
        if !url.isEmpty{
            let uri = URL(string: url)
            if uri != nil{
                img.kf.setImage(with: uri,placeholder: UIImage(named: imgdefault))
                return
            }
        }
        
        img.image = UIImage(named: imgdefault)
    }
    
    open func initView(){
        self.layer.masksToBounds = true
        
        img.contentMode = .scaleAspectFit
        
        let InfoPannel = UIVerticalView()
        let icon_pannel = UIHorizontalView()
        icon_pannel.lv_set_height(value: 30)
        
        let icon_img = UIImageView()
        icon_img.contentMode = .scaleAspectFit
        icon_img.image = UIImage(named: "lightning")
        icon_img.lv_set_width(value: 30)
        
        icon_pannel.addSubview(UIView())
        icon_pannel.addSubview(icon_img)
        icon_pannel.addSubview(UIView())
        
        progressLabel.textAlignment = .center
        progressLabel.textColor = AppColor.text_gold
        progressLabel.font = UIFont.systemFont(ofSize: 33, weight: .bold)
        progressLabel.text = String.init(format: "%02d", progress)
        progressLabel.lv_set_height(value: progressLabel.text!.getSize(font: progressLabel.font).height + 10)
        
        let symbolLabel = UILabel()
        symbolLabel.textAlignment = .center
        symbolLabel.textColor = AppColor.text_gold
        symbolLabel.text = "%"
        symbolLabel.font = symbolLabel.font.withSize(16)
        symbolLabel.lv_set_height(value: symbolLabel.text!.getSize(font: symbolLabel.font).height + 2)
        InfoPannel.addSubview(UIView())
        InfoPannel.addSubview(icon_pannel)
        InfoPannel.addSubview(progressLabel)
        InfoPannel.addSubview(symbolLabel)
        InfoPannel.addSubview(UIView())

        img.isHidden = (progress < 100)
        obsolateView.addSubview(InfoPannel)
        obsolateView.addSubview(img)
        
        
        addSubview(obsolateView)
    }
    
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = self.bounds.width/2
        obsolateView.frame = CGRect(x: 7, y: 7, width: bounds.width - 14, height: bounds.height - 14)
        obsolateView.layer.cornerRadius = (self.bounds.width - 14)/2
        obsolateView.layer.masksToBounds = true
    }
    
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        
        //计算圆的半径
        var R = rect.width/2
        if R > rect.height/2{
            R = rect.height/2
        }
        
        //圆点
        let orignPoint = CGPoint(x: rect.width/2 + rect.origin.x, y: rect.height/2 + rect.origin.y)
        //渐变色
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let locations:[CGFloat] = [1,0]
        let startC = UIColor(red: 0xff/255.0, green: 0xf6/255.0, blue: 0x00/255.0, alpha: 1.0)
        let endC = UIColor(red: 0xf7/255.0, green: 0xc0/255.0, blue: 0x00/255.0, alpha: 1.0)
        let colors = [startC.cgColor,endC.cgColor]
        let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations)
        context?.drawLinearGradient(gradient!, start: CGPoint(x: 0, y: 0), end: CGPoint(x: rect.width, y: 0), options: CGGradientDrawingOptions.drawsBeforeStartLocation)
        
        
        //渐变色弧
        context?.addArc(center: orignPoint, radius: R - 4, startAngle:0, endAngle: 2*PIE, clockwise: true)
        context?.setFillColor(AppColor.main_them.cgColor)
        context?.fillPath()
        
        //画圆背景
        if progress < 100{
            context?.setLineWidth(8)
            context?.setStrokeColor(UIColor(red: 0x55/255.0, green: 0x55/255.0, blue: 0x5d/255.0, alpha: 1.0).cgColor)
            let startAngle = (CGFloat(progress)/100.0*2.0 - 0.5)*PIE
            context?.addArc(center: orignPoint, radius: R, startAngle:startAngle, endAngle: 1.5*PIE, clockwise: false)
            context?.strokePath()
        }
       
    }
}