Question

我对Swift和编码很新。我试图创建4个简单的灰色圆圈，它们位于4个UIViews内，位于2个stackViews ...等等

使用4个UIViews，我基本上将它们放在屏幕中央的网格方块中，为了清楚起见，我将添加截图。目前，它似乎使底部圆圈远远低于我在XCode IB中布置的框。

我尝试了几种不同的尝试方法让圈子正确定位，但是我碰到了一堵砖墙，似乎无法解决为什么它不能正常工作。如果我在UIViews中添加一个UIView（Named＆＃39; topLeftBox＆＃39;，＆＃39; topRightBox＆＃39; ...等），我可以让它们正确定位。虽然这是一个简单的解决方法，但我只是想了解为什么我不能在最初的4个UIViews中添加图层。

任何帮助都会非常感激，并为明显的新手错误提前道歉！

下面是代码所代表的输出屏幕截图以及XCodeIB：

XCode Storyboard Grey Circles Simulator Output

以下是代码：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var topLeftBox: UIView!
    @IBOutlet weak var topRightBox: UIView!
    @IBOutlet weak var bottomLeftBox: UIView!
    @IBOutlet weak var bottomRightBox: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        drawCircle(box: topLeftBox)
        drawCircle(box: bottomLeftBox)
        drawCircle(box: topRightBox)
        drawCircle(box: bottomRightBox)
    }


    func createCircle(lineColor: UIColor, strokeEnd: CGFloat) -> CAShapeLayer {

        let layer = CAShapeLayer()
        let circularPath = UIBezierPath(arcCenter: .zero, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
        // Styling for the circular line
        layer.path = circularPath.cgPath
        layer.strokeColor = lineColor.cgColor
        layer.fillColor = UIColor.clear.cgColor
        layer.lineWidth = 10
        layer.lineCap = kCALineCapRound
        layer.strokeEnd = strokeEnd
        layer.transform = CATransform3DMakeRotation(-CGFloat.pi/2, 0, 0, 1)

        return layer

        // Style the track

    }

    fileprivate func drawCircle(box: UIView) {

        // Create Circles
        let trackLayer = createCircle(lineColor: .lightGray, strokeEnd: 1)
        box.layer.addSublayer(trackLayer)
        trackLayer.position = box.center

    }


}

Answer 1

你的问题就在这一行：

trackLayer.position = box.center

这是使用在其父视图的坐标系中的框frame的中心。你需要盒子坐标系中盒子的中心（即它的bounds）。

用以下代码替换上面的行：

trackLayer.position = CGPoint(x: box.bounds.midX, y: box.bounds.midY)

StackView中的UIView - 图层的位置

1 个答案: