PaintCode Sketch Plugin Tutorial

Import the StyleKit File to Xcode

By default, PaintCode uses the name StyleKit as the class and file name. Import this file into the ObjectiveTea Xcode project:

1. Drag the StyleKit.swift file from the Desktop into the Project navigator, right above Main.Storyboard.
2. Make sure that Copy items if needed and the ObjectiveTea target are selected.
3. Click Finish.

You should end up with a StyleKit.swift file in your Xcode project.

Working with Colors

At the top of the file, you’ll see a Colors section. PaintCode generates a static constant for each colored square inside the Library Artboard.

//MARK: - Colors
  
static let plum = UIColor(hue: 0.126, saturation: 1, brightness: 0.804, alpha: 1)
static let strawberry = UIColor(hue: 0.002, saturation: 0.369, brightness: 0.945, alpha: 1)
...

Set the tab bar color

Let’s test out one of these colors on the tab bar icons. The sample project already has a TabBarController subclass wired up in the Storyboard.

Within TabBarController.swift, add the following line inside viewDidLoad():

tabBar.tintColor = StyleKit.rWGreen

Build and run. The tab bar icons should be green, just like the tea leaf on the app icon.

Set the flavor colors

All of the flavors are gray, which is not very appetizing. Next, you’re going to integrate the rest of the StyleKit colors into the app.

Within OrderViewController.swift, there’s a flavors array that generates all the flavor objects. Each of these flavors are using gray as a placeholder color:

let milkTea = UIColor.grayColor()
...
let milkTeaFlavor = Flavor(name: "Milk Tea", color: milkTea)

Replace each flavor’s color with the StyleKit version:

let milkTeaFlavor = Flavor(name: "Milk Tea", color: StyleKit.milkTea)
let coffeeFlavor = Flavor(name: "Coffee", color: StyleKit.coffee)
let taroFlavor = Flavor(name: "Taro", color: StyleKit.taro)
let matchaGreenTeaFlavor = Flavor(name: "Matcha", color: StyleKit.matcha)
let mangoFlavor = Flavor(name: "Mango", color: StyleKit.mango)
let strawberryFlavor = Flavor(name: "Strawberry", color: StyleKit.strawberry)
let plumFlavor = Flavor(name: "Plum", color: StyleKit.plum)
let yogurtFlavor = Flavor(name: "Yogurt", color: StyleKit.yogurt)

Build and run. Each flavor should now have a pretty color.

Canvas Drawings

The next section of the StyleKit file includes canvas drawing methods. This section does all the heavy lifting of drawing vector paths. The code also looks pretty intimidating. Just be glad you didn’t have to write it by hand =].

Open StyleKit.swift and find drawBubbleTeaCup(frame:resizing:). You’ll see it looks similar to the following:

//MARK: - Canvas Drawings

/// ObjectiveTea
class func drawBubbleTeaCup(frame frame: CGRect = CGRect(x: 0, y: 0, width: 161, height: 221), resizing: ResizingBehavior = .AspectFit) {
  /// BubbleTeaCup
  do {
    /// Liquid
    let liquid = UIBezierPath()
    ...
    /// Straw
    /// Cup
    /// Bubbles
    /// Smile
  }
}

PaintCode adds comments based on the layer names from the Sketch file to help make the code a little more readable.

The drawing method takes two parameters:

• frame: You can set the image size by passing in a CGRect. Otherwise, it defaults to the dimensions from the Sketch file.
• resizing: You can pass in a content mode such as Aspect Fit, Aspect Fill, Stretch, or Center. PaintCode provides a helper enum at the bottom of the file to produce these effects.

Create a custom view

The canvas drawing methods are designed to work with custom views.

Open up BubbleTeaCup.swift. This is an empty UIView subclass that’s already wired up in the Storyboard:

import UIKit

class BubbleTeaCup: UIView {
}

Replace the file’s contents with the following code:

import UIKit

@IBDesignable // 1
class BubbleTeaCup: UIView {
  override func drawRect(rect: CGRect) { 
    StyleKit.drawBubbleTeaCup(frame: bounds) // 2
  }
}

1. IBDesignable: Gives you an image preview in the Storyboard.
2. drawBubbleTeaCup(frame:): Draws the vector image into the current graphics context. You pass in the bounds so the image takes up the entire view.

UIView has a method called drawRect(_:) which provides a graphics context (which I like to think of as a piece of scrap paper). The drawBubbleTeaCup(frame:) method takes care of drawing the image on this piece of paper, which then ends up on the screen.

Open Main.storyboard and look for the OrderViewController scene. You should see a preview of the bubble tea cup, thanks to @IBDesignable.

Build and run. The bubble tea cup image should now appear on the order tab.

Canvas Images

Switch back to StyleKit.swift and find the imageOfBubbleTeaCup(frame:resizing:) method. You’ll see this converts the drawing method to its UIImage equivalent:

//MARK: - Canvas Images

/// ObjectiveTea

class func imageOfBubbleTeaCup(size size: CGSize = CGSize(width: 161, height: 221), resizing: ResizingBehavior = .AspectFit) -> UIImage {
  var image: UIImage
  
  UIGraphicsBeginImageContextWithOptions(size, false, 0)
  StyleKit.drawBubbleTeaCup(frame: CGRect(origin: CGPoint.zero, size: size), resizing: resizing)
  image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  
  return image
}

Each canvas image method takes two parameters:

• size: This takes a CGSize. Otherwise, it defaults to the dimensions taken from Sketch.
• resizing: The content mode is forwarded to the drawing method.

This method can be useful in situations where you just want a UIImage of the drawing at a particular size.

Set the map marker icon

Let’s test out the canvas image method on the Stores tab.

Open StoresViewController.swift and scroll to the bottom. The map uses a hard-coded PNG for the map marker:

pinView?.image = UIImage(named: reuseId)

Replace this line with the following:

pinView?.image = StyleKit.imageOfBubbleTeaCup(size: CGSize(width: 32, height: 32))

Here you set the MKAnnotationView image to a 32×32 icon of the bubble tea cup.

Build and run. You should now see little bubble tea cups at each store location.

Set the tab bar icon

You can also use the canvas image methods to set tab bar icons.

Open TabBarController.swift. The viewDidLoad() method looks like this:

override func viewDidLoad() {
  tabBar.tintColor = StyleKit.rWGreen
}

Append the following code, right after the tintColor line.

let tabBarIconSize = CGSize(width: 32, height: 32) // 1
if let firstTabItem = tabBar.items?.first { // 2
  let bubbleTeaCupImage = StyleKit.imageOfBubbleTeaCup(size: tabBarIconSize) // 3
  firstTabItem.image = bubbleTeaCupImage // 4
  firstTabItem.selectedImage = bubbleTeaCupImage // 5
}

Let’s go over this line by line:

1. Creates a CGSize of 32×32, which seems like a good size for this particular icon.
2. Gets a handle to the first tab bar item.
3. Generates an UIImage of the bubble tea cup.
4. Sets the tab bar item image.
5. Sets the selected image.

Build and run. You should now see the bubble tea cup icon in the tab bar. Since tab bar items use template images, you won’t see the individual bubbles.