1
00:00:07,750 --> 00:00:12,910
Hey guys this is Caleb with slopes dot com and in this video we're going to set up our feed cell which

2
00:00:12,910 --> 00:00:15,840
is where all of our data is going to come from.

3
00:00:15,970 --> 00:00:22,240
When we set up our table view later and we download messages from firebase So let's set up that feed

4
00:00:22,240 --> 00:00:27,350
cell and we'll also set up its subclass and let's get it looking nice and pretty.

5
00:00:27,370 --> 00:00:35,280
So open up your X code project and we're gonna be focusing here on feed Visi as you might expect.

6
00:00:35,290 --> 00:00:41,350
So first in order to start this out we're going to actually build out the user interface of the cell

7
00:00:41,710 --> 00:00:47,200
and these cells are going to be dark on their backgrounds so go ahead and choose the dark background

8
00:00:47,200 --> 00:00:54,220
color which if you can't remember which I can do is to to be 3:04 and that looks awesome.

9
00:00:54,460 --> 00:01:00,030
Next up we're going to need a UI image view and this is going to hold their profile image.

10
00:01:00,070 --> 00:01:09,840
So we're going to shrink this down here make it a square and let's see maybe 50 by 50.

11
00:01:10,090 --> 00:01:11,350
Yeah that looks pretty good.

12
00:01:11,410 --> 00:01:16,270
Let's go with that and we're going to pin it from the left and right.

13
00:01:16,270 --> 00:01:22,720
Let's do 10 from the left 10 from the start 10 on the left and 10 from the top and a fixed width and

14
00:01:22,720 --> 00:01:24,780
height of 10.

15
00:01:24,790 --> 00:01:25,630
Awesome.

16
00:01:25,630 --> 00:01:31,930
Let's fill that with our default profile image looks awesome and let's set it to be aspect fill and

17
00:01:31,930 --> 00:01:33,570
clip two bounds.

18
00:01:33,850 --> 00:01:34,590
Awesome.

19
00:01:34,900 --> 00:01:40,330
Next we're going to go ahead and we're going to put a label that will show the user's e-mail and it's

20
00:01:40,360 --> 00:01:46,840
also going to show another label with whatever text that they post when they upload their message.

21
00:01:46,840 --> 00:01:53,360
So go ahead and just search for labels and we're going to drop on to labels here just like that.

22
00:01:53,680 --> 00:01:57,260
And while we're at it we may as well put these into a stack.

23
00:01:57,280 --> 00:02:05,320
So select both put them in a stack of you and now we can pin it 10 from the top 10 from the left 10

24
00:02:05,320 --> 00:02:11,110
from the bottom or 10 from the right and 10 from the bottom click add four constraints and you'll see

25
00:02:11,110 --> 00:02:14,230
we get both showing up which is pretty awesome.

26
00:02:14,470 --> 00:02:20,860
Now I'm going to go ahead and I'm going to set both of these to have a different text color.

27
00:02:20,910 --> 00:02:21,290
OK.

28
00:02:21,340 --> 00:02:23,050
Select both text labels.

29
00:02:23,050 --> 00:02:24,200
Not not the stack.

30
00:02:24,220 --> 00:02:27,230
You change the color to light blue.

31
00:02:27,370 --> 00:02:32,390
Change the font from system to custom and select Menlo.

32
00:02:32,410 --> 00:02:34,730
Now the user name label is fine.

33
00:02:34,750 --> 00:02:41,140
We're going to keep that at the same size but I'm going to go ahead and type user at breakpoint dot

34
00:02:41,140 --> 00:02:42,150
com.

35
00:02:42,610 --> 00:02:47,680
And now the text where the user is messaging what their post content is.

36
00:02:47,680 --> 00:02:51,070
We're going to go ahead and lower that down to maybe size 12.

37
00:02:51,070 --> 00:02:52,550
It can be pretty small.

38
00:02:52,870 --> 00:02:54,450
And let's keep it there.

39
00:02:54,500 --> 00:02:59,980
That looks pretty good but we're going to enable it to be up to three lines high because sometimes you

40
00:02:59,980 --> 00:03:01,930
might post more than just a single sentence.

41
00:03:01,930 --> 00:03:08,220
And with that in mind we're also going to need to set the minimum font size to work as well.

42
00:03:08,320 --> 00:03:14,950
And this way it'll allow us to use a small font if more text goes in that can than can fit.

43
00:03:14,960 --> 00:03:17,180
It'll automatically start to scale it down.

44
00:03:17,260 --> 00:03:20,480
So I'm going to use a size 9 to make that work.

