Welcome back again.
In this lesson we look at how to implement a table view within a single view application.
So essentially seek out the use of table view controller.
This should give us a little bit of a better sense of how a table view actually works.
So let's going to explode and yet I'm going to start a new application.
I'm going to call it my table view in single view.
So that's my table view in a single view application on what I head into this storyboard and my storyboard.
I'm going to have to make a table view which is essentially this guy in yet another table view controller
is just the table view part of it something and that I get table view here maybe place it somewhere
nice and tidy like that and then actually want to add one more function to this table view which is
when I type on a cell I want to know which cell we have selected.
So to do that I'm actually going to go ahead and add a label in here that tells me which type or which
cell I have top 10 I'm going to add the labor going here and say let's change some of the settings in
here and I'm going to set all the constraints for all of these guys.
I'm going to say this is a type a space a leading space a trailing a space.
It always has the same height.
My table view has a vertical spacing as the leading spacing has a trailing spacing and has a bottom
spacing so so far I have a labor and I have a table view.
Now if you recall from the last listen table of use they also need to have a prototype cell of it in
them.
So I'm going to go in here the outlets and I'm going to add a table view cell.
My dragnet over there.
So now they have the cell in here I'm going to go ahead select this cell and again give it an idea.
Just like the last time I'm going to say this is called Cell I.D. or a gain any name that you want to
give it.
And then what you need to do is you need to change the style of your cell.
I'm going to make it basic once again.
So it's only a titan.
I'm also going to make one more really no small change in here I'm going to select my table view cohere
in the dimensions and say my raw height is not automatic which essentially means it is not inferred
from their programming values or the default values.
So when I actually manually change the raw height to be maybe 64.
So is a bit of a taller role for each of them.
The second thing I want to change is I want to select my table view and going here in these attributes
and there is a little line that you might be able to see that separates every two says I want to go
ahead in here and say My separator is a single line and that single line is actually this color a bluish
color something like that.
And I want to say that the separator also has an inset which makes it 15 units from left then right
are inset that is something like that.
So my separator line is not covering the entire vit of the cell.
It has a little space here on the left and there's a little space here on the right.
So that's all I'm going to do in here.
Now the last time where we use the UI table view controller the table view was automatically connected
to the view controller.
This time we actually have to introduce outlets for it.
So I'm going to go in here select my assistant window button and go in here and say I have the label
of course that's got my label and then I'm going to go ahead and have my table view.
So that's going to become my table view.
So now I have both of these outlets there in my programming side.
I have the labor and I have my table view.
So let's go back to the view controller and in here we have to know right the codes that he's going
to be populating our table view.
The first thing I have to do is I have to conform this view controller to two new delegates one of them
is called you eye table view delegate and the other one is called you eye table view data source.
So just like Harvey used to do it in a picture view we are making sure that this view controller provides
the source for everything that we want to see on the table view and that is telling me you have to conform
it and you have to use all the methods for it.
There are only two real methods that must be here that the table view wouldn't work without them.
One of them is the number of rows for us in section and the other one is the self photo rule.
So I could actually go ahead and let him autocomplete and I'm going to write them myself so we can see
how it works and get it going.
Yeah at the bottom of the view that load I'm keeping the view the Droid because we still need to do
something.
So one of those methods is number of rows in Section.
This is the one that we used last time and it has to return a value for now I'm going to say return
to zero and then the other one.
Let me get myself a little bit better a space maybe I could do this maybe a quick format.
These are not like them like that.
But anyway.
So the other one is sell for raw at index path and that's the other method that must be there.
So our table view knows how to do it.
So for the two of these let's go ahead and say we want to repopulate the same thing as before.
We want to show names of the cities some logo up here and say I have a list cities array to become Vancouver
New York
real or like that New Delhi wash.
And that's all the cities that I want to have.
So the number of rows in this sections be cities are a that count and in the table view sell for a role.
You have to return a you a table.
You said so I'm going to go ahead and say do this.
I'm going to say let's sell the B table view DOD D Q Using identifier and the identifier was settled
I.D. That's the identify that we made ourselves in the storyboard.
Then I'm going to go ahead and say return said by now all the errors are going to disappear and the
application is actually going to run but he doesn't really do anything for me and I forgot to make sure
that this thing actually exists or I'm going to make it a forced unwrapped because I know that I have
a self identifier still I.D. So now that all the errors are gone we actually have to customize the values
of the cell and just like the last time I'm gonna say sell the text label that text becomes whatever
you have in the cities are a at that index.
So index parts index part got to roll.
So now we have the cells showing the right values but if you run this application is not going to show
me anything and I want you to take a moment and think about the why that would be so the reason for
it is this my table view doesn't know that the data for it is coming from this view controller.
It is true that we have conformed to the right data source on the right.
Delegate but we haven't said the delegate and the data source of this particular table view to be this
view controller so that you could do it in two ways one could go to the storyboard select third table
view controller right over the view controller and say data source and delegates are here or you could
go to a view controller in their view did Lord say my table view that delegate is self and my table
view the data source is all source stuff.
So now this particular table view ignores that it's different values they have to come from this find
this view controller and if you're on this application now we should be able to see the same thing that
we saw the last time except that this time of year not between a table view controller if you're rather
within a single you eye view controller and then the application laws we can see that this is the body
of the table view and we have the label up there obviously for each of them we have one of the values
in our array.
So the next thing was when I type on one of these I want to be able to see that value here on my label
but essentially I want to know what happens when we come up on one of these can be somehow get that
selection.
So that has another method and that method is called Select row at index part.
That's a very simple method that says table view.
Did select the role if we did selected it doesn't have a return type so you can do whatever you like
to do what they want to do is this I want to find out the index funds from the index Mark I want to
find the name I want to find the name of that city and present it on my label so I'm going to go ahead
and say my neighbor dot text becomes city's array the object that is an index part that's raw so wherever
you are find that cities every object and presented on my label and if you're on the application now
we should be able to see that when we type on any of the cells that cell appears on our label and white
New York Vancouver Delhi real.
So on and so forth.
And obviously what you could do is you could actually have a separate view controller for instance that
when you tap on this it performs a Segway and takes you to that view controller that could be another
way of thinking about it.
Now I want to show you two other things in here.
Table views built into them.
They have something called a table view header and a table of your footer.
I could come in here and say tighten for header view in Section.
So that's going to be a title for it.
I'm going to say return when I say name of cities.
And if we run the application now on top of our section which is only one section at the moment is going
to show the name of the cities and you could similarly add a title for footer in section and instead
of just relying on a string values you could actually use their head their view.
So that's going to be a header view for section.
So this would essentially instead of rendering a string with essentially render a view for you that
you could customize it with having different objects in it or showing different values.
So that is two different ways for displaying things on a header or a footer of a table view.
I'm not I go through the details of this one you can simply initialize and allocate a new UI view and
in that you I view you can have it as a label or you could have it as a UI image of you or any object
that you want.
So when it gets rid of that and that's just about having a table view within any view controller you
make sure that you have your delegate and data source taking care of properly these two methods are
a mandatory method they both have to be the number of rows and sell for row if you want to know which
one we selected we use that did select row out and of course we can use the title for header and title
for footer.
Let's keep it up to here and move on to our next lesson.