1
00:00:07,070 --> 00:00:11,860
Hey everybody what's going on this is Caleb with Dev slopes dot com and in this video we're going to

2
00:00:11,860 --> 00:00:16,960
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

3
00:00:16,960 --> 00:00:24,560
to display all of our cells with the names and the colors so that when we select them they you know

4
00:00:24,610 --> 00:00:29,950
load our image in our Detail View Controller so we're also going to sort of wire up our table view and

5
00:00:29,980 --> 00:00:31,350
it's going to be easier than usual.

6
00:00:31,360 --> 00:00:32,520
And let me show you why.

7
00:00:32,740 --> 00:00:36,010
Pull open that project and head into your storyboard.

8
00:00:36,130 --> 00:00:39,440
Now if you look here we have a table view.

9
00:00:39,510 --> 00:00:39,770
OK.

10
00:00:39,780 --> 00:00:47,200
But the nice thing is that this actually comes from master view controller which is of type II Table

11
00:00:47,200 --> 00:00:52,090
View Controller so we have one built in which is really nice makes things easy.

12
00:00:52,090 --> 00:00:57,760
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

13
00:00:57,760 --> 00:01:06,220
we want and then we're going to go ahead and basically call the number of items in the table view so

14
00:01:06,220 --> 00:01:07,990
we can show all six cells.

15
00:01:07,990 --> 00:01:10,870
And I'm also going to set it so that we can set the background color.

16
00:01:11,050 --> 00:01:14,860
So go ahead and actually drag this Celso to a little wider.

17
00:01:14,860 --> 00:01:16,560
I'm not sure how wide we're going to want it.

18
00:01:16,570 --> 00:01:21,680
Let's actually set you know an explicit height of maybe 100.

19
00:01:21,700 --> 00:01:22,350
That's probably good.

20
00:01:22,360 --> 00:01:29,410
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

21
00:01:29,410 --> 00:01:34,220
here and let's actually center that and then let's go ahead and change the font.

22
00:01:34,540 --> 00:01:38,450
OK I'm going to go to Kustom and Avenir next.

23
00:01:38,770 --> 00:01:41,640
And I'm going to choose Demy bold italic.

24
00:01:41,830 --> 00:01:46,020
Well let's do bold italic and let's make it a size 48.

25
00:01:46,030 --> 00:01:47,380
Let's see how that looks.

26
00:01:47,740 --> 00:01:48,740
Yeah that's pretty good.

27
00:01:48,970 --> 00:01:53,770
And let's just put in maybe just title for now and then later we're going to go ahead and actually set

28
00:01:53,770 --> 00:01:57,000
up the custom words that go with it.

29
00:01:57,010 --> 00:02:02,350
So for our cell here we're going to actually set a background color you know just to see what it would

30
00:02:02,350 --> 00:02:02,910
look like.

31
00:02:02,920 --> 00:02:05,150
And let's also change the font.

32
00:02:05,260 --> 00:02:06,160
Let's make it white.

33
00:02:06,190 --> 00:02:08,870
So it stands out a little better on the dark blue.

34
00:02:08,890 --> 00:02:09,350
Cool.

35
00:02:09,340 --> 00:02:12,340
So that's what we're going to look for here we're going to put words in here eventually we're going

36
00:02:12,340 --> 00:02:15,150
to put a background color for each of those cells.

37
00:02:15,220 --> 00:02:22,120
And now if we go into master view controller we can access all of these handy dandy table view delegate

38
00:02:22,120 --> 00:02:23,680
methods that we want.

39
00:02:23,680 --> 00:02:27,680
Now there's a ton of them already put in here for us.

40
00:02:27,790 --> 00:02:33,910
And so what we're going to be able to do is basically to remove what we don't need which is that these

41
00:02:33,910 --> 00:02:36,540
editing related functions we don't need for this course.

42
00:02:36,730 --> 00:02:39,650
And we also are not going to need.

43
00:02:39,790 --> 00:02:41,820
We do need those.

44
00:02:42,070 --> 00:02:47,110
We don't need insert new object which will be there by default we don't need did receive memory warning.

45
00:02:47,200 --> 00:02:54,670
We also do not need this view will appear call and we don't need this add button because we're not going

46
00:02:54,670 --> 00:02:57,220
to enable our app to actually add new items.

47
00:02:57,220 --> 00:03:00,940
You could do that as a challenge but I'm going to actually get rid of it.

48
00:03:00,970 --> 00:03:01,380
You know what.

49
00:03:01,420 --> 00:03:06,130
Let's actually clear out this view controller or the view did load function altogether and we're going

50
00:03:06,130 --> 00:03:08,400
to put our own code in there eventually.

51
00:03:08,440 --> 00:03:12,820
Now because of that we're not going to actually need our detailed view controller here or our object's

52
00:03:12,820 --> 00:03:17,830
array because we're using our image array from our static data and so delete that as well.

53
00:03:18,100 --> 00:03:24,400
And so with that in mind we're going to go ahead and call an image or a count because if you look in

54
00:03:24,400 --> 00:03:28,390
here our image array has the amount of items that everything else has.

55
00:03:28,390 --> 00:03:32,350
So we can use that index as a kind of a reference point.

56
00:03:32,350 --> 00:03:34,090
So go out and call wups.

57
00:03:34,090 --> 00:03:36,090
Make sure you're typing in the right file.

58
00:03:36,130 --> 00:03:36,990
Go ahead and call.

59
00:03:37,000 --> 00:03:38,790
Image array doc count.