45
00:03:20,770 --> 00:03:25,680
And now in my stack view I'm just going to play around with it until I get it right.

46
00:03:25,690 --> 00:03:30,970
I like that it's filling all the way across but if I select fill equally you'll see we get some issues

47
00:03:31,020 --> 00:03:32,350
filled proportionally.

48
00:03:32,440 --> 00:03:37,310
Looks pretty good but it looks like we're getting some weird stretching which we don't want.

49
00:03:37,600 --> 00:03:39,100
And actually you know it would help.

50
00:03:39,130 --> 00:03:48,550
I think if we just went to fill and we put 10 10 points of space maybe 20 maybe less maybe 16 that will

51
00:03:48,550 --> 00:03:52,440
move our username feed up and you know what.

52
00:03:52,440 --> 00:03:53,980
Actually that would probably be smaller.

53
00:03:53,980 --> 00:03:54,550
Let's try it.

54
00:03:54,550 --> 00:03:56,530
Size 15.

55
00:03:56,530 --> 00:04:00,000
And that looks good still at 12.

56
00:04:00,040 --> 00:04:01,270
That's cool.

57
00:04:01,750 --> 00:04:08,760
Let's go back and let's lower the spacing maybe to five maybe six.

58
00:04:08,800 --> 00:04:11,400
Seems to only like even numbers which is odd.

59
00:04:11,800 --> 00:04:13,810
And you know what I haven't some trouble with this.

60
00:04:13,840 --> 00:04:19,480
So I'm actually going to give it a fixed height of let's do 20.

61
00:04:19,660 --> 00:04:23,600
And that way our label here can definitely have enough space for three lines.

62
00:04:23,690 --> 00:04:25,880
And that looks pretty good.

63
00:04:25,900 --> 00:04:28,300
Let's just change this to message.

64
00:04:28,310 --> 00:04:32,570
The message content because that's what's going to show up there.

65
00:04:33,870 --> 00:04:39,120
And of course these issues won't actually show up when you build the app it's just like a weird issue

66
00:04:39,120 --> 00:04:42,110
with stack use in Interface Builder.

67
00:04:42,360 --> 00:04:48,550
So if I go out and come back in it will reload and you'll see that the issue is gone.

68
00:04:48,570 --> 00:04:52,220
So it's just a weird issue with stack views in Interface Builder.

69
00:04:52,310 --> 00:04:53,230
That's fine.

70
00:04:53,230 --> 00:04:59,640
So now our cell has been built now we need to create the custom subclass to How's this cell and it's

71
00:04:59,640 --> 00:05:02,300
going to be in the view subclassed because it's a custom view.

72
00:05:02,310 --> 00:05:02,550
Right.

73
00:05:02,550 --> 00:05:04,070
The cell is a custom view.

74
00:05:04,350 --> 00:05:09,600
So go ahead and right click click new file and it's going to be a cocoa touch class.

75
00:05:09,660 --> 00:05:17,380
We're going to subclass you table view cell and we'll just call this feed cell.

76
00:05:17,640 --> 00:05:18,910
Click next.

77
00:05:19,140 --> 00:05:22,710
And then what we're going to do is we're going to save it in the view folder.

78
00:05:23,130 --> 00:05:23,750
OK.

79
00:05:24,060 --> 00:05:25,060
Very cool.

80
00:05:25,080 --> 00:05:30,150
So we actually aren't going to be modifying the View Code from in here and we're not going to be dealing

81
00:05:30,150 --> 00:05:36,210
with selection with feed cells so we can delete both of these and all we need to do is actually go back

82
00:05:36,210 --> 00:05:41,440
to our storyboard Click on our cell which of course has given us some issues.

83
00:05:41,490 --> 00:05:43,990
There are labels there in the stack view.

84
00:05:44,110 --> 00:05:45,740
They're just given us some trouble.

85
00:05:45,900 --> 00:05:49,330
So let's actually change the size back up and back down.

86
00:05:51,060 --> 00:05:52,910
And let's see they're now now they're showing.

87
00:05:52,910 --> 00:06:01,020
So anyway let's go ahead and let's open the assistant editor and let's set some Iby outlets to modify

88
00:06:01,140 --> 00:06:05,570
the profile image the e-mail label and the content label.

89
00:06:05,730 --> 00:06:11,580
So to do that you're going to have to go in manually because it might not show up automatically.

90
00:06:11,580 --> 00:06:14,080
And we're going to have to go oh you know what sorry.

