ios - 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
}()

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

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

谁能告诉我为什么会发生这种情况以及如何解决？谢谢！

标签： iosswiftuiviewcashapelayer

Answer 1

问题部分在于这一行：

arcCenter: view.center

这是没有意义的，因为视图的中心是它在其父视图中的位置。您想让形状层的框架与视图的边界相同！然后弧中心应该是形状图层自己的中心（因为它是一个图层，所以它是它的中心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到您喜欢的任何位置。