Draw a Straight Line Using Xcode

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.

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.

accept the default Single View App under iOS

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.

type DrawLine as product name

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.

we’ll create the new project folder under tmp folder

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 newly created folder DrawLine under tmp

The new project looks something like the following in Xcode.

the newly created Xcode project DrawLine

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.

switched to a larger simulator iPad Pro (9.7-inch)

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.

the new app shows nothing when launched

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.

right click the blue bar of DrawLine to show an option list

Select New File…

click New File… to create a new file

Select Cocoa Touch Class under iOS. Then click Next button to continue.

we’ll create a Cocoa Touch Class

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.

we’ll create a file for CanvasView

Accept the default and click Create button to continue.

click Create button to create the new file in default folder arranged by Xcode

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.

class CanvasView in file CanvasView.swift

When we hide the right and bottom panels the editing area for file CanvasView.swift becomes larger.

we’ll write our line drawing code here shortly

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.

select Main.storyboard on the left panel and “View as iPhone 11” near the bottom

Click Device button near the bottom to show the device option list.

click Device button to select a different device

We’re gonna use iPad Pro 9.7" as our designing template.

select iPad Pro 9.7"

Click “View as: iPad Pro 9.7” near the bottom again to hide the device selection pane. So we have more room above.

click “View as: iPad Pro 9.7” to hide the bottom pane

To get a rectangular view from system library click the + sign near upper right corner.

click the + sign near upper right corner

A window pops up with a list of available screen widgets call objects.

a list of screen widgets called objects

Scroll down until we find View. Drag it out and drop onto the template.

drag object View to put it 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.

we drag out a small view onto the big white rectangle

A colour option dialog pops up. We’ll use a light grey colour.

we’ll use light grey for our canvas

Drag one of the corners of our view can adjust its size.

make our canvas view larger by dragging

We can run the app to see the change. Click the black triangle near the upper left corner.

click the black triangle near the upper left corner to run the app

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.

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.

select CanvasView in the dropdown menu

Finally we are ready to start writing code. Click CanvasView.swift on the left navigation panel.

click CanvasView.swift on the left navigation panel

Delete line 19 and line 13 in the source code editor.

delete line 19 and line 13

Put you cursor at the end of line 16 and press enter.

we’ll type in source code under line 16

While we are typing, Xcode’s autocomplete feature keeps helping us with suggestions we may need. So after we key in

let path = uib

we can select the 3rd one in the list, UIBezierPath.

Xcode’s autocomplete feature is our best friend

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”.

press enter key when you get this stage

Key in the opening parenthesis. Auto-complete list pops up so we can save some typing, and most possibly typos.

use auto-complete to save some typing and 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.

origin is at upper left, x points right, y points down

The finished code look like the following.

we input 4 lines of code to draw a straight line

Re-launch the app to check our gorgeous single line in black.

a single straight line from (0, 0) to (200, 100)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store