Search code examples
iosstoryboarduikitpaintcode

Supporting @3x, @2x Tab bar icons with PaintCode 2 StyleKit


I followed the PaintCode tutorials on StyleKit and I've successfully exported icons into a Swift project (code only - MyStyleKit.swift file). I'm trying to understand the relationship between the UIImage generated in code and the image sizes expected for different iOS devices.

I wired up the MyStyleKit object in the storyboards to the image for the Tab bar icon. Works great but I can't tell if the resolution of the image is adjusting depending on the device. Apple's HIG suggests the tab bar icon size in pixels should be 75 x 75 px for @3x images (iphone6+) 50 x 50 px for @2x retina image 25 x 25 px for non-retina

Firstly what canvas size should I be choosing in PaintCode initially? I guessed at putting the canvas size as 25 x 25, reasoning that I should map to the UI points size.

When I rig up the icon in Storyboards does it automatically adjust to whether it needs @3x, @2x or @1x?

Should I be setting the canvas size to the UI points size?

Any help would be greatly appreciated.


Solution

  • Yes, set the canvas size to 25×25 points. You can then preview the canvas at @1x, @2x or @3x (or infinite) scale.

    When you ask the StyleKit for image of this canvas, the returned UIImage will have the size of 25×25 points, but scale of the current screen. That means 25×25, 50×50 or 75×75 pixels.