When we tap on a cell in the search results to select it,

it loads a second table view that displays all the artist albums.

So back in the Storyboard scene, let's drag out another Table View Controller.

Once you place it, let's drag, let's CTRL drag from the Prototype Cell here

over to the new Table View Controller to create a new segue.

We want a Show Segue, so that the second table view is pushed

onto the navigation stack to indicate a hierarchy of information.

Let's set the identifier property on this new segue to showAlbums, with an s.

And then if we run the app to make sure this works.

So I'll search iTunes, we'll tap here to get our fake data and

then we'll tap to go to this new view controller.

So this works, but you'll notice that the search bar is still present on the top.

To fix this, let's head over to the SearchResultsController sub class and

in viewed load, we're gonna add another piece of code.

Viewed load is getting a bit crowded so we might have to clean this up but

we're gonna say set or rather definesPresentationContext = true.

This property takes a boolean value that indicates whether this view controller's

view is covered when the view controller, or one of its descendents,

presents another view controller.

So, by setting it to true,

it is indeed covered, which includes covering the search bar.

So, if we run it now.

Search iTunes,

tap on the search bar, get the result and there we go, that looks better.

When you ran the app, you might have run into some weird behavior where

tapping on the result cell segue to the new table view control but

was presented modally instead of being pushed onto the nav stack as indicated.

Now I ran into that when I was prototyping the app and the way I worked around it was

the embed each table view controller into its own navigation controller.

The segue would still go from one table view controller to another but

then we got the desired behavior.

Okay so now we have our scene set up so let's focus on creating this

prototype cell right here for the new Table View Controller.

We're going to set the prototype to Custom and

we'll give it a custom height of 80 points in the size inspector.

Next, let's drag out an image view.

Drop it right in there and give it the following constraints.

So we're going to give it a height and width of 80 points.

You're gonna set it leading space to super view zero points.

And top space to super view zero points.

Essentially we want it to fill the entire cell top to bottom.

In the teacher's notes,

there's a link to download an image called Album Placeholder.

Add this to your asset catalogue, and then set the Image Views Image

to this placeholder with a content mode of Aspect Fit.

So, head over to the Attributes Inspector and then Image, Album Placeholder,

Content Mode, Aspect Fit.

Okay next, let's drag out three labels.

So one, two and three.

For the first one, let's set the text to Album Title and

leave the rest of the settings as default.

For the second one, give it a text of Genre.

We're going to set the color to Light Gray.

And for the font, we'll set it to 14 points for the system font.

For the last label, we're going to use this to display the albums release date.

So, we'll set the text to Jan 01 2017.

So, this is the date format that we'll eventually be using to show

the release dates to users.

For this one as well, we'll set the color to Light Gray and the font to 14 points.

Now, select all three labels,

you can hold down the shift button to do this and then we're gonna click the second

button from the left in the auto layout submenu to embed them in a stack view.

Since all we're going to do is lay these labels out vertically with equal spacing,

it's easier to let the stack view do the work.

So if you have the stack view selected which might be easier in

the documents outline.

In the attributes inspector, make sure the axis is set to vertical,

the alignment is set to leading, and the distribution is set to equal spacing,

and give it a spacing value of four points.

All this means is that the labels will now be four points away from each other.

Now, instead of adding constraints to the labels individually, we can just add

constraints to position the stack view and it'll handle all the sub views.

So we're going to center this vertically in the container and

give it a leading space to the image view with 8 points of spacing.

Designing the Prototype Cell isn't enough though.

We still need a Table View Controller subclass and a custom cell subclass.

Before we leave the Storyboard file, let's give this prototype right here,

this Table View cell a reuse identifier of AlbumCell.

Okay, now in the Controllers group, let's add a new file.

There's the Cocoa Touch Class.

A subclass of UITableViewController and

we'll call this AlbumListController.

Like the last one, we're just going to go ahead and get rid of all of

the boiler plate code, because we will be working through this ourself.

For now, we're going to implement a single delegate method to adjust the row height.

Because remember, just setting a custom height in a prototype cell

doesn't mean it'll be reflected like that in the table view.

Now instead of just returning 80, which is the height we want, that's going to look

like a magic number that doesn't have much meaning, so we're going to create

a private struct in here with a static property to hold onto this constant value.

This way, again, we get some name spacing and meaning around the value.

So private struct Constants,

static let AlbumCellHeight.

It's of type CGFloat and the value is 80.

Now notice that I'm using upper camel case for the name.

And that's because it's a somewhat loosely applied convention for constant values.

So down here I can say, let me move that up.

So you can see that a bit better.

I can say Table View Delegate, and

we're going to implement heightForRowAt IndexPath and

I'll return Constants.AlbumCellHeight.

Next we need a custom cell subclass.

So, right click on the Views group, add a new file, Cocoa Touch subclass again.

This is going to be a subclass of UITableViewCell and

we'll call this, you guessed it, AlbumCell.

Now in here, to start off, let's add a static property to keep reference

to that reuseIdentifier we defined.

So static let reuseIdentifier = AlbumCell.

Now all that's left to do now is go back to the Storyboard.

We can assign these new sub-classes as underlying classes for the scene.

So Table View Controller, identity inspector.

This is now the Album List Controller.

And the cell has an underlying class of AlbumCell, perfect.

Okay, now we need to set the outlets from this

prototype cell to go over to our custom sub-class.

So clear up some room.

Go to the Assistant Editor.

And we want to find the, which is under the Views group, the AlbumCell.

Okay, and add our outlets.

So first is, whoops.

Where's the correct?

There we go.

Let's see. Okay, so the first one is the ImageView,

and we'll call this artworkView.

Next is the Album Title.

We'll call this albumTitleLabel.

After that is the genreLabel.

And then finally the releaseDateLabel.

Okay, perfect.

With this UI setup, we can now go ahead and implement a data source object so

we can display our stub data inside this Table View Controller.