Using iDraw’s Core Graphics Code for Button Images in Xcode

In part 1 of this series, “Using Core Graphics Code from iDraw in Xcode”, we ran the iDraw generated Core Graphics code of a colored circle inside a graphics context. Then we extracted an image (of the colored circle) from the graphics context, and created a UIImageView that used the image. Finally we rendered the UIImageView in a subview of our ViewController’s view.

In the current post we will use the iDraw generated Core Graphics code of a pre-made icon, and again run the code in a graphics context and extract an image. This time the image will be used as the background for a custom button. The custom button was configured by placing a UIButton in Xcode, and associating a Swift class with it via Xcode’s Identity Inspector. As usual, the Swift class is a subclass of UIButton and includes the Core Graphics code of the pre-made icon. We also include simple code to demo using the button.

Creating icons in iDraw is fairly easy. There are also many pre-made vector icons available to use. Some nice flat vector icons can be downloaded at http://www.indeeo.com/idraw/tutorials/ You can just double click on the downloaded file, FlatIcons.idraw, and the icons will appear as a window in iDraw. We will use the clock face icon that has a red second hand. Here is how to select it. Begin dragging outside the top-left and drag through the bottom-right.

Now go to iDraw’s File menu and choose “New from Seletion”. The icon appears in a new iDraw window at x=0, y=0, which is where we want it. Go to the Edit menu > Copy As and select “Core Graphics Code”. Note the size and position of the icon by choosing the properties inspector (the ruler) from the tab bar located in the upper-right and selecting Geometry properties by clicking on the first item in the tab bar (again a ruler) below the word properties. Here is what you should have:

Geometry properties in iDraw.

Working in Xcode

We create a new file in Xcode, ClockButton.swift, that will hold the generated Core Graphics code from iDraw. We will extract the clock’s image from the graphics context and then place it as the button’s background image. Also the file, ClockButton.swift, needs to be associated with a button in Main.storyboard.

Create an iOS Single View Application in Xcode. Choose the Swift programming language. After finishing creating the project, select the project’s title in the Project navigator, and then click on the plus button at the bottom-left. Select New File. Under iOS -Source, select “Cocoa Touch Class” and press the next button. Name the class name ClockButton and make it a subclass of UIButton. Press next. Paste the core graphics code inside the override func drawRect(rect: CGRect). The code is shown below.

