How to use drawRect in a particular area? - ios

Question

I used this topic's animation in my project. The problem is I want to use a particular area for circle(grey area). To do it, I added a view(grey area) and the code is shown below. But it is locating different positions on x axis every time.(y is fixed). The second problem is I want to use the circle around the text. To do it, I placed the text and view to centre of the screen both vertically and horizontally. How can I fix these two problems?
Problem screenshots
These are the code that I used.
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.clearColor()
// Use UIBezierPath as an easy way to create the CGPath for the layer.
// The path should be the entire circle.
let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)
// Setup the CAShapeLayer with the path, colors, and line width
circleLayer.path = circlePath.CGPath
circleLayer.fillColor = UIColor.clearColor().CGColor
circleLayer.strokeColor = randomColor().CGColor
circleLayer.lineWidth = 40;
// Don't draw the circle initially
circleLayer.strokeEnd = 0.0
// Add the circleLayer to the view's layer's sublayers
layer.addSublayer(circleLayer)
}
func animateCircle(duration: NSTimeInterval) {
// We want to animate the strokeEnd property of the circleLayer
let animation = CABasicAnimation(keyPath: "strokeEnd")
// Set the animation duration appropriately
animation.duration = duration
// Animate from 0 (no circle) to 1 (full circle)
animation.fromValue = 0
animation.toValue = 1
// Do a linear animation (i.e. the speed of the animation stays the same)
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
// Set the circleLayer's strokeEnd property to 1.0 now so that it's the
// right value when the animation ends.
circleLayer.strokeEnd = 1.0
// Do the actual animation
circleLayer.addAnimation(animation, forKey: "animateCircle")
}
func addCircleView() {
let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
// Create a new CircleView
var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200))
extraView.addSubview(circleView)
println(view.frame.width)
println(view.frame.height)
// Animate the drawing of the circle over the course of 1 second
circleView.animateCircle(1.0)
}

Answer 1

Problem is Auto layout. You forgot set layout for circleView <=> extraView. See the code below.
func addCircleView() {
let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
// Create a new CircleView
var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200))
extraView.addSubview(circleView)
println(view.frame.width)
println(view.frame.height)
let constCenterX = NSLayoutConstraint(item: circleView, attribute: .CenterX, relatedBy: .Equal, toItem: extraView, attribute: .CenterX, multiplier: 1, constant: 0)
let constCenterY = NSLayoutConstraint(item: circleView, attribute: .CenterY, relatedBy: .Equal, toItem: extraView, attribute: .CenterY, multiplier: 1, constant: 0)
self.view.addConstraints([constCenterX, constCenterY])
// Animate the drawing of the circle over the course of 1 second
circleView.animateCircle(1.0)
//circleView.textLabel?.text = "Hello World!"
}
BTW: For the second question you should create a UILabel (centerX & centerY) in CircleView. Hope that helps!