PaintCode Tutorial: Custom Progress Bar
Welcome back to our PaintCode tutorial series!
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.
In the first part of the series, we showed you how you could use PaintCode to create beautiful resizable and recolorable buttons.
In this tutorial, you’ll create your own custom progress bar design using PaintCode, and then integrate it into your app.
It helps if you complete part 1 first, but if you would rather just skip that one and focus on progress bars, that is OK. This tutorial works fine standalone – just make sure you have PaintCode installed, and download this starter project I’ve created for you.
Without further ado, open up PaintCode to get started on your next dynamic UI control!
Open a new document in PaintCode, click File\Rename…, name it DynamicProgressIndicator, and hit return.
In this tutorial, you’ll be working on the non-retina version of the control. If you’d like to see the retina version at any time, click the Retina button, next to the Canvas button, at the bottom right corner of the PaintCode window.
If you have the code view open, the buttons will be above the white panel at the bottom, as shown in the screenshot below:
Next, you’re going to change the canvas size to a smaller size more appropriate for the progress bar you’re creating, and also change the background color to a nice dark color that the control you’re about to make would look especially nice on.
To do this, click the Canvas button to make the canvas 320 pixels by 70 pixels.Change the Underlay color to a dark grey as shown in the screenshot below. If you want the exact color, set R=45, G=45, B=45, and A=255.
Now that the canvas is ready, you’re all set to create the basic shapes, gradients, and colors of your progress bar.
Select the Round Rect tool from the toolbar and draw a rounded rectangle on your canvas to represent the outside box of your control. With the rounded rectangle shape selected, set the shape’s properties to the following values:
- X : 2
- Y : 1
- Width : 316
- Height : 34
- Radius : 4
Your shape’s properties panel should look like the following:
With the rectangle still selected, find the Stroke section in the sidebar, and set it to No Stroke. Also, click the box next to Fill, choose Add New Gradient…, and click the left hand color stop. Double click the color, and set the RGB values to 82 82 82. Now click the right hand color stop and set the RGB values to 106 106 106. Rename the gradient Outer Rect Gradient.
Note: If you ever need to edit your PaintCode gradients, colors, or shadows, you can find them at the bottom of the left panel under the appropriately named tabs. Simply double click the name of an item to bring up the edit dialog for that particular element.
Close that dialog, and back in the rectangle settings look for the Outer Shadow section. Add a dark Outer Shadow with RGB values of 51 51 51. Name the shadow DarkShadow, as shown below:
Next, add a light Inner Shadow with RGB values of 171 171 171. Name it LightShadow, as demonstrated in the following screenshot:
Change the name of the Rounded Rectangle to Border. It’s always a good idea to give each element of your control a descriptive name so that you can easily identify each part later when you hook up the control in your app.
Now that the basic outline of your progress bar is done, you’ll need to add the outline of the progress track.
Drawing the Track and Track Background
Click the Round Rect tool again and draw another rounded rectangle on your canvas. Set the new shape’s properties as follows:
- X : 12
- Y : 10
- Width : 292
- Height : 14
- Radius : 7
Set the Fill of your shape as a new gradient with a left color stop of RGB 48 48 48 and a right color stop of RGB 63 63 63, as shown below:
Set the Outer Shadow to LightShadow, the Inner Shadow to DarkShadow, and finally rename the shape to ProgressTrack.
At this point, your control should look like the following:
The final visual component to add is the active progress track.
Choose the Round Rect tool again, drag out a rectangle and set its properties as follows:
- X : 14
- Y : 12
- Width : 288
- Height : 10
- Radius : 5
This final shape will be 2 pixels in from the left edge of ProgressTrack and centered vertically.
Note: If you were to try to draw this shape out manually instead of typing in the numbers like you did here, you might find it hard to do because the progress track is so similar in size to the track background.
However, there are two things you could do in this situation (besides modifying the numbers like you did here): 1) Select the track background, copy it and paste it and modify the copy to be a bit smaller, or 2) Pinch-zoom on your trackpad to zoom in on the shape you’re working with so drawing is easier.
To make the active progress track stand out, change the Fill to a green color — RGB 0 226 0. Or if you prefer another color, feel free to choose your own!
Finally, change the Outer Shadow and Inner Shadow of your shape to No Shadow, remove the Stroke and name your shape ProgressTrackActive. Your control should now look like the following:
It looks great — but to make it come alive, you need to add some components that will make your control respond dynamically.
Adding the Control Frame
Remember – any time you want to be able to easily resize an element that you create in PaintCode, you should put that element inside a frame, and set up PaintCode so it knows how to resize the element as you resize its parent frame.
There are three steps to do this:
- Group: Put any elements you want resized by a parent frame into a group
- Frame: Draw a frame, and make sure all those elements are inside. Set the Apply only to entirely enclosed shapes setting to make sure it only covers what’s inside.
- Springs and Struts: Set up the springs and struts for each element to indicate how you’d like the element to resize as the frame’s bounds change.
Go up to the top toolbar and select the Frame tool. Draw a frame around the green bar, as shown below:
Rename the frame to ActiveProgressFrame and group it with the ProgressTrackActive round rect (select both and click Group in the toolbar). Rename this group to ProgressActiveGroup.
Select ActiveProgressFrame again and check the box that says Apply only to entirely enclosed shapes. This will make the frame only affect the ProgressTrackActive bar, because ProgressTrackActive is the only element within the group that is inside the frame’s boundaries.
In order to keep the active bar centered horizontally, the active bar must retain the same height but be resizable horizontally.
To do this, select ProgressTrackActive and click on the right and bottom springs to make those dimensions static. Click on the center horizontal straight bar to change it to a spring, as shown in the screenshot below:
Test the settings you modified by selecting the ActiveProgressFrame and dragging the right transform handles to the right. The green bar should stretch as your resize the frame. If you drag a corner transform handle up or down, note that the green bar does not stretch vertically, but rather hugs the border of the frame.
Now you need a frame around the whole progress bar, so that you can make the entire progress bar resize as well as its frame changes. First, put everything in a group by selecting all elements (including the group you created already) and click Group in the toolbar. Name the new group Progress Bar. Your new group should look like the image below:
Select the Frame tool and drag a frame around the whole progress bar. Move the frame into the Progress Bar group and name your new frame ProgressIndicatorFrame. Check the box next to Apply only to entirely closed shapes. If you forgot why you’re doing this, check the three steps listed earlier in this section.
Select ProgressActiveGroup. As before, you want this frame to resize horizontally, but not vertically, in order to preserve the centering of the control’s elements.
Click the horizontal bar in the springs/struts settings to turn it into a spring. You also want the progress track to remain locked to the left, top, and right edges of the frame, so ensure that only the bottom bar is a spring. The image below illustrates what your frame resizing settings should look like:
Modify the resizing frame elements of ProgressTrack and Border shapes in the same manner.
Now it’s time to test it out! Select the ProgressIndicatorFrame and drag the transform handles around — your progress bar will resize horizontally, but your vertical dimension remains the same.
Select the ProgressTrackActive shape and click on the variable width button; it’s the small one with two square brackets and dot, immediately to the right of the Width attribute.
Save your changes so you don’t lose any of your precious work. You’re now ready to hook up your control in your app.