HomeiOS Developmentios - Drawing Progress Bar

ios – Drawing Progress Bar


I’ve a rounded rectangular progress bar through a UIBezierPath and CAShapeLayer. The progress stroke animated at present attracts 360 levels clockwise starting from high middle.

My present setup has the stroke beginning at 315 levels, however ends at high middle, and am admittedly misplaced. My objective is to begin/finish the stroke at 315 levels. Any steering can be appreciated!

class ProgressBarView: UIView {
    
    let progressLayer = CAShapeLayer()
    let cornerRadius: CGFloat = 20
    
    override init(body: CGRect) {
        tremendous.init(body: body)
        setupProgressLayer()
    }
    
    required init?(coder aDecoder: NSCoder) {
        tremendous.init(coder: aDecoder)
        setupProgressLayer()
    }
    
    personal func setupProgressLayer() {
        
        progressLayer.lineWidth = 6
        progressLayer.fillColor = nil
        progressLayer.strokeColor = Constants.type.offWhite.cgColor
        progressLayer.strokeStart = 135 / 360
        progressLayer.lineCap = .spherical
        
        
        let lineWidth: CGFloat = 6
        let radius = bounds.peak / 2 - lineWidth / 2
        let progressPath = UIBezierPath()
        progressPath.transfer(to: CGPoint(x: lineWidth / 2 + cornerRadius, y: lineWidth / 2))
        progressPath.addLine(to: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: lineWidth / 2))
        progressPath.addArc(withCenter: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: lineWidth / 2 + cornerRadius), radius: cornerRadius, startAngle: -CGFloat.pi / 2, endAngle: 0, clockwise: true)
        progressPath.addLine(to: CGPoint(x: bounds.width - lineWidth / 2, y: bounds.peak - lineWidth / 2 - cornerRadius))
        progressPath.addArc(withCenter: CGPoint(x: bounds.width - lineWidth / 2 - cornerRadius, y: bounds.peak - lineWidth / 2 - cornerRadius), radius: cornerRadius, startAngle: 0, endAngle: CGFloat.pi / 2, clockwise: true)
        progressPath.addLine(to: CGPoint(x: lineWidth / 2 + cornerRadius, y: bounds.peak - lineWidth / 2))
        progressPath.addArc(withCenter: CGPoint(x: lineWidth / 2 + cornerRadius, y: bounds.peak - lineWidth / 2 - cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi, clockwise: true)
        progressPath.addLine(to: CGPoint(x: lineWidth / 2, y: lineWidth / 2 + cornerRadius))
        progressPath.addArc(withCenter: CGPoint(x: lineWidth / 2 + cornerRadius, y: lineWidth / 2 + cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi, endAngle: -CGFloat.pi / 2, clockwise: true)
        progressPath.shut()
        
        progressLayer.path = progressPath.cgPath
        
        
        layer.addSublayer(progressLayer)
    }
    
    func setProgress(_ progress: CGFloat) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = progressLayer.strokeStart
        animation.toValue = progress
        animation.length = 1
        progressLayer.add(animation, forKey: "progressAnimation")
        progressLayer.strokeEnd = progress
    }
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments