// // StepCircleView.swift // Twear // // Created by yangbin on 2022/1/6. // import UIKit class StepCircleView: UIView { private lazy var bgLayer: CAShapeLayer = CAShapeLayer() // 延迟初始化进度条层,采用 stroke 来绘制边框 private lazy var progressLayer: CAShapeLayer = CAShapeLayer() var value: Int = 0 { didSet { progressLayer.strokeEnd = CGFloat(value)/100 } } @IBOutlet weak var stepLabel: UILabel! override init(frame: CGRect) { super.init(frame: frame) initFromNib() setupUI() } required init?(coder: NSCoder) { super.init(coder: coder) initFromNib() setupUI() } override class func awakeFromNib() { super.awakeFromNib() } private func setupUI() { // 0.25 透明度的白色背景 bgLayer.fillColor = nil bgLayer.strokeColor = LineColor.cgColor bgLayer.lineWidth = 10 layer.addSublayer(bgLayer) // 边框全白,边框宽度为 4 // progressLayer = CAShapeLayer() progressLayer.fillColor = nil progressLayer.strokeColor = UIColor.rgbColorFromHex(0x1DDCC5).cgColor progressLayer.lineWidth = 10 layer.addSublayer(progressLayer) let radius = bounds.height / 2 - 5 let end = CGFloat(Double.pi * 2) - CGFloat(Double.pi / 2) bgLayer.path = UIBezierPath(arcCenter: CGPoint(rect: bounds), radius: radius, startAngle: -CGFloat(Double.pi / 2), endAngle: end, clockwise: true).cgPath // = progressPath.cgPath // 设置 start 从 12点钟方向开始(默认是3点钟方向) // end = 360度 * progress - start // 设置为 顺时针 方向 let progressPath = UIBezierPath(arcCenter: CGPoint(rect: bounds), radius: radius, startAngle: -CGFloat(Double.pi / 2), endAngle: end, clockwise: true) progressLayer.lineCap = .round progressLayer.path = progressPath.cgPath progressLayer.strokeEnd = 0 } private func initFromNib() { if let view = UINib(nibName: "StepCircleView", bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView { view.frame = bounds self.addSubview(view) } } override func layoutSubviews() { refreshUI() } private func refreshUI() { } /* // Only override draw() if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func draw(_ rect: CGRect) { // Drawing code } */ }