IBOutlet初始化中的UIView框架中心不正確

Question

我有一個進度條，應該在視圖的中心渲染，但是由於“自動布局”而最終偏離中心。

class ProgressView: UIView {
    private let progressLayer: CAShapeLayer = CAShapeLayer()

    private var progressLabel: UILabel

    required init?(coder aDecoder: NSCoder) {
        progressLabel = UILabel()
        super.init(coder: aDecoder)
        createProgressLayer()
        createLabel()
    }

    override init(frame: CGRect) {
        progressLabel = UILabel()
        super.init(frame: frame)
        createProgressLayer()
        createLabel()
    }

    private func createProgressLayer() {
        let startAngle = CGFloat(3*M_PI_2)
        let endAngle = CGFloat(M_PI * 2 + 3*M_PI_2)
        let centerPoint = CGPointMake(CGRectGetWidth(bounds)/2, CGRectGetHeight(bounds)/2)

        let gradientMaskLayer = gradientMask()
        progressLayer.path = UIBezierPath(arcCenter:centerPoint, radius: CGRectGetWidth(frame)/2-8, startAngle:startAngle, endAngle:endAngle, clockwise: true).CGPath
        progressLayer.backgroundColor = UIColor.clearColor().CGColor
        progressLayer.fillColor = nil
        progressLayer.strokeColor = UIColor.blackColor().CGColor
        progressLayer.lineWidth = 4.0
        progressLayer.strokeStart = 0.0
        progressLayer.strokeEnd = 0.0

        gradientMaskLayer.mask = progressLayer
        layer.addSublayer(gradientMaskLayer)
    }

    func animateProgressView() {
        progressLayer.strokeEnd = 0.0

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = CGFloat(0.0)
        animation.toValue = CGFloat(1.0)
        animation.duration = 2.0
        animation.delegate = self
        animation.removedOnCompletion = false
        animation.additive = true
        animation.fillMode = kCAFillModeForwards
        progressLayer.addAnimation(animation, forKey: "strokeEnd")
    }
}

該代碼如下：

class MainPageController: UIViewController {

    @IBOutlet var progressView : ProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidLayoutSubviews() {
        progressView.animateProgressView()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

並最終使圓偏離中心。 如果我手動編輯圓心，則右側和底部的條似乎已被切除。 如果我關閉自動版式，則效果很好。 我究竟做錯了什么？

故事板：

Answer 1

感謝您從情節提要中發布約束，我現在可以看到是什么原因造成的。

ProgessView設置有兩個約束，一個約束使其保持正方形，另一個約束使其高度為視圖高度的1/3。 這意味着在情節提要中看到的視圖大小與設備上的視圖大小不同。

從情節init?(coder aDecoder: NSCoder)板加載視圖時會調用init?(coder aDecoder: NSCoder) 。 它在自動版式運行之前被調用，因此您獲得的bounds和frame的值基於情節提要中200x200的大小。 然后運行“自動布局”，並確定手機（看起來像iPhone 6）的尺寸應為222x222。 根據屏幕快照，您似乎在進度視圖的右側和底部大約有22pt的額外空間。

---

您要做的是在“自動版式”將視圖設置為適當的大小后，調整進度層的大小。 最好的方法是通過從createProgressLayer移動一些行在layoutSubviews

func layoutSubviews() {
    let startAngle = CGFloat(3*M_PI_2)
    let endAngle = CGFloat(M_PI * 2 + 3*M_PI_2)
    let centerPoint = CGPointMake(bounds.width/2, bounds.height/2)

    progressLayer.path = UIBezierPath(arcCenter:centerPoint, radius: frame.width/2-8, startAngle:startAngle, endAngle:endAngle, clockwise: true).CGPath
}

Answer 2

在Interface Builder中，將Progress View的內容模式更改為重繪，並覆蓋drawRect並從此處調用createProgressLayer。