Рисование кругов пропорционально содержащему виду в swift

Question

Я пытаюсь нарисовать 3 круга внутри моих 3-х видов, но нарисован только круг верхнего вида, даже если код тот же. Я не могу понять, где проблема, поэтому двух других кругов нет?

class ViewController: UIViewController { 

    ///Views used to display the progress view 
    var topView: CircleView! 
    var middleView: CircleView! 
    var bottomView: CircleView! 

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

    func createThreeViews(){   
    let viewHeight = self.view.bounds.height 
    let viewWidth = self.view.bounds.width 

    //Top View 
    let topTimerFrame = CGRect(x: 0, y: 0, width: viewWidth, height: 3/6 * viewHeight) 
    topView = CircleView(frame: topTimerFrame) 
    topView.backgroundColor = UIColor.redColor() 

    //Middle View 
    let middleTimerFrame = CGRect(x: 0, y: topTimerFrame.height, width: viewWidth, height: 2/6 * viewHeight) 

    middleView = CircleView(frame: middleTimerFrame) 
    middleView.backgroundColor = UIColor.blueColor() 


    //Bottom view 
    let bottomTimerFrame = CGRect(x: 0, y: topTimerFrame.height + middleTimerFrame.height, width: viewWidth, height: 1/6 * viewHeight) 

    bottomView = CircleView(frame: bottomTimerFrame) 
    bottomView.backgroundColor = UIColor.greenColor() 

    //add top circle and set constraint 
    self.view.addSubview(topView) 

    //add middle circle and set constraints 
    self.view.addSubview(middleView) 

    //add bottom circle and set constraints 
    self.view.addSubview(bottomView) 
    } 

} 

//class used to create the views and draw circles in them 
class CircleView: UIView { 
    let π:CGFloat = CGFloat(M_PI)  
    let circle = CAShapeLayer()  
    var secondLayerColor: UIColor = UIColor.whiteColor() 


    //custom initializer 
    override init(frame: CGRect) { 
    super.init(frame: frame) 
    userInteractionEnabled = true 
    setup() 
    } 

    required init?(coder aDecoder: NSCoder) { 
    super.init(coder: aDecoder) 
    userInteractionEnabled = true 
    setup() 
    } 

    func setup() { 

    //draw the circle and add to layer 
    circle.frame = bounds 
    circle.lineWidth = CGFloat(4) 
    circle.fillColor = UIColor.whiteColor().CGColor 
    circle.strokeEnd = 1 

    layer.addSublayer(circle) 
    setupShapeLayer(circle) 
    } 

    override func layoutSubviews() {   
    super.layoutSubviews() 
    setupShapeLayer(circle)  
    } 

    func setupShapeLayer(shapeLayer: CAShapeLayer) {   
    shapeLayer.frame = bounds   
    let radius = frame.height/2 - circle.lineWidth/2   
    let startAngle = CGFloat(0)   
    let endAngle = 2*π   
    let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)   
    shapeLayer.path = path.CGPath   
    } 

} 

Answer 1

Вы рисуете свой круг со смещением к раме (остальные два круга рисуется, но вне рамок).

Изменение:

let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false) 

к:

let path = UIBezierPath(arcCenter: CGPoint(x: center.x , y: frame.height/2) , radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false) 

Btw. вы, вероятно, захотите изменить setupShapeLayer(circle) в setup() на setNeedsLayout(); layoutIfNeeded(), иначе он будет нарисован дважды в первый раз.