iOS: 在UIView中以百分比画圆

iOS: Draw circle as percentage in UIView

我有一个 UIView 圆形,我需要以百分比值显示 UIView 边框颜色,如果百分比值为 50%,它应该填充 UIView 的一半边框颜色。我使用了 UIBeizer 路径 addArcWithCenter 但是我没有得到完美的解决方案。请在这方面帮助我

您可以通过以下代码实现,只需调整strokeStartstrokeEnd

    // round view
    let roundView = UIView(frame: CGRectMake(100, 100, 250, 250))
    roundView.backgroundColor = UIColor.whiteColor()
    roundView.layer.cornerRadius = roundView.frame.size.width / 2

    // bezier path
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * M_PI),
                                  endAngle: CGFloat(1.5 * M_PI),
                                  clockwise: true)
    // circle shape
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.CGPath
    circleShape.strokeColor = UIColor.redColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor
    circleShape.lineWidth = 1.5
    // set start and end values
    circleShape.strokeStart = 0.0
    circleShape.strokeEnd = 0.8

    // add sublayer
    roundView.layer.addSublayer(circleShape)
    // add subview
    self.view.addSubview(roundView)

我已经在 Swift 5 中编写了用于执行此操作的自定义函数。我相信我会为别人节省很多时间。玩得开心。

    func buildRoundView(roundView: UIView, total : Int, current : Int){
    roundView.layer.cornerRadius = roundView.frame.size.width / 2
    roundView.backgroundColor = .clear
    let width :CGFloat = 10.0
    let reducer :CGFloat = 0.010
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * Double.pi),
                                  endAngle: CGFloat(1.5 * Double.pi),
                                  clockwise: true)
    let multiplier = CGFloat((100.000 / Double(total)) * 0.0100)
    
    for i in 1...total {
        
        let circleShape = CAShapeLayer()
        circleShape.path = circlePath.cgPath
        if i <= current {
            circleShape.strokeColor = UIColor.systemRed.cgColor
        }
        else{
            circleShape.strokeColor = UIColor.lightGray.cgColor
        }
        
        circleShape.fillColor = UIColor.clear.cgColor
        circleShape.lineWidth = width
        circleShape.strokeStart = CGFloat(CGFloat(i - 1) * multiplier) + reducer
        circleShape.strokeEnd = CGFloat(CGFloat(i) * multiplier) - reducer
        roundView.layer.addSublayer(circleShape)
    }
}

根据@gvuksic 的回答:

Swift 5:

// round view
    let roundView = UIView(
        frame: CGRect(
            x: circleContainerView.bounds.origin.x,
            y: circleContainerView.bounds.origin.y,
            width: circleContainerView.bounds.size.width - 4,
            height: circleContainerView.bounds.size.height - 4
        )
    )
    roundView.backgroundColor = .white
    roundView.layer.cornerRadius = roundView.frame.size.width / 2
    
    // bezier path
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * .pi),
                                  endAngle: CGFloat(1.5 * .pi),
                                  clockwise: true)
    // circle shape
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.cgPath
    circleShape.strokeColor = UIColor.customColor?.cgColor
    circleShape.fillColor = UIColor.clear.cgColor
    circleShape.lineWidth = 4
    // set start and end values
    circleShape.strokeStart = 0.0
    circleShape.strokeEnd = 0.8
    
    // add sublayer
    roundView.layer.addSublayer(circleShape)
    // add subview
    circleContainerView.addSubview(roundView)

结果: