Draw Circles iOS Tutorial
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 made with Xcode 10 and built for iOS 12.
Open Xcode and create a new Single View App.
For product name, use IOS12DrawCirclesTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.
Select File -> New File -> iOS -> Cocoa Touch Class. Name 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.clear } 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 draw(_ rect: CGRect) { // Get the Graphics Context if let context = UIGraphicsGetCurrentContext() { // Set the circle outerline-width context.setLineWidth(5.0); // Set the circle outerline-colour UIColor.red.set() // Create Circle let center = CGPoint(x: frame.size.width/2, y: frame.size.height/2) let radius = (frame.size.width - 10)/2 context.addArc(center: center, radius: radius, startAngle: 0.0, endAngle: .pi * 2.0, clockwise: true) // Draw context.strokePath() } }
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() { super.viewDidLoad() self.view.backgroundColor = UIColor.lightGray }
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<UITouch>, with event: UIEvent?) { for touch in touches { // Set the Center of the Circle // 1 let circleCenter = touch.location(in: view) // Set a random Circle Radius // 2 let circleWidth = CGFloat(25 + (arc4random() % 50)) let circleHeight = circleWidth // Create a new CircleView // 3 let circleView = CircleView(frame: CGRect(x: circleCenter.x, y: circleCenter.y, width: circleWidth, height: circleHeight)) view.addSubview(circleView) } }
The center of the circle is set to the location of the user's touch
the width(and height) of the circle is a random number between 25 and 75.
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 IOS12DrawCirclesTutorial at the ioscreator repository on Github.