Drawing Circles with UITouch in iOS8 with Swift

This tutorial shows how to draw circle with the Core Graphics Framework. The circles will be drawn in different sizes every time the user taps the screen. This tutorial is built with Xcode 6 and iOS 8.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftDrawingCirclesTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Select Swift as Language and make sure Universal is selected in Devices.

Select File -> New File -> iOS -> Source -> Cocoa Touch Class.Select Objective-C Class. Mpk the class CircleView with a subclass of UIView. This class will contain the views where the circles will be drawn.

In the CircleView class add the following init methods.

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clearColor()
required init(coder aDecoder: NSCoder) {
  fatalError("init(coder:) has not been implemented")

The background color of the circle view is set to clear, so multiple circles can displayed on top of each other.The init:coder method is required for subclasses of UIView. Next, implement the drawRect method.

override func drawRect(rect: CGRect) {   
  // Get the Graphics Context
  var context = UIGraphicsGetCurrentContext();  
  // Set the circle outerline-width
  CGContextSetLineWidth(context, 5.0);
  // Set the circle outerline-colour
  // Create Circle
  CGContextAddArc(context, (frame.size.width)/2, frame.size.height/2, (frame.size.width - 10)/2, 0.0, CGFloat(M_PI * 2.0), 1)
  // Draw

In the drawRect method some custom drawing can be performed. The outerline of the circle is red and has a width of 5. The width and height of the circle are centered. Finally, the circle is drawn. Now our CircleView class is finished, navigate to the ViewController.swift file. In the viewDidLoad method change the background color to lightgray

override func viewDidLoad() {
  self.view.backgroundColor = UIColor.lightGrayColor()

We need to create a view when the user touches on the screen, this can be done in the touchesBegan:withEvent method

override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
  if let touch = touches as? Set<UITouch> {
    // Set the Center of the Circle
    // 1
    var circleCenter = touch.first!.locationInView(view)
    // Set a random Circle Radius
    // 2
    var circleWidth = CGFloat(25 + (arc4random() % 50))
    var circleHeight = circleWidth
    // Create a new CircleView
    // 3
    var circleView = CircleView(frame: CGRectMake(circleCenter.x, circleCenter.y, circleWidth, circleHeight))
  1. The center of the circle is set to the location of the user's touch
  2. the width(and height) of the circle is a random number between 25 and 75.
  3. The circleView is allocated and added as subview to the main view.

Build and Run the project, touch the screen to draw multiple circles.

You can download the source code of the iOS8SwiftDrawingCirclesTutorial at the ioscreator repository on Github.