ios - awakeFromNib 中的自定义循环进度 View

Question

我使用 UIBezierPath 和 CAShapeLayer 以及以下代码创建了圆形进度 View 。

let center = self.center

let trackLayer = CAShapeLayer()

let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

trackLayer.path = circularPath.cgPath

trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 10
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = kCALineCapRound
self.layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = kCALineCapRound
shapeLayer.strokeEnd = 0
self.layer.addSublayer(shapeLayer)
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))

如果我将该代码放入 viewDidLoad 中，它就可以正常工作。但是，当我从 Storyboard添加 UIView 并将其类设置为自定义类，然后将所有代码复制到该自定义 UIView 类并在 awakeFromNib 函数中调用它时，它不起作用，可能是什么原因？如何将上面的代码与自定义 UIView 类一起使用？

橙色 View 应该是我的自定义 View ，我添加了前导、尾随、底部和固定高度约束，但它看起来像上面一样。圆形 View 不需要放置橙色 View 的中心吗？

Answer 1

实际上它可以工作，但位置错误。在这种情况下，位置不在您的视野范围内，因此您看不到它。它让您认为您的代码不起作用。

如果你想在 View 的中心有一个圆圈。将代码放入awakeFromNib并计算自己的中心，不要使用self.center

override func awakeFromNib() {
  let center = CGPoint.init(x: frame.width / 2, y: frame.height / 2)

  let trackLayer = CAShapeLayer()
  let shapeLayer = CAShapeLayer()

  let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

  trackLayer.path = circularPath.cgPath

  trackLayer.strokeColor = UIColor.lightGray.cgColor
  trackLayer.lineWidth = 10
  trackLayer.fillColor = UIColor.clear.cgColor
  trackLayer.lineCap = kCALineCapRound
  self.layer.addSublayer(trackLayer)
  shapeLayer.path = circularPath.cgPath
  shapeLayer.strokeColor = UIColor.red.cgColor
  shapeLayer.lineWidth = 10
  shapeLayer.fillColor = UIColor.clear.cgColor
  shapeLayer.lineCap = kCALineCapRound
  shapeLayer.strokeEnd = 0
  self.layer.addSublayer(shapeLayer)
}

结果