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
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.
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.
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.
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.
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.
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.
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.
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.
In this episode I fix a couple of bugs and fix the transition animation for the header view by leveraging UIView snapshotting.
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.
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.
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.
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.
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!