Hey everybody what's going on this is Caleb with Dev slopes dot com and in this video we're going to
go ahead and set up our M.V. see where we're going to have our table view and that's where it's going
to display all of our cells with the names and the colors so that when we select them they you know
load our image in our Detail View Controller so we're also going to sort of wire up our table view and
it's going to be easier than usual.
And let me show you why.
Pull open that project and head into your storyboard.
Now if you look here we have a table view.
OK.
But the nice thing is that this actually comes from master view controller which is of type II Table
View Controller so we have one built in which is really nice makes things easy.
And so what we're going to do is we're going to go ahead and actually set up this cell to look the way
we want and then we're going to go ahead and basically call the number of items in the table view so
we can show all six cells.
And I'm also going to set it so that we can set the background color.
So go ahead and actually drag this Celso to a little wider.
I'm not sure how wide we're going to want it.
Let's actually set you know an explicit height of maybe 100.
That's probably good.
And if we do that we also have to set it in the table view like so and then let's take our title label
here and let's actually center that and then let's go ahead and change the font.
OK I'm going to go to Kustom and Avenir next.
And I'm going to choose Demy bold italic.
Well let's do bold italic and let's make it a size 48.
Let's see how that looks.
Yeah that's pretty good.
And let's just put in maybe just title for now and then later we're going to go ahead and actually set
up the custom words that go with it.
So for our cell here we're going to actually set a background color you know just to see what it would
look like.
And let's also change the font.
Let's make it white.
So it stands out a little better on the dark blue.
Cool.
So that's what we're going to look for here we're going to put words in here eventually we're going
to put a background color for each of those cells.
And now if we go into master view controller we can access all of these handy dandy table view delegate
methods that we want.
Now there's a ton of them already put in here for us.
And so what we're going to be able to do is basically to remove what we don't need which is that these
editing related functions we don't need for this course.
And we also are not going to need.
We do need those.
We don't need insert new object which will be there by default we don't need did receive memory warning.
We also do not need this view will appear call and we don't need this add button because we're not going
to enable our app to actually add new items.
You could do that as a challenge but I'm going to actually get rid of it.
You know what.
Let's actually clear out this view controller or the view did load function altogether and we're going
to put our own code in there eventually.
Now because of that we're not going to actually need our detailed view controller here or our object's
array because we're using our image array from our static data and so delete that as well.
And so with that in mind we're going to go ahead and call an image or a count because if you look in
here our image array has the amount of items that everything else has.
So we can use that index as a kind of a reference point.
So go out and call wups.
Make sure you're typing in the right file.
Go ahead and call.
Image array doc count.
OK and we're going to be able to basically access the images or the names or whatever using you know
names array index path dot row we can pull out the image at the proper place.
So we're going to actually go ahead and just delete that and then use our table view here to display
not only the cells name right we're going to use our names RAIB We're also going to give it a background
color so we can call a cell background color and then set that to be equal to colors array K and we
can pull out the item at a particular index path dot row.
OK.
And what that's going to do is for the first item the first color will match up for the second item
the second color will match up because this is sort of like a for loop that goes through all those cells.
Next up we're going to go ahead and basically set the text label to be equal to name or array or names
array I guess.
And we're going to do the same thing.
Pull out the index path dot row.
OK.
Pretty cool stuff.
So now we should have a background color and a text label with the proper name.
We should also get the amount of items back and you're thinking wait a minute you're using the amount
of images to make sure you have enough cells and that's true but it's OK because we have six items and
here six items in here and six items in here so it's not going to be an issue.
But I don't know about you.
I want to try this out I want to see if this actually works and links up the way that it should.
So go ahead and choose a simulated device like the iPhone 8 plus and build and run it and as soon as
it loads we'll be able to see if we are successfully linked up.
But we're getting a build failure.
It's still referencing our object's race.
Let's actually go ahead and comment out.
Prepare for Segway.
Whoops.
That's not a comment.
There we go because we're not going to actually need to do anything with that until a future video so
now build and run the simulator should pop open and we should be able to see it.
There it is.
There we go.
And look at that super cool.
So we get our label here.
We get the different colors.
That's awesome.
So when we select it it's going to present that new controller but it's not actually going to load any
data at the moment.
But as you can see I can rotate the device and it shows up in a master detail view.
OK there's a lot of other stuff we still need to do to make this extra extra pretty.
But guys we are making some great progress.
Our table view is now properly loading the amount of cells.
I think in the next video we're going to actually extend this we're going to drag these down make them
a little taller.
Well now let's do it now let's make sure that we don't forget that.
I'm going to make these cells instead of being 100 let's make them one hundred twenty and then click
on the table view and make the row height 120 as well.
And then if we build and run we should be able to see that change reflected in our app should show all
of the cells taking up the whole view controller area much better.
So there's not that ugly whitespace.
And yeah guys this is amazing amazing work.
We are making great progress.
And so in the next video we're going to go ahead and set up what happens in image presentation.
VC okay we're going to do some work there and then we're going to continue developing this app and building
it out using a split view controller.
So let's head over there and let's do that now.