如何使用Swift在UIView中将圆形进度条居中？

Question

我在确保圆形进度条始终位于与其关联的UIView的中心时遇到很多困难。

这是正在发生的事情：

忽略灰色区域，这只是占位符卡上的UIView。红色是我作为UIView的出口添加的UIViewController。

下面是我制作的类的代码：

class CircleProgress: UIView {

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }

    var progressLyr = CAShapeLayer()
    var trackLyr = CAShapeLayer()

    var progressClr = UIColor.red {
       didSet {
          progressLyr.strokeColor = progressClr.cgColor
       }
    }

    var trackClr = UIColor.black {
       didSet {
          trackLyr.strokeColor = trackClr.cgColor
       }
    }

    private func setupView() {
        self.backgroundColor = UIColor.red

        let centre = CGPoint(x: frame.size.width/2, y: frame.size.height/2)

        let circlePath = UIBezierPath(arcCenter: centre,
                                      radius: 10,
                                      startAngle: 0,
                                      endAngle: 2 * CGFloat.pi,
                                      clockwise: true)

        trackLyr.path = circlePath.cgPath
        trackLyr.fillColor = UIColor.clear.cgColor
        trackLyr.strokeColor = trackClr.cgColor
        trackLyr.lineWidth = 5.0
        trackLyr.strokeEnd = 1.0

        layer.addSublayer(trackLyr)
    }
}

目标只是让黑圈的所有4个边缘接触红色方块的边缘。

非常感谢您的帮助。我认为这一定太明显了，但是今晚花费了我太多时间。 ：）

Answer 1

更新此功能

private func setupView() {
        self.backgroundColor = UIColor.red

        let centre = CGPoint(x: bounds.midX, y: bounds.midY)

        let circlePath = UIBezierPath(arcCenter: centre,
                                      radius: bounds.maxX/2,
                                      startAngle: 0,
                                      endAngle: 2 * CGFloat.pi,
                                      clockwise: true)

        trackLyr.path = circlePath.cgPath
        trackLyr.fillColor = UIColor.clear.cgColor
        trackLyr.strokeColor = trackClr.cgColor
        trackLyr.lineWidth = 5.0
        trackLyr.strokeEnd = 1.0

        layer.addSublayer(trackLyr)
    }

Answer 2

问题是创建对象时没有传递帧。无需更改您的代码。当然，您必须将宽度和高度更改为所需的任何值。

这里是一个例子...

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white

        // Add circleProgress
        addCircleProgress()
    }

    private func addCircleProgress() {
        let circleProgress = CircleProgress(frame: CGRect(x: self.view.center.x - 50, y: self.view.center.x - 50, width: 100, height: 100))
        self.view.addSubview(circleProgress)
    }
}

class CircleProgress: UIView {

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    var progressLyr = CAShapeLayer()
    var trackLyr = CAShapeLayer()

    var progressClr = UIColor.red {
        didSet {
            progressLyr.strokeColor = progressClr.cgColor
        }
    }

    var trackClr = UIColor.black {
        didSet {
            trackLyr.strokeColor = trackClr.cgColor
        }
    }

    private func setupView() {
        self.backgroundColor = UIColor.red

        let centre = CGPoint(x: frame.size.width/2, y: frame.size.height/2)

        let circlePath = UIBezierPath(arcCenter: centre,
                                      radius: 50,
                                      startAngle: 0,
                                      endAngle: 2 * CGFloat.pi,
                                      clockwise: true)

        trackLyr.path = circlePath.cgPath
        trackLyr.fillColor = UIColor.clear.cgColor
        trackLyr.strokeColor = trackClr.cgColor
        trackLyr.lineWidth = 5.0
        trackLyr.strokeEnd = 1.0

        layer.addSublayer(trackLyr)
    }
}