60
00:03:38,900 --> 00:03:45,390
OK and we're going to be able to basically access the images or the names or whatever using you know

61
00:03:45,400 --> 00:03:49,980
names array index path dot row we can pull out the image at the proper place.

62
00:03:50,170 --> 00:03:57,700
So we're going to actually go ahead and just delete that and then use our table view here to display

63
00:03:57,760 --> 00:04:02,740
not only the cells name right we're going to use our names RAIB We're also going to give it a background

64
00:04:02,740 --> 00:04:11,410
color so we can call a cell background color and then set that to be equal to colors array K and we

65
00:04:11,410 --> 00:04:15,830
can pull out the item at a particular index path dot row.

66
00:04:16,030 --> 00:04:16,620
OK.

67
00:04:16,840 --> 00:04:20,890
And what that's going to do is for the first item the first color will match up for the second item

68
00:04:20,890 --> 00:04:25,780
the second color will match up because this is sort of like a for loop that goes through all those cells.

69
00:04:25,780 --> 00:04:31,960
Next up we're going to go ahead and basically set the text label to be equal to name or array or names

70
00:04:31,970 --> 00:04:32,980
array I guess.

71
00:04:32,980 --> 00:04:34,150
And we're going to do the same thing.

72
00:04:34,150 --> 00:04:36,120
Pull out the index path dot row.

73
00:04:36,370 --> 00:04:36,950
OK.

74
00:04:37,240 --> 00:04:37,930
Pretty cool stuff.

75
00:04:37,930 --> 00:04:42,850
So now we should have a background color and a text label with the proper name.

76
00:04:42,850 --> 00:04:47,890
We should also get the amount of items back and you're thinking wait a minute you're using the amount

77
00:04:47,890 --> 00:04:54,280
of images to make sure you have enough cells and that's true but it's OK because we have six items and

78
00:04:54,280 --> 00:04:57,810
here six items in here and six items in here so it's not going to be an issue.

79
00:04:57,850 --> 00:04:59,640
But I don't know about you.

80
00:04:59,830 --> 00:05:03,630
I want to try this out I want to see if this actually works and links up the way that it should.

81
00:05:03,790 --> 00:05:09,670
So go ahead and choose a simulated device like the iPhone 8 plus and build and run it and as soon as

82
00:05:09,670 --> 00:05:12,460
it loads we'll be able to see if we are successfully linked up.

83
00:05:12,460 --> 00:05:14,290
But we're getting a build failure.

84
00:05:14,710 --> 00:05:17,540
It's still referencing our object's race.

85
00:05:17,560 --> 00:05:19,150
Let's actually go ahead and comment out.

86
00:05:19,150 --> 00:05:20,170
Prepare for Segway.

87
00:05:20,230 --> 00:05:20,560
Whoops.

88
00:05:20,560 --> 00:05:21,790
That's not a comment.

89
00:05:21,790 --> 00:05:26,980
There we go because we're not going to actually need to do anything with that until a future video so

90
00:05:26,980 --> 00:05:32,670
now build and run the simulator should pop open and we should be able to see it.

91
00:05:32,710 --> 00:05:34,560
There it is.

92
00:05:34,580 --> 00:05:35,710
There we go.

93
00:05:36,010 --> 00:05:37,330
And look at that super cool.

94
00:05:37,330 --> 00:05:39,370
So we get our label here.

95
00:05:39,370 --> 00:05:41,670
We get the different colors.

96
00:05:41,680 --> 00:05:42,370
That's awesome.

97
00:05:42,370 --> 00:05:46,450
So when we select it it's going to present that new controller but it's not actually going to load any

98
00:05:46,450 --> 00:05:47,400
data at the moment.

99
00:05:47,470 --> 00:05:51,880
But as you can see I can rotate the device and it shows up in a master detail view.

100
00:05:52,030 --> 00:05:55,660
OK there's a lot of other stuff we still need to do to make this extra extra pretty.

101
00:05:55,660 --> 00:05:58,710
But guys we are making some great progress.

102
00:05:58,720 --> 00:06:02,150
Our table view is now properly loading the amount of cells.

103
00:06:02,420 --> 00:06:06,310
I think in the next video we're going to actually extend this we're going to drag these down make them

104
00:06:06,310 --> 00:06:07,800
a little taller.

105
00:06:07,930 --> 00:06:11,240
Well now let's do it now let's make sure that we don't forget that.

106
00:06:11,320 --> 00:06:16,780
I'm going to make these cells instead of being 100 let's make them one hundred twenty and then click

107
00:06:16,780 --> 00:06:20,610
on the table view and make the row height 120 as well.

108
00:06:20,740 --> 00:06:26,150
And then if we build and run we should be able to see that change reflected in our app should show all

109
00:06:26,150 --> 00:06:29,440
of the cells taking up the whole view controller area much better.

110
00:06:29,440 --> 00:06:31,200
So there's not that ugly whitespace.

111
00:06:31,330 --> 00:06:34,150
And yeah guys this is amazing amazing work.

112
00:06:34,150 --> 00:06:35,630
We are making great progress.

113
00:06:35,650 --> 00:06:41,410
And so in the next video we're going to go ahead and set up what happens in image presentation.

114
00:06:41,420 --> 00:06:45,820
VC okay we're going to do some work there and then we're going to continue developing this app and building

115
00:06:45,820 --> 00:06:48,470
it out using a split view controller.

116
00:06:48,490 --> 00:06:52,140
So let's head over there and let's do that now.