In our last post we looked at core graphics, what it is, why use it and how to draw a square and circle with it. In this post we are going to look at moving this drawing code to work with UIView. IF you haven’t already check out the last post and download the source code, or create a new single view application and you can follow the code below.

First of all in Swift create a new class, go File->New->Cocoa Touch Class. Then name it SquareShape and select UIView for Subclass of UIView.

Now we have added that, uncomment the draw code, and add in the following which will draw a square

    override func draw(_ rect: CGRect) {
        // Drawing code
        let squarePath = UIBezierPath() // 1
        squarePath.move(to: CGPoint(x: 0, y: 0)) // 2
        squarePath.addLine(to: CGPoint(x: 100, y: 0))
        squarePath.addLine(to: CGPoint(x: 100, y: 100))
        squarePath.addLine(to: CGPoint(x: 0, y: 100))
        
        squarePath.close() // 5
        
        UIColor.red.setFill()
        squarePath.fill()
    }

Head over to your Main.storyboard, and drag a UIView from the object explorer in the bottom right to your view. Now select the UIView and in the top right Identity Inspector change the class to the one we just made, SqureShape.

Run the app and you will see the square draw to the UIView we just added to the storyboard, neato!

This is all well and good, but it’s a bit annoying that it doesn’t render in the storyboard when are designing our app. What if there were a way to have it show up as a red square on the storyboard? Well luckly since XCode 6 there is a way for us to do this. Go back to the SquareShape.swift class, and above the Class SquareView: UIView add the following:

@IBDesignable

Go back to the Main.storyboard and after a few seconds it will render as follows:

So what else can we do with this drawing? Well instead of drawing it in a UIView we could draw it in our own custom UIButton! Lets draw a circle button. First of all in Swift create a new class, go File->New->Cocoa Touch Class. Then name it CircleShape and select UIButton for Subclass of.

Then code this class as follows to draw a circle

import UIKit

@IBDesignable
class CircleShape: UIButton {

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath(ovalIn: rect)
        UIColor.magenta.setFill()
        path.fill()
    }

}

Now go back to your storyboard, drag a UIButton onto it and change the custom class to circle shape.

Change the button text to Run, and you will have a circle button!

Lets connect up our custom button to run some code. Select View Controller in the storyboard, then select assistant editor in the top right. Now select our button, and hold the control key and drag the line into our View Controller code. Create an action named
“doWork”.

Add in the following code to make an alert show to the user.

    @IBAction func doWork(_ sender: Any) {
        let alertController = UIAlertController(title: "In Progress", message: "Coding app", preferredStyle: UIAlertControllerStyle.alert)
        alertController.addAction(UIAlertAction(title: "Ok", style: UIAlertActionStyle.default, handler: nil))
        self.present(alertController, animated: true, completion: nil)
    }

Now we have our own custom button that was drawn with core graphics running code, pretty cool.