PaintCode Tutorial for Developers: Custom Progress Bar

Setting up Variables

Now that you have the basic progress bar ready, it’s time to use one of PaintCode’s coolest features: Variables. In the left pane, you’ll see a section at the very bottom named Variables. Click the plus button and select Number from the popup menu.

Rename the number variable to progress and dismiss the popover:

Click on the Progress Active element in the right pane to select it. You’ll now connect the progress variable to the Progress Active element’s width.

Drag from the circle next to the numeric value of the progress variable you just created to the Width property for Progress Active:

Click and drag up and down over the numeric value of the progress variable; you’ll see the progress bar’s width change to match the value of the variable:

Note: Along with numeric variables like this one that dynamically change numeric attributes, you can also create expression variables. Want the width to grow twice as fast as the variable? Create an expression that multiplies the progress number variable by two – and use that expression variable as the input for the bar’s width attribute.

Awesome job! You’ve finished the progress bar in PaintCode and are ready to take it into your iOS project.

Adding the Progress Bar to your Project

Before exporting the progress bar from PaintCode, download the starter project and take a look at what it contains.

The Starter Project

Songy shows a list of music stored in your Music library along with some buttons for you to interact with. Build and run the application to see what the app currently looks like; You should do this on a device with music in the device’s library so you have some music show up in the table view.

Play any song; you’ll notice there’s no progress indicator for the current song. This is where your custom progress bar comes into play.

Start by looking at Main.storyboard. This consists of a single scene with a table view to show the list of songs along with their album art. Below the table view, there are three labels to show the current song name, artist name, and album name.

While not visible, right below the last label is a UIView that will contain your custom progress bar. Finally, you have four buttons to change to the previous and next songs, play or pause, and stop the current song.

Switch over to ViewController.swift and briefly walk through the code that’s in place. At the top of the class there are outlets for all of the UI elements that the app needs to talk to.

Below these is an MPMusicPlayerController property that is initialized with the application music player, followed immediately by an array of MPMediaItem objects that return all of the items in your music library.

Below the property declarations, viewDidLoad() calls updatePlayerLabels(_:artist:album:) to clear the three labels of any placeholder text that may have been there when loading the controller from the storyboard. It also schedules an instance of NSTimer to call refresh().

updatePlayerLabels(_:artist:album:) updates the current song name, artist and album name.

refresh() is called repeatedly by the timer. It gets the current playing item (if one exists) and calls updatePlayerLabels(_:artist:album:) to show the information corresponding to the current song that is playing – or nothing if there is no song playing. This is the method you’ll modify to update your progress bar.

The IBAction methods for the Next, Play/Pause, Previous, and Stop buttons do what you’d expect as well as guard against the event that no song is currently playing. This will prevent nasty crashes.

Finally, the table view data source and delegate methods take care of displaying the music library information, and plays the song when one is selected.

Time to switch back to PaintCode so you can export the progress bar into the project.

Adding the PaintCode Code to Your App Using StyleKit

If you’ve read our PaintCode Tutorial for Designers, you’ll know all about the StyleKit class, which is generated by PaintCode and contains all the drawing code. Canvases are automatically added to the StyleKit catalog, so your progress bar is all ready to go.

In PaintCode, click on File\Export. In the popup window, click the StyleKit button and fill out the required information as follows:

Click the Export button. When prompted, locate the Songy project code folder and click Save.

Back in Xcode, add the exported Swift file to your project either by dragging it into the Project Navigator, or by right-clicking the Songy folder in the Project Navigator and selecting Add files to “Songy”…:

You’ve now added the drawing code to your project.

If you look at PaintCodeTutorial.swift you’ll see that it’s a simple NSObject with a drawProgressBar() method. Next you need to create a UIView subclass that calls this method to draw the progress bar.

Right-click the Songy folder in the Project Navigator and select New File…. Choose iOS\Source\Cocoa Touch Class and click Next. Name the class ProgressBar and make it a subclass of UIView. Click Next and save the file into your project directory.

Open ProgressBar.swift and uncomment drawRect(_:). By overriding this method you can do any custom drawing you need.

Call the generated PaintCode code like so in drawRect(_:):

override func drawRect(rect: CGRect) {
  PaintCodeTutorial.drawProgressBar()
}

I always forget to change the UIView class in the storyboard – so I’ll remind you of it now! :] Switch over to Main.storyboard.

Inside the storyboard, locate the UIView below the labels. It’s white, so you might not be able to see it in the scene. Select Progress View from the Document Outline. With the view selected, switch to the Identity Inspector and change the class to ProgressBar.

Build and run your application; you’ll see the first version of your custom progress bar:

Yup – it’s that easy to integrate PaintCode elements in your app! Simply export the StyleKit from PaintCode and call the StyleKit drawing method from drawRect(_:) in a UIView subclass.

The bar doesn’t quite stretch to the device width. This is because you’re using the default version of the PaintCode method – you’ll fix that shortly.

One of the best features of PaintCode is its tight integration with Xcode projects. You’ll next make a few changes in PaintCode and re-export the progress bar out to Xcode.