1

00:00:07,610 --> 00:00:12,980

It 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,980 --> 00:00:15,910

is where all of our data is going to come from.



3

00:00:16,040 --> 00:00:22,280

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,280 --> 00:00:27,440

cell and we'll also set up its subclass and let's get it looking nice and pretty.



5

00:00:27,440 --> 00:00:35,360

So open up your X code project and we're going to be focusing here on feed Visi as you might expect.



6

00:00:35,360 --> 00:00:41,420

So first in order to start this hour we're going to actually build out the user interface of the cell



7

00:00:41,750 --> 00:00:47,270

and these cells are going to be dark on their background so go ahead and choose the dark background



8

00:00:47,270 --> 00:00:54,280

color which if you can't remember which I count is to 9 to be 3 4 and that looks awesome.



9

00:00:54,500 --> 00:01:00,140

Next up we're going to need a UI image of you and this is going to hold their profile image.



10

00:01:00,140 --> 00:01:09,830

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,160 --> 00:01:11,420

Yeah that looks pretty good.



12

00:01:11,480 --> 00:01:16,340

Let's go with that and we're going to pin it from the left and right.



13

00:01:16,340 --> 00:01:22,460

Let's do 10 from the left 10 from the right or sorry 10 on the left and 10 from the top and a fixed



14

00:01:22,460 --> 00:01:24,340

width and height of 10.



15

00:01:24,860 --> 00:01:25,530

Awesome.



16

00:01:25,700 --> 00:01:31,970

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,970 --> 00:01:33,630

clip to bounds.



18

00:01:33,920 --> 00:01:34,650

Awesome.



19

00:01:34,940 --> 00:01:40,370

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,430 --> 00:01:46,880

also going to show another label with whatever text that they post when they upload their message.



21

00:01:46,880 --> 00:01:53,620

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,720 --> 00:01:58,820

And while we're at it we may as well put these into a stack view so select both.



23

00:01:59,060 --> 00:02:00,380

Put them in a stack view.



24

00:02:00,620 --> 00:02:07,460

And now we can pin it 10 from the top 10 from the left 10 from the bottom or 10 from the right and 10



25

00:02:07,460 --> 00:02:14,290

from the bottom click add four constraints and you'll see we get both showing up which is pretty awesome.



26

00:02:14,540 --> 00:02:20,610

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,960 --> 00:02:21,350

OK.



28

00:02:21,380 --> 00:02:23,090

Select both text labels.



29

00:02:23,090 --> 00:02:24,290

Not not the stack.



30

00:02:24,300 --> 00:02:27,260

You change the color to light blue.



31

00:02:27,410 --> 00:02:32,020

Change the font from system to custom and select Menlo.



32

00:02:32,450 --> 00:02:34,800

Now the user name label is fine.



33

00:02:34,820 --> 00:02:41,210

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,210 --> 00:02:42,210

com.



35

00:02:42,680 --> 00:02:48,890

And now the text where the user is messaging with their post content is we're going to go ahead and



36

00:02:48,920 --> 00:02:51,140

lower that down to maybe size 12.



37

00:02:51,140 --> 00:02:52,720

It can be pretty small.



38

00:02:52,940 --> 00:02:54,500

And let's keep it there.



39

00:02:54,550 --> 00:03:00,050

It looks pretty good but we're going to enable it to be up to three lines high because sometimes you



40

00:03:00,050 --> 00:03:01,970

might post more than just a single sentence.



41

00:03:01,970 --> 00:03:08,280

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,360 --> 00:03:15,010

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:15,020 --> 00:03:17,110

It'll automatically start to scale it down.



44

00:03:17,330 --> 00:03:20,710

So I'm going to use a size 9 to make that work.



45

00:03:20,810 --> 00:03:25,480

And now in my stack I'm just going to play around with it until I get it right.



46

00:03:25,760 --> 00:03:31,040

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,060 --> 00:03:32,430

filled proportionally.



48

00:03:32,510 --> 00:03:37,600

Looks pretty good but it looks like we're getting some weird stretching which we don't want.



49

00:03:37,670 --> 00:03:39,160

