ios – Drawing Progress Bar

0
28


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

My present setup has the stroke beginning at 315 levels, however ends at prime middle, and am admittedly misplaced. My aim is to begin/finish the stroke at 315 levels. Any steerage could 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()
    }
    
    non-public func setupProgressLayer() {
        
        progressLayer.lineWidth = 6
        progressLayer.fillColor = nil
        progressLayer.strokeColor = Constants.fashion.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.period = 1
        progressLayer.add(animation, forKey: "progressAnimation")
        progressLayer.strokeEnd = progress
    }
}