ios swift 环形进度条 圆角

请添加图片描述

1.CircleProgressView

import Foundation
import UIKit

class CircleProgressView: UIView {
    
    
    // 灰色静态圆环
    var staticLayer: CAShapeLayer!
    // 进度可变圆环
    var arcLayer: CAShapeLayer!
    
    // 为了显示更精细,进度范围设置为 0 ~ 1000
    var progress = 0

    override init(frame: CGRect) {
    
    
        super.init(frame: frame)

    }

    required init?(coder: NSCoder) {
    
    
        fatalError("init(coder:) has not been implemented")
    }
    
    func setProgress(_ progress: Int) {
    
    
        self.progress = progress
        setNeedsDisplay()
    }
    
    override func draw(_ rect: CGRect) {
    
    
        if staticLayer == nil {
    
    
            //244 233 200
            staticLayer = createLayer1(1000, UIColor.rgbColor(red: 244, green: 233, blue: 200))
            self.layer.addSublayer(staticLayer)
        }
       
        if arcLayer != nil {
    
    
            arcLayer.removeFromSuperlayer()
        }
        arcLayer = createLayer(self.progress, newUIYellow)
        self.layer.addSublayer(arcLayer)
    }
    
    private func createLayer(_ progress: Int, _ color: UIColor) -> CAShapeLayer {
    
    
        let endAngle = -CGFloat.pi / 2 + (CGFloat.pi * 2) * CGFloat(progress) / 1000
        let layer = CAShapeLayer()
        layer.lineWidth = 20
        layer.strokeColor = color.cgColor
        layer.fillColor = UIColor.clear.cgColor
        layer.lineCap = .round
        let radius = self.bounds.width / 2
//        let radius = self.bounds.width / 2 - layer.lineWidth
        let path = UIBezierPath.init(arcCenter: CGPoint(x: bounds.width / 2, y: bounds.height / 2), radius: radius, startAngle: -CGFloat.pi / 2, endAngle: endAngle, clockwise: true)
        
        layer.path = path.cgPath
        return layer
    }
    
    private func createLayer1(_ progress: Int, _ color: UIColor) -> CAShapeLayer {
    
    
        let endAngle = -CGFloat.pi / 2 + (CGFloat.pi * 2) * CGFloat(progress) / 1000
        let layer = CAShapeLayer()
        layer.lineWidth = 1.5
        layer.strokeColor = color.cgColor
        layer.fillColor = color.cgColor
        let radius = self.bounds.width / 2 - layer.lineWidth
        let path = UIBezierPath.init(arcCenter: CGPoint(x: bounds.width / 2, y: bounds.height / 2), radius: radius, startAngle: -CGFloat.pi / 2, endAngle: endAngle, clockwise: true)
        layer.path = path.cgPath
        return layer
    }

}



2.使用viewController

    let progressView = CircleProgressView()
    
    override func viewDidLayoutSubviews() {
    
    
//        radarBackView.addSubview(radarView)
        radarBackView.addSubview(progressView)
        progressView.snp.makeConstraints {
    
     make in
            make.center.equalToSuperview()
            make.width.height.equalTo(200)
        }
        
    }
    
    var timer = Timer()
    var progress = 0
    
    override func viewDidAppear(_ animated: Bool) {
    
    
        super.viewDidAppear(animated)
        weak var  weakSelf = self
        timer = Timer.scheduledTimer(withTimeInterval: TimeInterval(0.4), repeats: true, block:{
    
    (timer: Timer) -> Void in
            if weakSelf!.progress == 1000 {
    
    
                weakSelf!.progress = 0
            }
            weakSelf!.progress = weakSelf!.progress + 50
            weakSelf?.progressView.setProgress(weakSelf!.progress)
                            })
    }
    
    override func viewWillDisappear(_ animated: Bool) {
    
    
//        radarView.timer.invalidate()
        timer.invalidate()
        XYCentralManager.shared.stopScan()
    }

3.设置圆角

        layer.lineCap = .round

参考博客

iOS-Swift-圆环进度条 - 博客园
canvas绘制圆角环形图 - Haorooms

猜你喜欢

转载自blog.csdn.net/baidu_40537062/article/details/129569110