Hey hey everyone.
Welcome back Johnny be here with slopes dot com and it's less than we are going to actually start displaying
and showing our messages.
This is the big one.
This is where our chat app finally looks like a real chat app.
We're going to be displaying channels and now we're going to be displaying messages it's going to be
pretty cool.
All right so let's get started.
We're going to start out with a custom You table yourself so here I'm going to click on view and see
a new file and it's going to be a cocoa touch class.
The subclasses is going to be my table view cell and we're going to call this message.
So.
All right.
Next thing create and then we need to go into storyboard and actually add our table view and table cells.
All right.
So zoom out a little bit to the open are right pain and do a filter for Table View try to drop a table
view in here.
We're going to set it's constrained to be zero from with constraints unchecked and zero from the left
zero from the top zero from the right hand.
About 30 or so we manage just this later from the bottom and that's because in the next lessons we're
going to be adding a label down here too.
So we'll be able to see who's typing something when they're typing it so that will be critical but we
need to leave a little bit of space for that.
So add those four constraints and then a beta bug we got this happens so if we just click out of the
file and then back in that will be fixed.
All right.
So that's good.
Couple things to set up in the table view.
First off let's go ahead and set the separator style to none.
We don't want any dividing lines.
And then let's go ahead and add a table view cell.
OK.
So here's our table cell.
Let's go ahead and increase the height of it to about 80.
That looks good.
And then let's go ahead and start adding our UI elements that we need if we check out our prototype
or our mockups we can see and see here.
Here we're going to need our image here in the left then a bolded user name slightly smaller time stamp
and then the message text and come so we can use.
Let's get an image in here.
So this image is going to go over here.
We'll set the size for that it's going to be 50 by 50.
That's going to go right up here in the top left.
Then we need a couple of labels three labels actually.
And so we're going to have one label here another label here and then a third label right here.
And normally this bounding rectangle box kind of annoys me that's a bug.
Right now it's actually kind of helpful I'm able to see the outlines of some of these things.
All right.
So let's go ahead and select all three of these labels.
We're going to customize their appearance we're going to change the color to that dark gray color.
The font is going to be custom and Helvetica new and regular is good except for this guy which is going
to be our user name so I'll just put it in.
JOHNNY B has some dummy placeholder text and then we'll set the style to bold go and maybe drop the
font by one end and this one here we're going to drop the size to about 14.
And that looks good will change its dummy font too at times it say like 12.
33 PM looks good.
A press command equal on that one as well going to zoom in here.
Because that would go right.
And then this is going to be our message text and let's drop that down to maybe 15.
I think that looks good.
All right so let's go ahead and constrain these.
So for our image also I want to show you a little trick if you hold down shift and control and then
click on anywhere.
Then you get the kind of the layers of things that you clicked over so if you want to go straight to
your image view you could do that like that instead of having to click and then click click.
You know maybe not getting the right thing.
Just hold control shift and boom you can grab whatever you want.
All right.
Anyways so for this game we're going to set the class is going to be a circle image and we're going
to constrain it was constrained to margins checked left zero top zero within and four constraints.
And then for the for the name we're going to go
let's go let's go 12 from the left and then I'm going to hold control and drag and we're going to say
top so that our top the tops of both of those are lined up.
And then this time label here I'm going to control and direct to Johnny B and space center vertically
and then let's do six from the left of the user name label.
That set looks good.
And then for this guy he goes pull pull him out and we'll go eight from the top 12 from the left and
12 from the right and then we'll set that to the bottom and say add four constraints and then we're
going to get an error here is going to want us to set some vertical hugging compression.
So we're going to let X could do that for us.
I want to see change priority and that should take care of that for us.
So now we got our UI elements that we need.
Let's go ahead and change the table you so class.
We haven't done that yet.
So here at the table your class set it equal to message cell and then the attributes inspector we can't
forget to set the identity of the reuse identifier to get the same message.
So OK that's good.
And then we're going to right click or unsorry hold option and click on the message.
So that's one of the file so that we can hook up our outlets.
All right.
Here we go.
Going to create a little header here outlets and then we're going to control drag from each of the elements.
So here we have the user image
here we have the user name I'm going to go from the hierarchy here.
So user name label
and here from the time stamp I'm going to track over and say time stamp label
and then from the message controlling and dragging and saying message body label
it looks good.
So now when we create our configure cell function we'll have the information that we need to populate
each cell.
So when I close the assistant editor and open our message cell that swift file and it's going to delete
some code we're not doing any selected state for the messages.
So we'll get rid of that and then all we need is a configure cell function.
So when I see func can figure.
So and what we're going to do is we're going to pass into this function a message objects and say message
type message
then we're going to just go ahead and say so the message body label text is going to be equal to the
message
that message the user name label that text is going to be equal to the message
that username the user image.
It's going to be equal to I should say to use an image that image is going to be equal to a UI image
named That's going to be equal to the user.
The message that user avatar and then the background color we're going to use a user image image that
background color is equal to user data service to instance to return a color and the components are
message that Avatar color you go.
And that should do everything except for the time label.
You may have noticed that I'm leaving the timetable out for now just because it requires quite a bit
of conversion.
We have to go from a from a kind of a weird date to the one that we need.
So we're going to cover that in the next lesson.
This lesson we're just trying to get the messages showing.
All right.
So now that we have our custom message cell set up we can go into our chat Visi and we are going to
need a an outlet for our table views to hold option and click on I mean that's storyboard to open up
our assistant editor in here and drag over Ann's table if you can and connect and we're going to close
assistant editor.
And what do we need.
Pop quiz.
We need to conform to a couple of protocols and they are UI.
Table View delegate can you write table the data can and what are we going to do next.
Next up we need to set our delegate and data sources for our table views and see Table View dot
delegate equal to self and table view that data source is equal to self
and then we're going to need to conform to these protocols by adding the required methods right.
So let's go down here and let's say and then.
So for at next path.
And this is where we are going to actually queue up our cell message cells are going to say if let cell
is equal to Table B you dot D Q reuseable cell with identifier string for index path and our identifier
string is message cell for index path.
And we're going to cast that.
And not that we were going to cast that as a message set.
So once we have queued up our our table view cell we're going to say we're going to grab the message
that corresponds with it.
And so if we have messages we're going to say let a message equal message or this instance that messages
and the one we want is index path.
OK.
And then we're going to call cell dog configure and pass into this function that object that message.
And then we're going to return that so.
All right.
And then if we're not able to QSL we're just going to say turn right UI table you so empty your table
you can see this.
And let's see here what do we got going on.
I think this is just going to go away in a second.
There we go.
So we finished up one of our functions the next one we need to know is number of sections and that's
going to be one.
And then finally a number of rows in S..
And so this is just going to be however.
However many messages are currently in our message service message message service instance dot messages
that count could be zero could be 100.
And then the last thing I think that we need to do is here in our get messages when we go and get our
messages we just need to say.
If success then self that table table viewed reload data.
So once we have retrieved messages we're just going to reload our table and load those all up and you
know what I think.
I think that's all we need to do.
Let's let's test this out.
Let's run it.
Let's see if we can actually see our messages
Hey check it is exciting.
Socor.
All right.
So let's let's send a message and I'm going to make this a long message.
This is a long message.
I'm going to copy it.
Can I copy this.
Maybe this is a long message.
I'm just going to do a whole bunch of typing.
And so the point of this is to see if we have an issue which I think we will.
So I'm going to send this.
All right and then we don't have the socket doc on set up so to actually see that message we're actually
going to have to stop and reload.
OK.
Yes so here you see this is a long message.
We need to do some work in our cell to make it so that that actually will show the whole message.
And so we're going to cover a cool little thing that some people a lot of people don't cover in their
chaps is how to make the cell dynamically sized to the height of the text and it's actually not that
hard.
So one thing that we need to do is go back to our main story board and we're going to select our message
label and make sure that the lines is set to zero.
Then back in our chat VCM what we need to do is we need to set a estimated roba height and so we do
that by seeing table view that estimated room height and will say about 80.
And then what we need to do is say table view that
row height and we're just going to you tell it to say your table will be your automatic dimension.
OK.
And so that is what is going to give us the automatic sizing plus having the correct constraint.
So hopefully we've got our constraints right down here.
But basically what you need is just that the that you have a full line of constraints from top to bottom.
Okay.
And and I think we I think we do have that.
Let's go ahead and run this
okay.
And yeah there we go.
So cool.
So now we have our sales actually dynamically sizing to the length of our message.
So that is pretty darn cool.
All right so yeah I mean this looks looks fantastic guys.
So I hope you're pretty happy with what you've gotten so far.
We're not done yet though.
And the next lessons we're going to we're going to do the socket dot on for the channel for the message
is so that we can send a message and see it pop up right away on ours as well as on other devices that
are running the same app.
And so super exciting stuff and excited to show you guys all of that in the next coming lessons.
But for now I'm going to add and commit my changes and then we'll see you all in the next one.