PaintCode Tutorial for Developers: Getting Started

PaintCode is a fantastic little Mac app that turns your vector graphic designs into Core Graphics code you can easily use in your iOS apps.

PaintCode has always been great, but the recent release of PaintCode 2 has made it even greater, with a bunch of great new features like Swift code generation and StyleKits.

In this tutorial, you’ll learn how to integrate an stopwatch control made by a designer built in PaintCode into your own app. If you’d like to learn how to make the control yourself, check out our PaintCode Tutorial for Designers: Getting Started.

Getting Started

Download the starter project for this tutorial here.

Open up the project in Xcode and check out the basic structure and contents of the app. Main.storyboard has a tab bar controller with three view controllers. In this tutorial, you will only be working with the first view controller, where you will put the stopwatch control.

A Note on StyleKit

StyleKit is a recent feature in PaintCode that allows you to export your drawing methods, color, gradients, and assets into an easily reusable class that you can add to your project.

StyleKit gives you a few advantages over the old way of doing things in the previous version of PaintCode:

• You no longer need to manually copy and paste your drawing code from PaintCode into a subclass.
• You can easily make tweaks in PaintCode, re-export those changes, and immediately see results in your project.
• You’re provided with an improved, faster workflow for designing and prototyping your assets.
• You have new, powerful variables for your generated controls or assets, standard colors that other elements in your app can access and use, along with cleaner source files.

Adding the StyleKit

Imagine your designer has already created a stopwatch control for you in PaintCode, and has exported the StyleKit for your use.

For this tutorial, you have two choices:

1. If you did not do our PaintCode Tutorial for Designers: Getting Started: Download this pre-exported code and add it to your project.
2. If you did our PaintCode Tutorial for Designers: Getting Started: Add the file you exported from in the previous tutorial into your project.

Once you’ve added the Swift file to your project, create a new Swift file named Stopwatch.swift. Open it and replace the contents with the following:

import UIKit

@IBDesignable
class Stopwatch: UIView {
  override func drawRect(rect: CGRect) {
    PaintCodeTutorial.drawStopwatch()
  }
}

This uses the StyleKit helper code generated by PaintCode to draw the stopwatch body. Easy, eh? :]

Create another new Swift file named StopwatchHand.swift. Open it and replace the contents with the following:

import UIKit

@IBDesignable
class StopwatchHand: UIView {
  override func drawRect(rect: CGRect) {
    PaintCodeTutorial.drawStopwatch_Hand()
  }
}

As you can see, using StyleKits saves you save tons of code in your subclasses, and working with custom views becomes a breeze.

Build your project just to make sure that everything compiles correctly. Your next step is to set up views for each element in the storyboard.

Modifying the Storyboard

Open Main.storyboard; you’ll be dealing with the Asset View Controller scene (the “First View”). Delete the “First View” label as you won’t need that anymore.

Drag a view into the scene for the stopwatch (the size and position doesn’t matter), and set the following constraints on this view:

• Width Equals: 250
• Height Equals: 250
• Align Center X to: Superview
• Top Space to: Top Layout Guide

Update the frame of your view, and set the class to Stopwatch in the Identity Inspector. Because you marked the class as @IBDesignable, you’ll see a preview instantly!

Now, drag a second view onto the scene for the stopwatch hand and size it to be the same size/location as the stopwatch. Change the view’s background color to a clear color, and give it the following constraints:

• Width Equals: 250
• Height Equals: 222
• Align Center-X to: Stopwatch
• Align Bottom to: Stopwatch

Set the class to StopwatchHand, and you should see the following:

Build and run your project to ensure that everything is lined up correctly, and that you are not seeing any Auto Layout errors or problems with your storyboard.

Animating the Watch

Next it’s time to animate the watch! Open AssetViewController.swift and add the following outlet to the top of the implementation block:

@IBOutlet weak var stopWatchHandView: UIView?

Switch over to Main.storyboard one last time and connect the smaller view to the stopWatchHandView outlet.

Back in AssetViewController.swift, add the following methods:

override func viewWillAppear(animated: Bool) {
  super.viewWillAppear(animated)
  rotateStopWatchHand()
}

func rotateStopWatchHand() {
  UIView.animateWithDuration(2.0, delay: 0, options: .CurveLinear, animations: {
    self.stopWatchHandView!.transform =
      CGAffineTransformRotate(self.stopWatchHandView!.transform, CGFloat(M_PI_2))
  }, completion: { finished in
    self.rotateStopWatchHand()
  })
}

rotateStopWatchHand simply rotates the hand 45 degrees to the right, and you call this continuously.

Build and run your app; check out the results of your animated stopwatch:

Voila! The stopwatch hand is animating. And you barely, BARELY wrote any code :]

Where to Go From Here?

You can download the final project here.

I’ve only scratched the surface of PaintCode in this tutorial; to learn more check out the great PaintCode tutorials at www.paintcodeapp.com.

If you have any questions or comments on this tutorial, feel free to join the discussion below in the forums!