Draw a Straight Line Using Xcode
Your kids need something more fun than video games
Today we’ll create a new Xcode project from scratch and draw a single line on the screen of simulator.
Here is Draw Line in YouTube.
Launch Xcode and click Create a new Xcode project on the left.
Select Single View App under iOS, which is the default normally. Then click Next button to continue.
Provide a name for our new app in field Product Name. It can anything you like and we just use DrawLine, very creative. Make sure that Swift is our programming language and User Interface shows Storyboard. Then click Next button to continue.
Xcode will create a new folder, also known as directory, to contain every file and subfolder of this project. Here the to-create new project folder will be put under the existing tmp folder. Click Create button to continue.
You can find the newly created folder DrawLine in Finder app. In future you can simply delete the whole folder DrawLine when you never need it, for example you want to clean up and redo this exercise from scratch.
The new project looks something like the following in Xcode.
You can run this empty app with different simulators. In my case the default simulator is iPhone 11 Pro Max. Click the upper left area and choose iPad Pro (9.7-inch). But you can use any one you like. There is no difference in this line drawing practice.
Click the black triangle button near the upper left corner to make sure this new app is actually runnable. Like always we’re gonna see a big white empty screen.
Now let’s create a new file in which we’ll write our line drawing code shortly. Right click the blue bar of DrawLine on the left panel.
Select New File…
Select Cocoa Touch Class under iOS. Then click Next button to continue.
Since we need a canvas to draw a straight line, CanvasView is not a bad name. Please follow our naming convention which means “C” and “V” have to be in upper case. Make sure field Subclass of shows UIView and field Language shows Swift. Don’t worry if you have no idea what UIView is and why we use Swift as our programming language. As long as we know that to draw a straight line we need to specify two points on the coordinate plane, everything will be fine. Click Next button to continue.
Accept the default and click Create button to continue.
File CanvasView.swift is created. The three buttons near the upper right corner can toggle left, bottom and right panel respectively. Play with them to get a feeling of this hide and show game. The content of our new file CanvasView.swift is in the middle editing area.
When we hide the right and bottom panels the editing area for file CanvasView.swift becomes larger.
But first we need to add our canvas, i.e. CanvasView, onto screen called View Controller Scene. Select Main.storyboard on the left panel we’ll see the UI designing area. The template looks like iPhone 11. Let’s change the template for iPhone 11 to an iPad. Click “View as: iPhone 11” near the bottom.
Click Device button near the bottom to show the device option list.
We’re gonna use iPad Pro 9.7" as our designing template.
Click “View as: iPad Pro 9.7” near the bottom again to hide the device selection pane. So we have more room above.
To get a rectangular view from system library click the + sign near upper right corner.
A window pops up with a list of available screen widgets call objects.
Scroll down until we find View. Drag it out and drop onto the template.
It is a small rectangle with white background. Notice that the background rectangular, another view, also has white background colour. Let’s change the background colour of the small view we just dragged out. Click the row of Background on the right panel to make the change.
A colour option dialog pops up. We’ll use a light grey colour.
Drag one of the corners of our view can adjust its size.
We can run the app to see the change. Click the black triangle near the upper left corner.
Here is our light grey rectangular view, the canvas where we’ll draw a line shortly.
Time to change the class of this canvas view from the default UIView to our own CanvasView. With the canvas view selected, click the 4th icon from the 7-icon bar at the top of right panel.
Now we can change the class of our canvas view to CanvasView from the dropdown menu near the top of right panel.
Finally we are ready to start writing code. Click CanvasView.swift on the left navigation panel.
Delete line 19 and line 13 in the source code editor.
Put you cursor at the end of line 16 and press enter.
While we are typing, Xcode’s autocomplete feature keeps helping us with suggestions we may need. So after we key in
let path = uibwe can select the 3rd one in the list, UIBezierPath.
Go on typing until you see something like the following, i.e. the CGPoint in blue. Press enter and Xcode will insert text “CGPoint” for us, even with cursor at the end of last letter “t”.
Key in the opening parenthesis. Auto-complete list pops up so we can save some typing, and most possibly typos.
These 4 lines are all we need to draw a line from (0, 0) to (200, 100).
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 200, y: 100))
path.stroke()The iOS coordinate system is defined as the following.
The finished code look like the following.
Re-launch the app to check our gorgeous single line in black.