And actually you know it would help.



50

00:03:39,200 --> 00:03:48,590

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,590 --> 00:03:51,750

move our username feed up.



52

00:03:51,770 --> 00:03:52,490

And you know what.



53

00:03:52,490 --> 00:03:54,020

Actually that could probably be smaller.



54

00:03:54,020 --> 00:03:56,370

Let's try it that size 15.



55

00:03:56,600 --> 00:04:00,110

And that looks good still at 12.



56

00:04:00,110 --> 00:04:01,770

That's cool.



57

00:04:01,820 --> 00:04:08,830

Let's go back and let's lower the spacing maybe to five maybe six.



58

00:04:08,850 --> 00:04:11,420

Seems to only like even numbers which is odd.



59

00:04:11,840 --> 00:04:13,850

And you know what I haven't some trouble with this.



60

00:04:13,880 --> 00:04:19,540

So I'm actually going to give it a fixed height of let's do 20.



61

00:04:19,730 --> 00:04:23,660

And that way our label here can definitely have enough space for three lines.



62

00:04:23,750 --> 00:04:25,660

And that looks pretty good.



63

00:04:25,940 --> 00:04:28,270

Let's just change this to message.



64

00:04:28,290 --> 00:04:32,640

The message content because that's what's going to show up there.



65

00:04:33,930 --> 00:04:39,180

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,180 --> 00:04:42,170

with stack use in Interface Builder.



67

00:04:42,420 --> 00:04:48,620

So if I go out and come back in it will reload and you'll see that issue is gone.



68

00:04:48,630 --> 00:04:52,290

So it's just a weird issue with stack views in Interface Builder.



69

00:04:52,370 --> 00:04:53,130

That's fine.



70

00:04:53,280 --> 00:04:59,700

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,700 --> 00:05:02,610

going to be in the view subclassed because it's a custom view right.



72

00:05:02,610 --> 00:05:04,130

The cell is a custom view.



73

00:05:04,410 --> 00:05:09,670

So go ahead and right click click new file and it's going to be a cocoa touch class.



74

00:05:09,720 --> 00:05:17,700

We're going to subclass you table view cell and we'll just call this feed cell.



75

00:05:17,700 --> 00:05:18,970

Click next.



76

00:05:19,200 --> 00:05:22,770

And then what we're gonna do is we're going to save it in the view folder.



77

00:05:23,190 --> 00:05:23,810

OK.



78

00:05:24,120 --> 00:05:25,120

Very cool.



79

00:05:25,140 --> 00:05:30,210

So we actually aren't going to be modifying the View Code from in here and we're not going to be dealing



80

00:05:30,210 --> 00:05:36,270

with selection with feed cells so we can delete both of these and all we need to do is actually go back



81

00:05:36,270 --> 00:05:41,410

to our storyboard Click on our cell which of course has given us some issues.



82

00:05:41,550 --> 00:05:43,590

There are labels there in the stack.



83

00:05:43,630 --> 00:05:45,790

You are just giving us some trouble.



84

00:05:45,960 --> 00:05:49,400

So let's actually change the size back up and back down.



85

00:05:51,120 --> 00:05:52,970

And let's see they're now now they're showing.



86

00:05:52,970 --> 00:06:01,080

So anyway let's go ahead and let's open the assistant editor and let's set some Iby outlets to modify



87

00:06:01,200 --> 00:06:05,790

the profile image the e-mail label and the content label.



88

00:06:05,790 --> 00:06:11,640

So to do that you're going to have to go in manually because it might not show up automatically.



89

00:06:11,640 --> 00:06:14,150

And we're going to have to go oh you know what sorry.



90

00:06:14,160 --> 00:06:19,650

We need to set the identity of the cell first so select the table view cell go to the identity inspector



91

00:06:19,680 --> 00:06:22,530

and give it an identity of feed cell.



92

00:06:22,590 --> 00:06:30,810

That should help to fix our problem and go ahead and select that feeds cell go to manual automatic and



93

00:06:30,810 --> 00:06:33,050

then you can choose feed Zelle.



94

00:06:33,120 --> 00:06:37,890

