PaintCode Tutorial for Developers: Custom Progress Bar

As you may know, PaintCode is a fantastic little Mac app that turns your vector graphic designs into Core Graphics code you can easily use in your iOS apps.

A while back we wrote a PaintCode tutorial for designers and a PaintCode tutorial for developers that taught you how to create and animate a stop watch control in PaintCode, and integrate it into your own iOS app. You learned a lot; but that only scratches the surface of what PaintCode can do!

In this intermediate PaintCode tutorial, you’ll draw a dynamic custom progress bar in PaintCode. You’ll then add this progress bar to Songy, a music player app, to show the progress of the song playing from your device’s music library.

To properly test Songy, you will need a physical iOS device with at least one song stored in your music library. You can still follow along with the simulator, but you won’t be able to see the progress bar update in real time.

Without further, it’s time to get started on your custom progress bar!

Getting Started

First make sure you have a paid copy of PaintCode. The free trial will not work for this tutorial; it has a number of restrictions such as the inability to copy/paste, the inability to export code, and more.

Then open PaintCode and create a new document by going to File\New on the main menu.

Ensure that your PaintCode screen is set up with the Library on the left and that the Code panel at the bottom is visible and set to iOS > Swift. It’s always interesting to see the generated code as you move through the tutorial – if nothing else, it’s a cool way of learning Core Graphics! :]

Use the Inspector to rename the canvas to Progress Bar and set the Width to 290 and the Height to 13:

Your canvas is now the correct size for the progress bar you’ll be making in this tutorial.

The basic elements that make up the progress bar are two rectangles with a corner radius. The first rectangle will be a stroke outline of the entire progress bar. The second rectangle will be a solid fill, which will indicate how much of the song track has been played.

In the toolbar at the top, click on the Rect button (the left-most button), then click and drag inside the canvas to create a rectangle. Don’t worry about how things look just yet – you’ll use the Inspector to fix that.

Click on the newly created rectangle to select it, then use the Inspector to change the name of the rectangle to Progress Outline. Set the Radius to 5, then modify the position and size of the rectangle to have X and Y values of 1, Width of 288, and Height of 10. Set the Fill color to No Fill and assign any color you like to Stroke:

You’ll change the final color once you’ve finished creating the progress bar.

Check out your canvas and you should have something that resembles the following image:

Next up – a second rectangle for the song progress indicator.

Click the Rect button in the toolbar and then click and drag inside of your canvas. In the Inspector, change the name of the rectangle to Progress Active, the Radius to 5, the X and Y values to 1, Width to 288, and Height to 10.

Select a Fill color and click the x next to Stroke to remove it:

Your progress bar should look like the following:

PaintCode Frames

Frames in PaintCode let you to create flexible elements. For example, you’ve created a progress bar that’s exactly 288 pixels wide. However, you probably want this control to resize for different screen sizes.

When you create a frame, PaintCode encloses the generated drawing code into a method where one of the parameters is the frame’s rectangle. Using PaintCode, you can then adjust how objects, such as your progress bar’s rectangle, resize within the frame.

In the top toolbar, click the Frame button and then click anywhere within the gray progress bar.

Look at the generated code in the Code section at the bottom of the screen; it has a method header with a frame property. The origin of your progress elements will depend upon this property.

Time to enclose your control in a frame.

Click Frame in the Browser pane on the right side. Ensure the Apply only to entirely enclosed shapes option is checked; this means that only shapes positioned entirely within the frame will be affected by your changes. This keeps the grey progress bar from moving out of position while you change the frame’s properties.

When the progress bar is fully enclosed, any changes you make to the frame’s properties will also change the progress bar’s properties.

Change the X and Y values to 0, Width to 290 and Height to 12:

If you look at the code at the bottom of the screen, you’ll see the Progress Outline rectangle width still doesn’t depend on the frame value:

//// Progress Outline Drawing
let progressOutlinePath = UIBezierPath(roundedRect: CGRect(x: frame.minX + 1, y: frame.minY + 1, width: 288, height: 10), cornerRadius: 5)
UIColor.blackColor().setStroke()
progressOutlinePath.lineWidth = 1
progressOutlinePath.stroke()

To fix this, you’ll configure the resizing constraints in the Inspector. Select the Progress Outline rectangle:

The constraints here indicate the relationship between the shape and its frame. In this case, the width constraint is a straight line, meaning the rectangle’s width doesn’t depend on the frame. Click the Width constraint to change it to a wavy line:

Now your rectangle will resize when the frame resizes. The generated code for progressOutlinePath changes to reflect this:

let progressOutlinePath = UIBezierPath(roundedRect: CGRectMake(frame.minX + 1, frame.minY + 1,
         floor((frame.width - 1) * 0.99654 + 0.5), 10), cornerRadius: 5)

When you resize Frame, Progress Outline will resize too:

Note: In the above animated GIF demonstrating how Progress Outline resizes with the frame, I’ve hidden the Progress Active rectangle just for demonstration purposes.

Voilà – you have the basic progress bar. Now to dynamically resize Progress Active.