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
With our current implementation, we've hardcoded the playlist we're passing to our detail view by using a specific index value. Let's rewrite our implementation so that we can programmatically determine which playlist we're accessing.
Teacher's Notes
-
0:01
At this point, we have 90% of the app functionality done.
-
0:08
We know how to programmatically load a playlist, and
-
0:11
then pass that info to the detail view controller.
-
0:14
Right now however, we're working with one playlist, and
-
0:17
it's easy to pass that one playlist on because we
-
0:20
don't have to figure out which playlist we actually need.
-
0:23
Let's tackle that next.
-
0:26
The way our code stands right now, we've simply hard coded the playlist that we're
-
0:31
sending over by specifically setting the index to 0 in our init method.
-
0:37
What if we changed the index up in the ViewDidLoad method over here to 1?
-
0:43
Now our image view on the master page displays a different playlist cover image,
-
0:49
but when we tap it and go to the DetailViewController,
-
0:53
we still see the information for the playlist created using index 0.
-
0:57
Now, we could change the index value in the prepare for segue method again,
-
1:02
to 1, and to match the ViewDidLoad, but you see the problem with this.
-
1:07
We can't hard code every single thing, because that just won't work.
-
1:11
What we can do,
-
1:12
however, is programmatically figure out which album we're tapping.
-
1:17
And then use that information to pass on the right data to our
-
1:21
playlist detail controller in the prepare for segue method.
-
1:26
Before we do this however, let's modify our setup code so that we're not hard
-
1:30
coding index values when creating album instances and setting up our image views.
-
1:36
Earlier, we created a reference to the image view in our
-
1:39
storyboard scene with an outlet in our header file.
-
1:43
Now we've use this outlet to set the playlist cover image, and
-
1:47
do some other things as well, over here.
-
1:50
Soon, we're going to add a few more playlists to our app.
-
1:54
And we'll need to create an equal number of image views to match that.
-
1:58
Based on how we structured our code right now, we would have to create a playlist
-
2:02
instance for each of these image views, and set the cover image appropriately.
-
2:07
That's a lot of repeated code, and remember,
-
2:10
we want to adhere to the dry principle, that is, do not repeat yourself.
-
2:15
What we can do, instead of creating IB outlets for every single image view,
-
2:21
is to create a collection of IB outlets, or IB outlet collection.
-
2:26
In the playlist master view controller header file,
-
2:30
let's add an IB outlet collection to our class.
-
2:34
Now we'll start with a normal property declaration.
-
2:37
So I'm gonna do it above this one right here @property.
-
2:40
We're gonna specify it as strong and nonatomic.
-
2:46
Then this is followed by the IB outlet collection keyword,
-
2:51
which takes a class name for the group of outlets that we're creating.
-
2:56
In this case, in our case, this is image view.
-
3:00
UIImageView, specifically.
-
3:02
Since all our playlists will be of type UIImageView.
-
3:06
Now an IB outlet collection is always of type NSarray, since what this basically
-
3:12
does, is create an array that holds a collection of different IB outlets.
-
3:17
So next we specify NSarray, and then followed by an asterisk and
-
3:22
a name as usual.
-
3:24
Let's call ours playListImageViews.
-
3:28
Now, we can get rid of this playlistImageView outlet that we created.
-
3:34
Let's also go back to our storyboard and get rid of the reference.
-
3:40
Now, this can seem confusing.
-
3:42
So if you want to get rid of the reference in a more clear manner,
-
3:45
you can click on the image view and
-
3:47
click on the Connections Inspector to see everything connected to the image view.
-
3:51
Now with the connections view still open, select the View Controller either in
-
3:57
the document outline or using the icon in the scene.
-
4:01
And this should bring up a list of connections available to
-
4:04
the ViewController as a whole.
-
4:06
We can see that the outlet collection that we just created is listed in this section.
-
4:12
To add this image view to the IB outlet collections,
-
4:16
we just click on the plus button, and drag it over to our image view.
-
4:20
And now instead of having a single IB outlet instance,
-
4:24
we have this image view added to the collection.
-
4:28
Let's go back to our master view controller implementation file.
-
4:31
Now we need to modify our code to use the outlet collection rather than
-
4:36
this individual outlet.
-
4:38
So, let's get rid of this.
-
4:40
Since the outlet collection is simply an NSArray, we can use a for
-
4:45
loop and iterate over the array using an index counter.
-
4:50
So let's do that.
-
4:51
We'll do four.
-
4:51
We're gonna create an integer, NSUInteger.
-
4:57
We'll call it index and set it to 0 to initialize it.
-
5:02
Now we want the for
-
5:03
loop to keep going until it's just less than the playlist image view's count.
-
5:08
So we'll do index, less than self.playlistImageViews.count.
-
5:16
And then after all the code is executed, we want the index to increment by 1.
-
5:23
So in here, we do something.
-
5:25
So let's look at this loop.
-
5:26
First, we initialize the loop by setting the index to 0.
-
5:29
Now, we want this index to keep going, to keep looping over, until the index value
-
5:34
equals 1 less than the number of items in the image view's outlet collection,
-
5:39
that is the array, and we're going to use this index value now to
-
5:44
access the playlist image view instance from inside the array.
-
5:49
We'll also use the array then to create a new playlist instance each time.
-
5:54
When we're done with the segue code, we'll increment the index by 1.
-
5:57
So, let's do that.
-
5:59
First, we'll create the playlist instance.
-
6:02
This should all be familiar.
-
6:04
And we'll use the same init with index, but instead of
-
6:07
hard coding the index value, we'll pass in the index that we just created.
-
6:12
Next, we're going to get an image view out of the array using this same index.
-
6:17
Let's do UIImageView playlistImageView equal
-
6:23
self.playlistImageViews since that's an array and then we'll pass the index value.
-
6:30
Now we can use this playlist instance to setup this ImageView.
-
6:34
Let's do that.
-
6:35
PlaylistImageView.image equal
-
6:42
to playlist.playlistIcon.
-
6:47
And similarly, let's set the background color.
-
6:52
Now, when we add more image views to our view,
-
6:56
we don't need to set them up individually every time.
-
6:59
We're just going to add them to the outlet collection, which is in the array.
-
7:03
This automatically increases the array count that we've specified over here,
-
7:08
which increases our index range and sets up everything just as we did here.
-
7:13
Run the app, and again everything should work just like before.
-
7:18
There you go.
-
7:19
We have one bit of code here.
-
7:21
We need to get rid of this.
-
7:22
This is our previous creation of the playlist instance.
-
7:25
We don't need that anymore, so let's get rid of that.
-
7:29
Okay, now that we have our playlists and
-
7:31
the cover images set up properly, let's look at how we
-
7:34
can pass on the correct data to the detail view without hard coding any indexes.
You need to sign up for Treehouse in order to download course files.
Sign up