Again we're having some issues with the labels here so let's bump the size up so that we can see them.



95

00:06:38,130 --> 00:06:40,780

And now let's create some outlets for these.



96

00:06:41,090 --> 00:06:45,520

Call this profile image and of course now it's gone again.



97

00:06:45,520 --> 00:06:53,840

Change the font size back and right click and drag from the label we'll call this e-mail label.



98

00:06:54,390 --> 00:06:55,080

OK.



99

00:06:55,470 --> 00:06:57,710

And of course gives us grief again.



100

00:06:57,720 --> 00:06:58,770

Let's go ahead.



101

00:06:58,890 --> 00:07:10,050

Right click and drag and we're going to call this feed cell can let's just call it content label.



102

00:07:10,250 --> 00:07:11,010

Very cool.



103

00:07:11,030 --> 00:07:16,200

And yet again we're having trouble so back up to 16 and it shows up again.



104

00:07:16,340 --> 00:07:17,450

Super weird.



105

00:07:17,660 --> 00:07:27,170

But now if you look at our feed Cell class is going to automatically show up and we have our outlets



106

00:07:27,170 --> 00:07:30,290

connected as you can see they're connected to the right content.



107

00:07:30,290 --> 00:07:34,200

Now go into feed cell close the assistant editor.



108

00:07:34,210 --> 00:07:39,020

And what we're going to do is we're going to set up a function to configure each cell.



109

00:07:39,020 --> 00:07:41,790

We're going to set the image set the label and set the content.



110

00:07:41,810 --> 00:07:52,130

So go ahead and type phunk configure cell and we're going to pass in a profile image of type you I image



111

00:07:52,700 --> 00:07:59,210

we're going to pass in a username or an e-mail rather of type string and we're going to pass in content



112

00:07:59,540 --> 00:08:01,420

of type string.



113

00:08:01,430 --> 00:08:06,450

Now we're going to set self profile image which you can tell is the image view.



114

00:08:06,620 --> 00:08:12,290

And we're going to set it's image property to be equal to the profile image we pass in from our function



115

00:08:13,100 --> 00:08:19,890

then we're going to Gaulke then we're going to call a self e-mail label dot text and we're gonna set



116

00:08:19,880 --> 00:08:25,000

that to be equal to email which is the one we passed in from our function and last we're going to call



117

00:08:25,010 --> 00:08:31,700

self content labelled text and we're going to set it to be equal to the content we pass in from our



118

00:08:31,700 --> 00:08:32,690

function.



119

00:08:32,720 --> 00:08:35,170

This is how we're going to configure a feed cell.



120

00:08:35,250 --> 00:08:35,710

OK.



121

00:08:35,900 --> 00:08:39,020

It's really not that hard it's a few little things.



122

00:08:39,170 --> 00:08:44,400

But we now have a feed cell built in Interface Builder which you'll see in just a moment.



123

00:08:44,450 --> 00:08:45,390

There it is.



124

00:08:45,500 --> 00:08:53,570

And of course watch if I go off and come back it might show the label appropriately but just know that



125

00:08:53,570 --> 00:08:58,100

when you actually run this on a phone it will work it's just a weird issue with the Interface Builder.



126

00:08:58,190 --> 00:08:59,030

But this looks good.



127

00:08:59,030 --> 00:09:00,530

We have the outlets set up.



128

00:09:00,530 --> 00:09:05,690

We have a custom subclassed that we can use to configure the cells later on when we're dealing with



129

00:09:05,690 --> 00:09:06,690

the table.



130

00:09:06,700 --> 00:09:09,230

You delegate and datasource protocols.



131

00:09:09,350 --> 00:09:14,480

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



132

00:09:14,480 --> 00:09:18,280

a message that will include content Sender ID et cetera et cetera.



133

00:09:18,530 --> 00:09:23,930

We're going to write a function to get all messages from firebase and we're going to load those messages



134

00:09:24,020 --> 00:09:26,030

in our table view from firebase.



135

00:09:26,040 --> 00:09:27,260

It's so cool.



136

00:09:27,260 --> 00:09:28,790

Let's go ahead and head over to the next video.