Road Trip DJ

Build a music player from scratch. Covers many of the in between details that are hard to cover in topic-based episodes. This series covers building custom UI, integrating with audio and the music library, and much more.

Length: about 3 hours.

Start Series

Installments

1. Road Trip DJ Part 1

free

In this episode we start building an app from scratch called Road Trip DJ. The idea is the build a playlist of music on the fly while it is playing. This is an app I've wanted to build for a while and it serves as a good, small app we can build from start to finish.

2. Road Trip DJ Part 2

free

In this episode we continue Road Trip DJ and implement the media picker controller, talk about the different modes that in can operate in and how that affects the usability of this app. We also consider how we're going to build a playlist and keep appending items to it.

3. Road Trip DJ - Part 3

free

Continuing our build out of Road Trip DJ, this time I focus on the music player, and keeping the play/pause button in sync on UIToolbar, which proves to be more difficult than it should be.

4. Road Trip DJ Part 4

Subscribers only

In this episode I put some custom icons in the player bar and convert this into a control that can be displayed in interface builder, complete with configurable spacing between buttons using Interface Builder.

5. Road Trip DJ - Part 5

Subscribers only

This time we work on the collection view layout and cells, along the way we create an abstraction of our media items to make development go a bit faster and to allow the app to display content in the simulator.

6. Road Trip DJ - Part 6

Subscribers only

In this episode we make a custom collection view header to prominently display the currently playing track. We also fix up some auto layout issues from the last episode.

7. Road Trip DJ - Part 7

Subscribers only

In this episode we wire up the next / previous track buttons and modify which track is currently shown in the header. We also encounter an unexpected issue when comparing signed and unsigned integers.

8. Road Trip DJ - Part 8

Subscribers only

In this episode we fix the playlist header at the top, first by a custom collection view layout, then by simply using a custom view at the top.

9. Road Trip DJ - Part 9

Subscribers only

In this episode I fix a couple of bugs and fix the transition animation for the header view by leveraging UIView snapshotting.

10. Road Trip DJ - Part 10

Subscribers only

In this episode we adapt MPMediaItem to our PlaylistItem protocol and fix some issues related to running on the device. We add play/pause functionality, and discuss the issue of hit area on our toolbar buttons.

11. Road Trip DJ - Part 11

Subscribers only

In this episode I address the usability concerns of our toolbar buttons. I removed the bar button item spacing elements and instead use auto layout to control the size of the buttons. We also add a visual indicator of how wide each button is when you tap it, and fix the play/pause state of the middle button.

12. Road Trip DJ - Part 12

Subscribers only

In this episode I do some deep auto-layout constraint debugging with Reveal, and discuss how to make our header resize based on the device we're running on.

13. Road Trip DJ - Part 13

Subscribers only

In this episode we fix up the scrollbar, handle taps and update the active track, as well as adding a background color to the active row.

14. Road Trip DJ - Part 14 (Final)

Subscribers only

In this episode we wrap up our long Road Trip DJ Series. We resume testing on the device, uncovering and fixing an auto-layout issue, working with the music players events to keep our UI in sync, implementing a song progress indicator and implementing scrubbing. Phew!