In this tutorial we will be recreating the Cover Flow UI using CollectionView, and filling those cells with Top albums from iTunes Music.

1. Set your app to landscape only

You can find the screen shown above when you click on the top item in your source tree of files which displays your project name.

2. Set your storyboard to landscape.

You can find this screen on the lower left of your storyboard view. Click it, and Click on the sideways phone shown all the way to the right of all those options. Now we are ready for the heavy stuff.

3. Create the views shown in the image below.

As you can see we have a collectionView with a CoverArt which is an imageView, two labels Artist, and Album. Go ahead and add those. Connect your UI with your code as shown in the right portion of the image. To connect UI with code right click and drag to your code.

4. Let’s set some properties in Storyboard.

Select your Album CollectionView, and expand the panel shown above. We need to set a few things to get the look we want. First we need to set the scrolling direction to Horizontal. This will rearrange our cells to be side by side, and thus we get part of that Coverflow look we are aiming for. Next we need to check the bounce on scroll checkbox. This may be already selected depending on your version of Xcode.

5. Getting JSON Data from iTunes RSS

We need to retrieve our URL which you can get here. I will provide you with a URL, however go to that link if you want to generate different data from iTunes. Click this link to get the URL we will be using. First create a file called iTunes RSS which will hold our boilerplate code used to store JSON data.

You do not need to copy this code, I will provide the GitHub link to it. This code simply conforms to Codable which means it is an object that will store all our data received from JSON. Now we will go to our ViewController to write our code that fetches the data.

Our function Parse() does a few useful things. First it fetches the JSOn data, and assigns the data to our array called feed which assigns the results of the JSON request to our structs that we implemented in the iTunes RSS file. Once the request is sent we reload the CollectionView, and also the InputViews. We can call this function in our ViewDidLoad() method. If you get an error it is because you need a function in the top of your ViewController class shown in the image below.

6. Setting up our CollectionView

We need to set two delegate protocols, the first one is UICollectionViewDelegate and the second one is UICollectionViewDataSource. Once you add these we need some protocol stubs which can be generated when. the error appears, or you can type them by hand. In this case wait for the error to show up, and click on fix. This will generate the two functions we need.

This is one of the required functions. This function sets the number of rows in our CollectionView. We go ahead and use our feed variable and get the number of items from the JSON request. You do not see the return keyword because we are using implicit return. I use it when I can because it looks clean.

In the function shown above is where we set the cell fields to our JSON response. We also have a line of code under the design MARK which plays animation when the UIImageView is visible.

The image above shows how our final app looks like. Things I would improve are, drop shadows. I wanted to add drop shadows, however that would have made this tutorial way more advanced. I aim for my tutorials to be easily understood. I hope you learned something today, happy coding.

Go to GitHub Project