
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.
Installments
1. Road Trip DJ Part 1
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
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
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
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
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
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
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
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
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
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
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
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
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)
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!