Meet Up #4


We had four new members again! We spent about 45 minutes getting to know each other then we got into some code.

We added two new features. We displayed the album artwork of the currently playing song and we displayed the title of the currently playing song.


This week, we worked with a lot of new objects and properties and things. Don’t worry too much about understanding all of them or everything about any of them. Just know that this is what making apps is all about: using different objects, reading about them using Apple’s documentation, learning how to use them and how they interact. Don’t let yourself get overwhelmed. Click the links below, read a little about each object, and try to understand how they fit into our JustPlay app.

nowPlayingItem, MPMediaItem, MPMediaItemArtwork, imageWithSizeCGSize, UIImageView, UILabel

Practice App Materials

First, we added a UIImageView to our ViewController in our Storyboard. The ImageView is where the album artwork will be displayed. We used AutoLayout and Constraints to make sure that the ImageView is placed property so that when we put the album artwork in it, the artwork looks as it should. Then we control dragged from the ImageView into our ViewController.Swift file and created an @IBOutlet for it.

 @IBOutlet weak var nowPlayingItemArtworkImageView: UIImageView!

We also added a UILabel to our interface by dragging one out from the object library. We used the proper constraints here as well and created an outlet for it.

@IBOutlet weak var nowPlayingItemLabel: UILabel!

In our ViewController.Swift file, in viewDidLoad, within our if statement, we set the image of the nowPlayingItemArtworkImageView to the image of the artwork and the nowPlayingItem. We do this by calling imageWithSize(CGSize), where CGSize in this case is the size of the bounds of our nowPlayingItemArtworkImageView. This makes sure that when our app launches, the artwork is properly displayed in our UIImageView.

nowPlayingItemArtworkImageView.image = myMusicPlayer.nowPlayingItem.artwork.imageWithSize(nowPlayingItemArtworkImageView.bounds.size)

We do a similar thing for our label. We set the text of the nowPlayingItemLabel to the title of the nowPlayingItem.

nowPlayingItemLabel.text = myMusicPlayer.nowPlayingItem.title

We call both of these again in our @IBAction func actionButton under the “NEXT” case of the switch statement. That way, anytime we tap next, the artwork and the label are updated properly.