PaintCode Review: Dynamic Graphics Made Easy

Using PaintCode for Building Apps

Now that you have a birds-eye view of what PaintCode is and its major features, let’s take a look at how PaintCode can help speed up your application development process.

The raywenderlich.com team tends to use PaintCode for three main things:

1. Turning drawings into code
2. Creating icons for applications
3. Rapid prototyping

Let’s look at each of these in turn.

1) Turning Drawings Into Code

The main use case of PaintCode is turning drawings into code. This is handy for graphics you might want inside your apps, or especially if you are making custom-drawn controls in your app.

As you create and change your elements, PaintCode generates code in real time at the bottom of the document window. Between the canvas and the generated code sits a toolbar where you control how PaintCode generates code to match the target environment for your app.

You can choose either OS X, iOS or the web as the platform target for your code; PaintCode automatically handles the differences between iOS and OS X such as UIColor on iOS as opposed to NSColor on OS X. PaintCode can produce either Objective-C or Swift code for both iOS and OS X.

PaintCode Toolbar

PaintCode Toolbar

One of the great new features in PaintCode 2 is StyleKits. This allows PaintCode to generate a single class containing the drawings in your document and, optionally, items such as colors, gradients, shadows, and images.

To create the StyleKit class, you export your document from PaintCode and select the StyleKit option. You can specify a name for the generated class, along with the project name, author, and company name to be included in the comments of the class, as well as the destination folder where you want to save the generated class.

Exporting StyleKit

Exporting StyleKit

All you have to do is add the StyleKit classes to your application and call the methods and values directly from your code. Below is some sample source code that draws a StyleKit-exported control within a UIView class:

class CountdownView: UIView {

    override func drawRect(rect: CGRect) {
        CountdownControl.drawCountdownControl(frame: rect,
          isRunning: false, remaining: 1.0, isWarning: false)
    }
}

This is the result on iOS:

StyleKit Control running in iOS Simulator

StyleKit Control running in iOS Simulator

The drawing code requires a single method call. How cool is that? Remember – the code most free of bugs is code that you don’t write at all! :]

While PaintCode does generate working code, it does not always produce the most efficient code, nor does it always produce exactly what you need.

“It’s definitely nice to be able to easily draw and tweak custom UI components, and this is usually much faster than doing everything manually in code ‘by hand’. However, I consider PaintCode to be just a starting point.”

–Tutorial team member Joshua Greene

2) Creating Icons for Applications

Retina displays and new devices have certainly complicated things for iOS developers – with @1x, @2x, and @3x along with different devices, now we have image assets galore!

Generating all the icons and graphics for your app to meet requirements for submission to the App Store can take a significant amount of time in PhotoShop or a similar bitmap creation tool.

PaintCode makes this process easy by generating UIImages directly for any drawing use within your app. It can also export your drawings as bitmaps; this gives you a faster path to generating the myriad versions of icons and graphics for your app.

Generating Retina icons from original drawing.

Generating Retina icons from original drawing.

“[At first I thought PaintCode] was just a program for making overly verbose drawing code, and I wasn’t that impressed with the code output, but I found it really good as a place to do all my vector drawing and icons, and keep my named colors for the app, and to export out all of the images in the various resolutions.

But once I realized I could draw an icon with vectors in one canvas and use that as a symbol for all the millions of other icon sizes and export them all in one go, I was super impressed. To then tweak one of my theme colors and have that reflected instantly in all the drawings was also very good.”

–Tutorial team member Rich Turton

3) Rapid prototyping

It’s important to be able to prototype your graphics changes quickly and easily, and PaintCode has several features to help with that:

• Reusable symbols. You can’t waste time copying and pasting your updates all through the code when you change elements of your design; instead, PaintCode’s ability to include existing canvases as symbols on other canvases makes it easy to reuse components and propagate your changes.
• Library items. Similarly, using Library items lets you change colors in your prototype with ease, making it a breeze to try out different UI configurations and themes.
• Live prototyping (PaintCode 2.4). There’s a cool new feature in PaintCode 2.4 (still in beta at the time of writing) that will allow live prototyping of graphics in apps. You simply run your project with a special framework, and any changes to your PaintCode project will be reflected directly in your prototype app – without even restarting!

“But really I like drawing out controls or possibly interface objects with PaintCode. I think of it like a Photoshop but really I’m curious as to the code behind the control. I’ll throw the code into the app I’m prototyping for an take a screenshot for the designer I’m working with. I find that showing a real interaction with something goes the extra step with design/UX.”

— Tutorial team member Aaron Douglas