import UIKit
class ClockButton: UIButton {
override func drawRect(rect: CGRect) {
UIGraphicsBeginImageContextWithOptions (CGSize(width:74, height:74), false, 0.0) // false — not opaque; 0.0 — no scaling
let ctx = UIGraphicsGetCurrentContext() // iOS
/* Shape */
let pathRef = CGPathCreateMutable()
CGPathMoveToPoint(pathRef, nil, 37, 0)
CGPathAddCurveToPoint(pathRef, nil, 57.435, 0, 74, 16.565, 74, 37)
CGPathAddCurveToPoint(pathRef, nil, 74, 57.435, 57.435, 74, 37, 74)
CGPathAddCurveToPoint(pathRef, nil, 16.566, 74, 0, 57.435, 0, 37)
CGPathAddCurveToPoint(pathRef, nil, 0, 16.565, 16.566, 0, 37, 0)
CGPathCloseSubpath(pathRef)
CGContextSetRGBFillColor(ctx, 1, 0.539, 0.2, 1)
CGContextAddPath(ctx, pathRef)
CGContextFillPath(ctx)
/* Shape 2 */
let pathRef2 = CGPathCreateMutable()
CGPathMoveToPoint(pathRef2, nil, 37, 7)
CGPathAddCurveToPoint(pathRef2, nil, 53.569, 7, 67, 20.431, 67, 37)
CGPathAddCurveToPoint(pathRef2, nil, 67, 53.569, 53.569, 67, 37, 67)
CGPathAddCurveToPoint(pathRef2, nil, 20.431, 67, 7, 53.569, 7, 37)
CGPathAddCurveToPoint(pathRef2, nil, 7, 20.431, 20.431, 7, 37, 7)
CGPathCloseSubpath(pathRef2)
CGContextSetRGBFillColor(ctx, 1, 1, 1, 1)
CGContextAddPath(ctx, pathRef2)
CGContextFillPath(ctx)
/* Shape 3 */
let pathRef3 = CGPathCreateMutable()
CGPathMoveToPoint(pathRef3, nil, 32.646, 33.354)
CGPathAddCurveToPoint(pathRef3, nil, 32.646, 33.354, 33.354, 32.646, 33.354, 32.646)
CGPathAddCurveToPoint(pathRef3, nil, 33.354, 32.646, 51.354, 50.646, 51.354, 50.646)
CGPathAddCurveToPoint(pathRef3, nil, 51.354, 50.646, 50.646, 51.354, 50.646, 51.354)
CGPathAddCurveToPoint(pathRef3, nil, 50.646, 51.354, 32.646, 33.354, 32.646, 33.354)
CGPathCloseSubpath(pathRef3)
CGContextSetRGBFillColor(ctx, 1, 0.446, 0.373, 1)
CGContextAddPath(ctx, pathRef3)
CGContextFillPath(ctx)
/* Shape 4 */
let pathRef4 = CGPathCreateMutable()
CGPathMoveToPoint(pathRef4, nil, 37, 34)
CGPathAddCurveToPoint(pathRef4, nil, 38.657, 34, 40, 35.343, 40, 37)
CGPathAddCurveToPoint(pathRef4, nil, 40, 38.657, 38.657, 40, 37, 40)
CGPathAddCurveToPoint(pathRef4, nil, 35.343, 40, 34, 38.657, 34, 37)
CGPathAddCurveToPoint(pathRef4, nil, 34, 35.343, 35.343, 34, 37, 34)
CGPathCloseSubpath(pathRef4)
CGContextSetRGBFillColor(ctx, 0.502, 0.502, 0.502, 1)
CGContextAddPath(ctx, pathRef4)
CGContextFillPath(ctx)
/* Shape 5 */
let pathRef5 = CGPathCreateMutable()
CGPathMoveToPoint(pathRef5, nil, 38, 37)
CGPathAddCurveToPoint(pathRef5, nil, 38, 37.552, 37.552, 38, 37, 38)
CGPathAddCurveToPoint(pathRef5, nil, 37, 38, 22, 38, 22, 38)
CGPathAddCurveToPoint(pathRef5, nil, 21.448, 38, 21, 37.552, 21, 37)
CGPathAddCurveToPoint(pathRef5, nil, 21, 36.448, 21.448, 36, 22, 36)
CGPathAddCurveToPoint(pathRef5, nil, 22, 36, 37, 36, 37, 36)
CGPathAddCurveToPoint(pathRef5, nil, 37.552, 36, 38, 36.448, 38, 37)
CGPathCloseSubpath(pathRef5)
CGContextSetRGBFillColor(ctx, 0.502, 0.502, 0.502, 1)
CGContextAddPath(ctx, pathRef5)
CGContextFillPath(ctx)
/* Shape 6 */
let pathRef6 = CGPathCreateMutable()
CGPathMoveToPoint(pathRef6, nil, 37, 14)
CGPathAddCurveToPoint(pathRef6, nil, 37.552, 14, 38, 14.448, 38, 15)
CGPathAddCurveToPoint(pathRef6, nil, 38, 15, 38, 37, 38, 37)
CGPathAddCurveToPoint(pathRef6, nil, 38, 37.552, 37.552, 38, 37, 38)
CGPathAddCurveToPoint(pathRef6, nil, 36.448, 38, 36, 37.552, 36, 37)
CGPathAddCurveToPoint(pathRef6, nil, 36, 37, 36, 15, 36, 15)
CGPathAddCurveToPoint(pathRef6, nil, 36, 14.448, 36.448, 14, 37, 14)
CGPathCloseSubpath(pathRef6)
CGContextSetRGBFillColor(ctx, 0.502, 0.502, 0.502, 1)
CGContextAddPath(ctx, pathRef6)
CGContextFillPath(ctx)
let img = UIGraphicsGetImageFromCurrentImageContext() as UIImage
self.setBackgroundImage(img,forState: .Normal)
UIGraphicsEndImageContext()
}
}

Note 1: The image context is set to width 74, height 74. This is the same as our icon in iDraw. UIGraphicsBeginImageContextWithOptions (CGSize(width:74, height:74), false, 0.0)

Note 2: The button’s background image is set to the image of our icon. self.setBackgroundImage(img,forState: .Normal)

Note 3: The clock face image is composed of six shapes. Icons can be complex in terms of core graphics code. Its nice to have iDraw generate the code for you. (These six shapes can also be seen in iDraw by selecting the Styles Panel in the upper-right tab bar.)

Six shapes included in the icon.

Making the Custom Button

In the Project Navigator, select Main.storyboard. Add a UIButton to ViewController’s View. Go to the Size Inspector and make the width and height of the button, 74, 74. Make sure the button is selected, then go to the Identity Inspector and use the drop down menu to set the class of the button to ClockButton. This UIButton is now associated with the file ClockButton.swift.

I also put a UILabel just below the button, to reflect the number of times the button is clicked.

I put the button’s @IBAction function and the label’s @IBOutlet in ViewController.swift.

Here is the code for ViewController.swift:

import UIKit
class ViewController: UIViewController {
@IBAction func ClockButton(sender: AnyObject) {
counter = counter + 1
counterLabel.text = String(counter)
}
@IBOutlet weak var counterLabel: UILabel!
var counter = 0
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}

Note: You can make the connections between the IBAction and IBOutlet code and objects in Xcode anyway you prefer. I like to use the Assistant Editor and control drag from the objects in the storyboard to ViewController.swift and fill in the popups.

Time to compile and run! It should look like this.

For the iPhone 6 simulator in Xcode.

I have posted the above code to: http://snipplr.com/view/95456/using-idraws-core-graphics-code-for-button-images-in-xcode/

Notes (Comments)

If you would like to make a comment (Medium uses Notes for this) about this post: 1) Make a selection in the part of the post that is relevant to your comment. 2) Move the cursor to the right side and a + should appear. 3) Click on the plus and type in your comment. At the upper right of your note, is a pull down menu where you can change your note from private to public. If there are already numbers in the right margin, you can click on them and read/add to comments left by others.

Reference:
https://www.youtube.com/watch?v=SJtEJOoNvtI

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.