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 the sectioned data at hand all we need to do is update the implementations to the data source methods
-
0:00
To get the section sorted data into our tableView,
-
0:03
we need to rewrite the implementations to the data source methods and
-
0:07
add a few more protocol methods to give the tableView some of this extra detail.
-
0:12
Before we do any of that though, we need to switch out our data source.
-
0:15
We're no longer using just the basic context array.
-
0:18
Because we want the section context.
-
0:20
So I'll say var sections = ContactsSource.sectionedContacts.
-
0:28
We get a couple errors here and there when we do this, but they're easy to sort out.
-
0:33
So the first data source method number of sections is now invalid,
-
0:37
because we don't have a single section anymore.
-
0:40
Let's replace this one with sections.count.
-
0:44
Now we'll have an appropriate number of sections for the tableView to display.
-
0:49
Okay? What about rows?
-
0:51
The implementation for the number of rows in section is also incorrect.
-
0:55
Remember that tableView is setting itself up and calls this method,
-
0:59
it always provides an argument for which section it's currently in.
-
1:03
When we first provided an implementation for this method
-
1:06
we ignored the section argument because we just had the one long list.
-
1:10
We can now use that argument to retrieve the nested array for
-
1:14
the correct section and return the number of values.
-
1:17
So we'll say return sections, and this is an array of arrays.
-
1:20
So we want to first get a nested array,
-
1:23
and we'll do that by using the section argument.
-
1:26
And now we want to call count on that inner array
-
1:29
to return the number of rows for each section.
-
1:32
We have two more errors here and
-
1:34
that's because we're now trying to retrieve a single contact
-
1:38
from a nested array, so basically from the outside right we need to fix it.
-
1:42
The fix here is simple though we first need to get that nested array
-
1:46
out using the section value from the index path argument.
-
1:50
Now earlier we discarded that and it's easy, so let contact equals, so
-
1:54
we'll get rid of all of this.
-
1:56
We'll say sections and first we want to get the right inner array,
-
2:01
we'll say indexPath.section and then, from that inner array,
-
2:05
we want to get the right rows so, indexPath.row.
-
2:09
If you're confused as to what's going on here,
-
2:12
all I'm doing is chaining subscript calls indexPath.section,
-
2:16
as an index value, is going to get me the appropriate nested array.
-
2:20
And then from there, I'll use indexPath.row, just like before,
-
2:24
to match up the row to the array value.
-
2:26
And we need to do the same thing below, to get rid of that error.
-
2:29
So we can just copy and paste.
-
2:33
If we run the app now, so everything is sorted properly, which is awesome.
-
2:41
But our contacts aren't sectioned off.
-
2:44
And that's because while the tableView now knows about our sections and
-
2:47
how to section off our data,
-
2:49
we haven't given any information about how to title and display the section.
-
2:53
So let's add one more data source method, and I'll do it at the top.
-
2:58
This method is an optional method in the protocol because as we saw
-
3:01
earlier we won't always have section data.
-
3:04
This method is called tableView titleForHeaderInSection.
-
3:09
And returns a string to use as a title for a given section.
-
3:13
Before we provide an implementation let's add here as a stored property,
-
3:19
the array of unique first letters to use as titles.
-
3:22
So I'll say, let sectionTitles = ContactsSource.sortedUniqueFirstLetters.
-
3:30
Now, back in the method, we can return the right string to use as a title for
-
3:34
the relevant section pretty simply by saying return sectionTitles[section].
-
3:40
Right, so this is the section argument passed in when the tableView
-
3:43
calls this method, and we use that to get the correct letter, run the app again,
-
3:48
now we need to include the override keyword here,
-
3:52
now if we run it, we still have an error, okay no more.
-
3:56
Xcode is just now catching up with me Hey, look at that pretty awesome, right?
-
4:02
So it says A, all the contacts with the letter A,
-
4:06
and goes that way all the way down.
-
4:09
We can do one more cool thing though,
-
4:11
you know how in the contact sample on the right-hand side there's this
-
4:14
index of sections titles that you can tap to quickly go to section?
-
4:18
Let's add that as well.
-
4:20
Now the Data Source method we need to provide for
-
4:22
an implementation here, is sectionIndexTitles for tableView.
-
4:26
We'll do that at the top.
-
4:27
So we'll say sectionIndexTitles for tableView and
-
4:31
we need to return an array of section titles.
-
4:35
That's easy, we've already done this work.
-
4:37
So, we'll go ahead and return the section titles array.
-
4:40
And now if we run the app as always, I forgot my override keyword.
-
4:46
If you run the app now, look at that.
-
4:49
We've built ourselves a decent contacts app.
-
4:52
You can actually click here to quickly go to the letter.
You need to sign up for Treehouse in order to download course files.
Sign up