awakeFromNib 中的自定义循环进度视图

Question

我使用 UIBezierPath 和 CAShapeLayer 通过以下代码创建了圆形进度视图。

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 中，它就可以正常工作。但是，当我从情节提要中添加 UIView 并将其 class 设置为自定义 class 然后将所有代码复制到该自定义 UIView class 并在 awakeFromNib 函数中调用它时它不起作用可能是什么原因？以及如何将上述代码与自定义 UIView class?

一起使用

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

Answer 1

确实有效，但位置错误。在这种情况下，位置不在您的视野范围内，因此您看不到它。它让你认为你的代码不起作用。

如果你想在你的视野中心有一个圆圈。把代码放在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)
}

结果

awakeFromNib 中的自定义循环进度视图

Custom circular progress view in awakeFromNib

uiview

cashapelayer

ios

uibezierpath

swift