How to create a graph using a custom Swift UIView – Part 1

I’ve always wanted to create my own custom Swift UIView (or Objective-c) chart class, so I’m going to! It also gives me a chance to talk about object orientated programming; after all, that isn’t a subject that’s been done to death.


In good object oriented design, our graph class should only contain the necessary code in order to draw a graph. But, in order to draw the graph it will need data, it just doesn’t need to know how to get the data; that is the job of some other class. This is what’s know as a delegate pattern. Let’s go through a ridiculous (and flawed) example.

My cat needs feeding so whenever anybody goes near her she will start whinging, which is her equivalent of shouting, “feed me”; and thus a protocol has been defined with a “feed me” method. The cat cannot expect a response if it continually executes the “feed me” method if there is nothing around that implements the “feed me” protocol – that would just return a nil value and the cat would annoy the neighbours. In our household, my good lady and I are responsible for feeding the cat and therefore we implement the protocol with the “feed me” method (although I suspect that my good ladies implementation is riddled with bugs, and the implementation of “empty the cat litter” appears to be commented out as when I execute that method on her it never gets done), so if I go near the cat she will start executing the “feed me” method on me.

 So why do we use a protocol? Why couldn’t we just say that “feed me” was a method of person (me)? Well we could, but then only an object of type person could feed the cat; and what if we had guests? It wouldn’t be their job to feed the cat. What if a robot was in the house, or maybe an automatic cat feeder?

Psuedo code for this example would look something like this

By using protocols the cat does not need to know who (or what) will feed her, she only needs to know that something will respond to the “feed me” method. So would could create a Robot class that could feed the cat too:

Enough of this cat nonsense; let’s see how this relates to our graph class. Our Swift UIview class will draw a graph, in order to do this it will know that it needs data, so we will declare a delegate property that we expect something else to implement.

First things first, let’s create a new project. Open up Xcode and create a new single view application.

single view application

swift custom graph view

make sure you select Swift as the language.

Custom UIView

In order to create our graph we will be subclassing UIView, so lets create a new file. Right click on the project folder and select New File. make sure you are in the IOS Source section on the left and then select Cocoa Touch Class

cocao touch class

click next

custom graph view

Again, make sure you select swift as the language. You should now have something that looks like this

swift uiview class

Ok so now if we switch to the Storyboard we can drag out a view and place it on the the default view in the UIViewController

storyboard uiviewcontroller

When you drag the view out it will have a tendency to fill up the screen a bit so you will need to resize it. With the view selected, go to the Identity Inspector and change the class to the name of the new UIView subclass we made earlier.

identity inspector custom uiview


Now we are all set to start creating our graph.


More to follow…

1 thought on “How to create a graph using a custom Swift UIView – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.