Drawing circles proportionally to containing view in swift - ios

Question

I am trying to draw 3 circles inside my 3 views but only the top view circle is drawn even doth the code is the same. I can't seem to understand where is the problem, that's why the two other circle are not there?
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

You are drawing your circle with an offset to your frame (the other two circles are drawn, but outside of the frames).
Change:
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
to:
let path = UIBezierPath(arcCenter: CGPoint(x: center.x , y: frame.height/2) , radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
Btw. you probably want to change setupShapeLayer(circle) in setup() to setNeedsLayout(); layoutIfNeeded(), otherwise it will be drawn twice the first time.