UIView 的中心不居中

Question

我将一个 CAShapeLayer 添加到 UIView 的中心，但它没有出现在中心，而是出现在 UIView 的左上角。

视图设置如下：

let trayProgress: UIView = {
    let view = UIView()
    view.backgroundColor = .yellow

    let trackLayer = CAShapeLayer()
    let circularPath = UIBezierPath(arcCenter: view.center, radius: 20, startAngle: -CGFloat.pi / 2, endAngle: CGFloat.pi * 2, clockwise: false)
    trackLayer.path = circularPath.cgPath
    trackLayer.strokeColor = UIColor.lightGray.cgColor
    trackLayer.lineWidth = 6
    trackLayer.fillColor = UIColor.clear.cgColor
    view.layer.addSublayer(trackLayer)

    return view
}()

这是视图中显示的内容（我希望灰色圆圈位于黄色视图的中心）：

我也试过用CGPoint(x: view.center.x, y: view.center.y)替换view.center，但我得到了相同的结果。

谁能告诉我为什么会这样，我该如何解决？谢谢！

Answer 1

部分问题出在这一行：

arcCenter: view.center

这没有意义，因为视图的中心是它在父视图中的位置。您想使形状层的框架与视图的边界相同！圆弧中心应该是形状层的 own 中心（因为它是一个层，所以是它的 position）。

但问题的另一部分是，在代码中，您显示的视图和形状图层都没有任何大小。在视图具有大小之前，您无法创建形状层。

示例（我已经在代码中标注了关键变化）：

let trayProgress: UIView = {
    let view = UIView(frame:CGRect(x: 30, y: 60, width: 50, height: 50)) // *
    view.backgroundColor = .yellow
    let trackLayer = CAShapeLayer()
    trackLayer.frame = view.bounds // *
    let circularPath = UIBezierPath(arcCenter: trackLayer.position, // *
        radius: 20, startAngle: -CGFloat.pi / 2, endAngle: CGFloat.pi * 2, clockwise: false)
    trackLayer.path = circularPath.cgPath
    trackLayer.strokeColor = UIColor.lightGray.cgColor
    trackLayer.lineWidth = 6
    trackLayer.fillColor = UIColor.clear.cgColor
    view.layer.addSublayer(trackLayer)
    return view
}()

结果：

当然，您可以调整它。例如，您可以将 view 的中心移动到您喜欢的任何位置。

UIView 的中心不居中

Center of UIView not centered

ios

swift

uiview

cashapelayer