Swift实现自定义进度条

效果图如下：

image.png

实现代码如下:

import UIKit

@IBDesignable public class CustomProgressView: UIView {
    // MARK: 1.lift cycle
    
    override public init(frame: CGRect) {
        super.init(frame: frame)
        layer.addSublayer(progressLayer)
        layer.masksToBounds = true
        progressLayer.masksToBounds = true
        self.addSubview(imageView)
        imageView.frame = CGRect(x: 10, y: -5, width: 20, height: 20)
    }
    
    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: 2.private methods
    override public func draw(_ rect: CGRect) {
        var frameProgress = CGRect(x: rect.origin.x, y: rect.origin.y + 5, width: rect.size.width, height: rect.size.height - 5)
        frameProgress.size.width = progress * rect.width
        
        progressLayer.colors = [startColor.cgColor, endColor.cgColor]
        progressLayer.cornerRadius = progressCornerRadius
        progressLayer.borderColor = progressBorderColor.cgColor
        progressLayer.borderWidth = progressBorderWidth
        layer.cornerRadius = progressCornerRadius
        
        var imageFrame = rect
        imageFrame.origin.x = progress * rect.width - 20
        imageFrame.origin.y = 0
        imageFrame.size = CGSize(width: 20, height: 20)
        
        UIView.animate(withDuration: 0.2, animations: {
            self.progressLayer.frame = frameProgress
        }) { (finish) in
            UIView.animate(withDuration: 0.2, animations: {
                self.imageView.frame = imageFrame
            }, completion: nil)
        }
    }
    // MARK: 3.event response
    
    // MARK: 4.interface
    @IBInspectable public var startColor: UIColor = .red {
        didSet {
            setNeedsDisplay()
        }
    }
    
    @IBInspectable public var endColor: UIColor = .yellow {
        didSet {
            setNeedsDisplay()
        }
    }
    
    @IBInspectable public var progress: CGFloat = 0.0 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    @IBInspectable public var progressCornerRadius: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }
    
    @IBInspectable public var progressBorderColor: UIColor = UIColor.yellow {
        didSet {
            setNeedsLayout()
        }
    }
    
    @IBInspectable public var progressBorderWidth: CGFloat = 1 {
        didSet {
            setNeedsLayout()
        }
    }
    
    // MARK: 5.getter
    private lazy var progressLayer: CAGradientLayer = {
        let progressLayer = CAGradientLayer()
        progressLayer.frame = CGRect.zero
        progressLayer.locations = [0, 1]
        progressLayer.startPoint = CGPoint(x: 0, y: 1)
        progressLayer.endPoint = CGPoint(x: 1, y: 1)
        return progressLayer
    }()
    
    private lazy var imageView: UIImageView = {
       let imageView = UIImageView(image: UIImage(named: "scale_big"))
        return imageView
    }()
}

使用如下:

private lazy var progressView: CustomProgressView = {
        let progressView = CustomProgressView()
        progressView.backgroundColor = UIColor.clear
        progressView.startColor = UIColor.red
        progressView.endColor = UIColor.green
        progressView.progressCornerRadius = 10
        progressView.progress = 0.1
        view.addSubview(progressView)
        return progressView
    }()

PS：不过因为我们的设计图还存在纹理的一个效果，最后我还是让UI切图实现的，哈哈。不过可能切图可能还好点吧，毕竟不用一直绘制哈，是不是性能好那么点呢~~