PaintCode Tutorial: Dynamic Buttons

PaintCode is a neat app where you can draw user interfaces like in Photoshop – but instead of generating an image, it generates Core Graphics code!

This is really cool for several reasons:

• Saves development time. If you were writing the Core Graphics code manually, it would take you much longer than using PaintCode. And time is money!
• Saves binary size. By drawing a view in code, you no longer have to include the images in your binary, reducing your binary size.
• Make it dynamic. And finally, since you’re creating your view in code you can do some cool things you couldn’t do if you were pre-generating the graphics – like easily changing the color of various aspects of the control at runtime.

Full disclosure: We received some review copies of PaintCode to generate this tutorial. However, any opinions in this article are honest and my own.

To get the most of this tutorial, you need some basic knowledge of iOS development. Also, it is helpful (but not 100% necessary) if you have some basic knowledge of Core Graphics. If you are new to Core Graphics, check out our Core Graphics tutorial series.

Without further ado, it’s time to get started!

Getting Started

To follow along with this set of PaintCode tutorials, you’re going to need PaintCode. You can download the trial app, or you can get the full app on the Mac App Store.

Note: If you’re reading this post during WWDC 2013, you are in luck: PaintCode is currently having a 25% off WWDC sale!

Even though the app is expensive, in my opinion it is well worth the price for the reasons explained in the introduction. But if you’re not sure, download the trial and go through this tutorial to see for yourself!

Creating Your First Dynamic Button

Before writing a single line of code, you’ll use PaintCode to design your entire button from scratch.

Launch PaintCode, go to File\Save, and name your project DynamicButton. This way you can periodically save your work as you go through this tutorial.

Click the Canvas button on the bottom right of the screen, and set the canvas size to be 480 by 150 pixels as shown in the screenshot below:

Now change the color of the canvas to dark grey by clicking on the Underlay color value and entering 50 50 50 for the RGB values, as so:

Note: By default you are working on the non-retina version. If you’d like to view the retina version, click the Retina button next to the Canvas button. It’s a toggle button which will switch you between the retina and non-retina versions.

Now click the Round Rect button in the top toolbar and drag out a rectangle in your canvas.

You’ll notice that when you select a shape on your canvas, the panel on the left displays the properties for that shape. So ensure that the rounded rect on your canvas is selected, and set the following properties:

• X: 4
• Y: 4
• Width: 473
• Height: 41

Next you need to change the Fill value to set the button color.

In the left hand pane, click on the value for Fill, choose Add New Gradient… from the pop up dialog, and name the new gradient ButtonGradient. Now, click on the bottom left color stop. The color stops are the circles along the bottom edge of the gradient which indicate the various colors that compose the gradient.

Next, click on the color swatch on the lower right of the dialog, and enter 255 0 0 for the RGB values, as shown in the screenshot below:

Click the color swatch again to close the color dialog.

Now, click on the right color stop, click on the color swatch, and modify the RGB values to 112 1 0 as below:

PaintCode provides you with the ability you to name each color used in a shape so that you can refer to them later in your code. If the Code pane isn’t open at the bottom of your window, use the View > Code menu option to open it. Take a look at the code created, and you should see the references to the two colors you just created, as highlighted in the following image:

It’s a good idea to give your colors descriptive names to keep track of them.

Select the Colors tab located on the bottom section of the left panel, then double-click Fill Color. Change the Name value on the pop up to ButtonColorDark, as shown below:

Give this color a name as well, following the same steps as above to rename Stroke Color to ButtonColorLight.

Switch back to the shape properties in the center section of the left pane. Click on the Stroke dropdown and choose System Colors > Common Colors > BlackColor, to change the stroke color to black, as illustrated below:

Increase the Width parameter to 2 under the Stroke sub-section, as so:

Now give the button an outer glow by selecting Add New Shadow… from the dropdown for Outer Shadow under the Fill sub-section, like in the screenshot below:

Change the Name of the shadow to OuterGlow; this gives it a memorable name just as you did with the colors above. Next, click on the dropdown menu next to Color, and click on the white square in the color grid. Click on the color rectangle, which is now white, and lower the opacity to 128.

Change the offsets and blur radius as shown below, and click outside the popup to close it:

Move to the Colors tab and rename Glow to InnerGlowColor.

Next, add an inner highlight to Inner Shadow by selecting Add New Shadow… from the dropdown. Rename the shadow to Highlight, set the color to white, the alpha to 130, and change the offsets and blur radius as shown below:

The color name may already be set to Shadow Color 2 depending on the workflow you followed, but if not, modify the name of this color to match.

Your button should look like the one below:

At this point, the button looks pretty cool, but it’s just a fixed size. To make it resizable, you need to put a frame around it. The idea is that in code you will change the size of this frame, and in the next few steps you will set up PaintCode so that anything inside the frame resizes appropriately.