Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
When a user selects an artist, the next step is to load a list of albums. In this video, let's get started on configuring the AlbumListController.
Downloads
-
0:00
When we tap on a cell in the search results to select it,
-
0:03
it loads a second table view that displays all the artist albums.
-
0:07
So back in the Storyboard scene, let's drag out another Table View Controller.
-
0:13
Once you place it, let's drag, let's CTRL drag from the Prototype Cell here
-
0:21
over to the new Table View Controller to create a new segue.
-
0:25
We want a Show Segue, so that the second table view is pushed
-
0:29
onto the navigation stack to indicate a hierarchy of information.
-
0:34
Let's set the identifier property on this new segue to showAlbums, with an s.
-
0:41
And then if we run the app to make sure this works.
-
0:45
So I'll search iTunes, we'll tap here to get our fake data and
-
0:48
then we'll tap to go to this new view controller.
-
0:52
So this works, but you'll notice that the search bar is still present on the top.
-
0:57
To fix this, let's head over to the SearchResultsController sub class and
-
1:02
in viewed load, we're gonna add another piece of code.
-
1:05
Viewed load is getting a bit crowded so we might have to clean this up but
-
1:09
we're gonna say set or rather definesPresentationContext = true.
-
1:15
This property takes a boolean value that indicates whether this view controller's
-
1:20
view is covered when the view controller, or one of its descendents,
-
1:24
presents another view controller.
-
1:26
So, by setting it to true,
-
1:27
it is indeed covered, which includes covering the search bar.
-
1:30
So, if we run it now.
-
1:31
Search iTunes,
-
1:33
tap on the search bar, get the result and there we go, that looks better.
-
1:39
When you ran the app, you might have run into some weird behavior where
-
1:43
tapping on the result cell segue to the new table view control but
-
1:47
was presented modally instead of being pushed onto the nav stack as indicated.
-
1:52
Now I ran into that when I was prototyping the app and the way I worked around it was
-
1:57
the embed each table view controller into its own navigation controller.
-
2:01
The segue would still go from one table view controller to another but
-
2:06
then we got the desired behavior.
-
2:08
Okay so now we have our scene set up so let's focus on creating this
-
2:13
prototype cell right here for the new Table View Controller.
-
2:18
We're going to set the prototype to Custom and
-
2:22
we'll give it a custom height of 80 points in the size inspector.
-
2:29
Next, let's drag out an image view.
-
2:32
Drop it right in there and give it the following constraints.
-
2:36
So we're going to give it a height and width of 80 points.
-
2:41
You're gonna set it leading space to super view zero points.
-
2:45
And top space to super view zero points.
-
2:48
Essentially we want it to fill the entire cell top to bottom.
-
2:52
In the teacher's notes,
-
2:53
there's a link to download an image called Album Placeholder.
-
2:57
Add this to your asset catalogue, and then set the Image Views Image
-
3:01
to this placeholder with a content mode of Aspect Fit.
-
3:05
So, head over to the Attributes Inspector and then Image, Album Placeholder,
-
3:10
Content Mode, Aspect Fit.
-
3:12
Okay next, let's drag out three labels.
-
3:16
So one, two and three.
-
3:20
For the first one, let's set the text to Album Title and
-
3:24
leave the rest of the settings as default.
-
3:29
For the second one, give it a text of Genre.
-
3:34
We're going to set the color to Light Gray.
-
3:37
And for the font, we'll set it to 14 points for the system font.
-
3:42
For the last label, we're going to use this to display the albums release date.
-
3:46
So, we'll set the text to Jan 01 2017.
-
3:52
So, this is the date format that we'll eventually be using to show
-
3:56
the release dates to users.
-
3:58
For this one as well, we'll set the color to Light Gray and the font to 14 points.
-
4:04
Now, select all three labels,
-
4:07
you can hold down the shift button to do this and then we're gonna click the second
-
4:11
button from the left in the auto layout submenu to embed them in a stack view.
-
4:17
Since all we're going to do is lay these labels out vertically with equal spacing,
-
4:22
it's easier to let the stack view do the work.
-
4:24
So if you have the stack view selected which might be easier in
-
4:27
the documents outline.
-
4:28
In the attributes inspector, make sure the axis is set to vertical,
-
4:33
the alignment is set to leading, and the distribution is set to equal spacing,
-
4:39
and give it a spacing value of four points.
-
4:44
All this means is that the labels will now be four points away from each other.
-
4:48
Now, instead of adding constraints to the labels individually, we can just add
-
4:52
constraints to position the stack view and it'll handle all the sub views.
-
4:56
So we're going to center this vertically in the container and
-
5:00
give it a leading space to the image view with 8 points of spacing.
-
5:07
Designing the Prototype Cell isn't enough though.
-
5:10
We still need a Table View Controller subclass and a custom cell subclass.
-
5:15
Before we leave the Storyboard file, let's give this prototype right here,
-
5:20
this Table View cell a reuse identifier of AlbumCell.
-
5:24
Okay, now in the Controllers group, let's add a new file.
-
5:29
There's the Cocoa Touch Class.
-
5:32
A subclass of UITableViewController and
-
5:36
we'll call this AlbumListController.
-
5:42
Like the last one, we're just going to go ahead and get rid of all of
-
5:46
the boiler plate code, because we will be working through this ourself.
-
5:55
For now, we're going to implement a single delegate method to adjust the row height.
-
6:00
Because remember, just setting a custom height in a prototype cell
-
6:03
doesn't mean it'll be reflected like that in the table view.
-
6:06
Now instead of just returning 80, which is the height we want, that's going to look
-
6:11
like a magic number that doesn't have much meaning, so we're going to create
-
6:15
a private struct in here with a static property to hold onto this constant value.
-
6:19
This way, again, we get some name spacing and meaning around the value.
-
6:23
So private struct Constants,
-
6:27
static let AlbumCellHeight.
-
6:32
It's of type CGFloat and the value is 80.
-
6:36
Now notice that I'm using upper camel case for the name.
-
6:39
And that's because it's a somewhat loosely applied convention for constant values.
-
6:45
So down here I can say, let me move that up.
-
6:50
So you can see that a bit better.
-
6:52
I can say Table View Delegate, and
-
6:56
we're going to implement heightForRowAt IndexPath and
-
7:01
I'll return Constants.AlbumCellHeight.
-
7:06
Next we need a custom cell subclass.
-
7:09
So, right click on the Views group, add a new file, Cocoa Touch subclass again.
-
7:16
This is going to be a subclass of UITableViewCell and
-
7:20
we'll call this, you guessed it, AlbumCell.
-
7:26
Now in here, to start off, let's add a static property to keep reference
-
7:31
to that reuseIdentifier we defined.
-
7:34
So static let reuseIdentifier = AlbumCell.
-
7:44
Now all that's left to do now is go back to the Storyboard.
-
7:48
We can assign these new sub-classes as underlying classes for the scene.
-
7:53
So Table View Controller, identity inspector.
-
7:56
This is now the Album List Controller.
-
7:59
And the cell has an underlying class of AlbumCell, perfect.
-
8:03
Okay, now we need to set the outlets from this
-
8:07
prototype cell to go over to our custom sub-class.
-
8:10
So clear up some room.
-
8:11
Go to the Assistant Editor.
-
8:15
And we want to find the, which is under the Views group, the AlbumCell.
-
8:22
Okay, and add our outlets.
-
8:24
So first is, whoops.
-
8:29
Where's the correct?
-
8:30
There we go.
-
8:31
Let's see. Okay, so the first one is the ImageView,
-
8:34
and we'll call this artworkView.
-
8:38
Next is the Album Title.
-
8:41
We'll call this albumTitleLabel.
-
8:45
After that is the genreLabel.
-
8:51
And then finally the releaseDateLabel.
-
8:58
Okay, perfect.
-
9:00
With this UI setup, we can now go ahead and implement a data source object so
-
9:04
we can display our stub data inside this Table View Controller.
You need to sign up for Treehouse in order to download course files.
Sign up