91
00:06:14,100 --> 00:06:19,590
We need to set the identity of the cell first so select the table view cell go to the identity inspector

92
00:06:19,620 --> 00:06:22,460
and give it an identity of feed cell.

93
00:06:22,530 --> 00:06:30,750
That should help to fix our problem and go ahead and select that feeds cell go to manual automatic and

94
00:06:30,750 --> 00:06:33,000
then you can choose feed Zelle.

95
00:06:33,060 --> 00:06:37,780
Again we're having some issues with the labels here so let's bump the size up so that we can see them.

96
00:06:38,070 --> 00:06:40,710
And now let's create some outlets for these.

97
00:06:41,040 --> 00:06:43,110
Call this profile image.

98
00:06:43,740 --> 00:06:51,390
And of course now it's gone again change the font size back and right click and drag from the label

99
00:06:51,390 --> 00:06:53,750
we'll call this e-mail label.

100
00:06:54,320 --> 00:06:55,010
OK.

101
00:06:55,410 --> 00:06:57,650
And of course gives us grief again.

102
00:06:57,660 --> 00:06:58,710
Let's go ahead.

103
00:06:58,830 --> 00:07:10,190
Right click and drag and we're going to call this feed cell can let's just call it content label.

104
00:07:10,190 --> 00:07:10,970
Very cool.

105
00:07:10,970 --> 00:07:16,280
And yet again we're having trouble so back up to 16 and it shows up again.

106
00:07:16,280 --> 00:07:17,310
Super weird.

107
00:07:17,630 --> 00:07:27,110
But now if you look at our feed cell class is going to automatically show up and we have our outlets

108
00:07:27,110 --> 00:07:30,230
connected as you can see they're connected to the right content.

109
00:07:30,230 --> 00:07:34,140
Now go into feed cell close the assistant editor.

110
00:07:34,150 --> 00:07:38,960
And what we're going to do is we're going to set up a function to configure each cell.

111
00:07:38,960 --> 00:07:41,730
We're going to set the image set the label and set the content.

112
00:07:41,750 --> 00:07:52,070
So go ahead and type phunk configure cell and we're going to pass in a profile image of type you I image

113
00:07:52,640 --> 00:07:59,150
we're going to pass in a username or an e-mail rather of type string and we're going to pass in content

114
00:07:59,480 --> 00:08:01,370
of type string.

115
00:08:01,370 --> 00:08:07,130
Now we're going to set self profile image which you can tell is the image view and we're going to set

116
00:08:07,130 --> 00:08:13,760
it's image property to be equal to the profile image we pass in from our function then we're going to

117
00:08:13,820 --> 00:08:20,630
gawk then we're going to call a self e-mail label dot text and we're going to set that to be equal to

118
00:08:20,720 --> 00:08:27,040
email which is the one we passed in from our function and last we're going to call self content labelled

119
00:08:27,230 --> 00:08:32,670
text and we're going to set it to be equal to the content we pass in from our function.

120
00:08:32,690 --> 00:08:35,140
This is how we're going to configure a feed cell.

121
00:08:35,170 --> 00:08:35,700
OK.

122
00:08:35,840 --> 00:08:38,970
It's really not that hard it's a few little things.

123
00:08:39,110 --> 00:08:44,180
But we now have a feed cell built in Interface Builder which you'll see in just a moment.

124
00:08:44,390 --> 00:08:45,340
There it is.

125
00:08:45,440 --> 00:08:53,510
And of course watch if I go off and come back it might show the label appropriately but just know that

126
00:08:53,510 --> 00:08:58,130
when you actually run this on a phone it will work it's just a weird issue with the Interface Builder.

127
00:08:58,130 --> 00:08:58,970
But this looks good.

128
00:08:58,970 --> 00:09:00,470
We have the outlets set up.

129
00:09:00,470 --> 00:09:05,630
We have a custom subclassed that we can use to configure these cells later on when we're dealing with

130
00:09:05,630 --> 00:09:06,620
the table.

131
00:09:06,640 --> 00:09:09,180
You delegate and datasource protocols.

132
00:09:09,290 --> 00:09:14,420
But for now let's go ahead and move on to the next video where we're going to set up a model layer for

133
00:09:14,420 --> 00:09:18,220
a message that will include content Sender ID et cetera et cetera.

134
00:09:18,470 --> 00:09:23,870
We're going to write a function to get all messages from firebase and we're going to load those messages

135
00:09:23,960 --> 00:09:27,170
in our table view from firebase it's so cool.

136
00:09:27,200 --> 00:09:28,750
Let's go ahead and head over to the next video.