It guys this is Caleb with slopes dot com and in this video we're going to set up our feed cell which
is where all of our data is going to come from.
When we set up our table view later and we download messages from firebase So let's set up that feed
cell and we'll also set up its subclass and let's get it looking nice and pretty.
So open up your X code project and we're going to be focusing here on feed Visi as you might expect.
So first in order to start this hour we're going to actually build out the user interface of the cell
and these cells are going to be dark on their background so go ahead and choose the dark background
color which if you can't remember which I count is to 9 to be 3 4 and that looks awesome.
Next up we're going to need a UI image of you and this is going to hold their profile image.
So we're going to shrink this down here make it a square and let's see maybe 50 by 50.
Yeah that looks pretty good.
Let's go with that and we're going to pin it from the left and right.
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
width and height of 10.
Awesome.
Let's fill that with our default profile image looks awesome and let's set it to be aspect fill and
clip to bounds.
Awesome.
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
also going to show another label with whatever text that they post when they upload their message.
So go ahead and just search for labels and we're going to drop on to labels here just like that.
And while we're at it we may as well put these into a stack view so select both.
Put them in a stack view.
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
from the bottom click add four constraints and you'll see we get both showing up which is pretty awesome.
Now I'm going to go ahead and I'm going to set both of these to have a different text color.
OK.
Select both text labels.
Not not the stack.
You change the color to light blue.
Change the font from system to custom and select Menlo.
Now the user name label is fine.
We're going to keep that at the same size but I'm going to go ahead and type user at breakpoint dot
com.
And now the text where the user is messaging with their post content is we're going to go ahead and
lower that down to maybe size 12.
It can be pretty small.
And let's keep it there.
It looks pretty good but we're going to enable it to be up to three lines high because sometimes you
might post more than just a single sentence.
And with that in mind we're also going to need to set the minimum font size to work as well.
And this way it'll allow us to use a small font if more text goes in that can than can fit.
It'll automatically start to scale it down.
So I'm going to use a size 9 to make that work.
And now in my stack I'm just going to play around with it until I get it right.
I like that it's filling all the way across but if I select fill equally you'll see we get some issues
filled proportionally.
Looks pretty good but it looks like we're getting some weird stretching which we don't want.
And actually you know it would help.
I think if we just went to fill and we put 10 10 points of space maybe 20 maybe less maybe 16 that will
move our username feed up.
And you know what.
Actually that could probably be smaller.
Let's try it that size 15.
And that looks good still at 12.
That's cool.
Let's go back and let's lower the spacing maybe to five maybe six.
Seems to only like even numbers which is odd.
And you know what I haven't some trouble with this.
So I'm actually going to give it a fixed height of let's do 20.
And that way our label here can definitely have enough space for three lines.
And that looks pretty good.
Let's just change this to message.
The message content because that's what's going to show up there.
And of course these issues won't actually show up when you build the app it's just like a weird issue
with stack use in Interface Builder.
So if I go out and come back in it will reload and you'll see that issue is gone.
So it's just a weird issue with stack views in Interface Builder.
That's fine.
So now our cell has been built now we need to create the custom subclass to How's this cell and it's
going to be in the view subclassed because it's a custom view right.
The cell is a custom view.
So go ahead and right click click new file and it's going to be a cocoa touch class.
We're going to subclass you table view cell and we'll just call this feed cell.
Click next.
And then what we're gonna do is we're going to save it in the view folder.
OK.
Very cool.
So we actually aren't going to be modifying the View Code from in here and we're not going to be dealing
with selection with feed cells so we can delete both of these and all we need to do is actually go back
to our storyboard Click on our cell which of course has given us some issues.
There are labels there in the stack.
You are just giving us some trouble.
So let's actually change the size back up and back down.
And let's see they're now now they're showing.
So anyway let's go ahead and let's open the assistant editor and let's set some Iby outlets to modify
the profile image the e-mail label and the content label.
So to do that you're going to have to go in manually because it might not show up automatically.
And we're going to have to go oh you know what sorry.
We need to set the identity of the cell first so select the table view cell go to the identity inspector
and give it an identity of feed cell.
That should help to fix our problem and go ahead and select that feeds cell go to manual automatic and
then you can choose feed Zelle.
Again we're having some issues with the labels here so let's bump the size up so that we can see them.
And now let's create some outlets for these.
Call this profile image and of course now it's gone again.
Change the font size back and right click and drag from the label we'll call this e-mail label.
OK.
And of course gives us grief again.
Let's go ahead.
Right click and drag and we're going to call this feed cell can let's just call it content label.
Very cool.
And yet again we're having trouble so back up to 16 and it shows up again.
Super weird.
But now if you look at our feed Cell class is going to automatically show up and we have our outlets
connected as you can see they're connected to the right content.
Now go into feed cell close the assistant editor.
And what we're going to do is we're going to set up a function to configure each cell.
We're going to set the image set the label and set the content.
So go ahead and type phunk configure cell and we're going to pass in a profile image of type you I image
we're going to pass in a username or an e-mail rather of type string and we're going to pass in content
of type string.
Now we're going to set self profile image which you can tell is the image view.
And we're going to set it's image property to be equal to the profile image we pass in from our function
then we're going to Gaulke then we're going to call a self e-mail label dot text and we're gonna set
that to be equal to email which is the one we passed in from our function and last we're going to call
self content labelled text and we're going to set it to be equal to the content we pass in from our
function.
This is how we're going to configure a feed cell.
OK.
It's really not that hard it's a few little things.
But we now have a feed cell built in Interface Builder which you'll see in just a moment.
There it is.
And of course watch if I go off and come back it might show the label appropriately but just know that
when you actually run this on a phone it will work it's just a weird issue with the Interface Builder.
But this looks good.
We have the outlets set up.
We have a custom subclassed that we can use to configure the cells later on when we're dealing with
the table.
You delegate and datasource protocols.
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
a message that will include content Sender ID et cetera et cetera.
We're going to write a function to get all messages from firebase and we're going to load those messages
in our table view from firebase.
It's so cool.
Let's go ahead and head over to the next video.