iOS：在 UIView 中以百分比形式绘制圆圈答案

【问题标题】：iOS: Draw circle as percentage in UIViewiOS：在 UIView 中以百分比形式绘制圆圈
【发布时间】：2016-08-15 11:20:39
【问题描述】：

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

【问题讨论】：

已经回答了。请check here
您在寻找 Swift 还是 Objective-C？也许您可以分享您的尝试？

标签： ios iphone swift uiview label

【解决方案1】：

你可以用下面的代码来实现，只需调整strokeStart和strokeEnd：

    // 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)

【讨论】：

我认为您应该删除 circleShape.strokeStart = 0.0 circleShape.strokeEnd = 0.8 以使其正确绘制百分比。
感谢您在此处编写此代码为我节省了时间。

【解决方案2】：

我已经在 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)
    }
}

【讨论】：

【解决方案3】：

根据@gvuksic 的回答：

斯威夫特 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)

结果：

【讨论】：