Now it's time to actually implement the table view that's going to hold all of our messages from Firebase
now instead of using a table view controller like I've shown you in previous lessons.
This time we're going to implement it manually.
This is going to give you a slightly better understanding of how table views work and is more than likely
how you are going to do it in your apps when you need more than a table view on a single screen.
OK, so the first thing we're actually going to do here is get rid of this out.
So let's go over to our view controller and let's just comment about the out.
And what I'm going to put there is for debugging purposes.
So I'm not going to remove it.
I'm just going to leave it in there.
So this view controller is where we'll implement the table view.
But of course, first we go to our storyboard and we are going to have to drop one in.
So let's move this up and down.
I like to have all my things neatly stacked up.
There we go.
So this blank view controller that I'm highlighting here is where we're going to implement this table
view.
Currently, there's nothing in there.
So I'm going to hit plus at the top.
Right.
And first of all, I'm going to put it TextField in the bottom.
This is where we're going to write our messages.
Now, I'm going to constrain this.
So I'm going to hold control, click and drag to The View, and I'm going to give it an equal width
to the total view.
And I'm going to control click to it again and have the bottom space to the safe area, and then we
are going to horizontally constrain it in the container.
So now everything is actually constrained in their.
So this.
That's what I'm after.
Right.
So when you say I wanted equal width, this is the constraint that pops up, that little one that I'm
highlighting down here.
But when you double click it, it shows you a multiply of value, that's the percentage of the view
width, right?
So this is point to three of the view with overall, what I want to do is maybe crank this up to point
nine and it's just put it to one, a K zero point nine.
There we go.
So now it's got a bit of breathing room on the sides.
Now we can hit the top right plus and drop in a table view.
So there we go.
I'm going to control click it up to the yeah, come on.
Control click up to the top top space control, click to the TextField and give it some vertical spacing,
and then I'm going to plunk this horizontally in the container and I'm going to give it.
The same with.
As the view in the background, so again, will be setting that multiplex at this time, I'm just going
to do one so it expands all the way out.
And then this top constraint I'm going to put on zero.
And then there's a bottom constraint, the kind of hard to see sometimes, so this one's just to the
right at the bottom here.
So now they all kind of sit on top of each other, so that should give us the quintessential table view.
Look with the entry box, the bottom.
So if I hit play on the iPod this time, we get to see what that looks like.
Of course, we will have to register our user first or log in, but we won't have to keep doing that
every time we build this because the user will remain logged in.
So whatever at whatever dot com and password.
And I'm just going to copy that.
I'm going to register and we're in.
OK, so you can see the scrolling item there.
There are these offset lines.
Don't worry about that for now.
And then down at the bottom, we have this little entry box.
And if I hit Command K, I get to see the keyboard now.
You'll notice the screen isn't actually moving up and perhaps that's a problem that we need to fix later,
but we will get there as and when that used to be a major problem actually for iOS apps, as I recall.
I don't think it's much of a problem anymore because there are simple solutions for it.
OK, one thing I'm looking at here is perhaps give this at the bottom, a little bit of breathing room
from the very bottom of the screen.
So I'm going to move that TextView up just a touch.
And if you can't see the constraint over at the top, right, you can hit the little triangle and it's
called the size inspector.
And that will give you all the constraints and you can hover over them.
So we've got a line bottom.
We can edit that with.
It's tiny, tiny font.
Maybe give it some breathing room of 10.
OK, now we've shifted up just just a little bit just to make it look a little bit better.
And actually we can have space to table view also at 10 and now it's a bit more symmetrical.
Depends how you like the look of your items.
OK, so we've got the table view.
We got the item to enter the text.
But because it's not a table view controller, there are no cells.
Cells are the little boxes that hold the information that scroll up and down in the table view.
So if I hit the top right plus item, you'll notice we can drop in a table view cell and I can drop
that into my table view anywhere will do.
And it will automatically call it a prototype.
So make sure that it's embedded in the table view because that's a common source of error.
OK, so we've got the table view, so let's go over and check out some properties.
First of all, we have style.
Well, we just want a subtitle.
So a title and a subtitle.
This will show the message and the date with the author or something like that.
OK, and I think we can leave everything as it is if we hit play on that, we shouldn't get any horrendous
errors, I hope.
Yeah, build succeeded.
We're already locked in and so we get our items here.
OK, so you can see that little if you look at the bottom where the TextView is, I'm just scrolling
this up and down a little bit and we have that appearance and disappearance.
So that's the limit of the background.
Scrolling V.
OK, so that all works fine, I think before we end this section, we should actually give this a title
chit chat.
And then what can we do with that title, can we change the font?
Yes, we can.
But you'll notice if I select this section, the middle one, I can't change the font.
But if I select the NAV controller, I can add that font will bubble through to everywhere so we can
give that title color our green color if we want to, or we can turn it off.
Let's have white for the title.
I'm looking at the wrong thing here.
Let's put that back to default and over in the title text attributes.
Is it that one green, that's it, chitchat so we can have that is green or we could have a green background
so we can have bought it as green and then the title color as white and that more matches what we've
got going on over here.
So now let's copy this font, which was, what was it, Dedeaux Italic.
So let's go back to our title here and let's find it.
Man, they make this so small, don't they?
Where is my font selection?
Yes, custom.
Where do you guys think it is?
I seem to have lost it.
Oh, I hate this.
Right.
Let's go back to chitchat.
There we have the front, if I selected OK, it's under the font family, can we actually find the font
section on this tiny writing and yell if you can see it?
Because I sure can't see it right.
As as I recall, this is one of those things that needs some kind of custom code.
So you know what?
To save you guys some time, I'm actually going to leave this as it is.
Yeah, because we can't change it being in the top, I remember what I had to do before was actually
make an image and put that into the top, but that was many, many years ago.
It's got to be an easier way to do this.
And as I say, it's probably through code.
So we're going to leave that as it is and just call it chit chat.
So let's hit play and see what that looks like.
That should look a lot more slick, I think.
Yeah, yeah, so it matches the theme of our app, if we want to, we can put a green section around
the bottom and see what that looks like.
It's always pretty tough for me with colors.
You don't want to overdo it.
And because I'm a simple programmer, I sometimes do actually overdo it.
So you've got green on the background.
What I would actually like is green on the background surrounding it.
So where are we going to find that, do you think?
Got color.
No, that's not it.
That's the label color.
Let's turn that off.
Font, you know, let's not waste your time with this, we will leave that as it stands currently and
it's one of those things that we can actually come back to if need be.
That's a big problem.
As a developer, I, I always go down these little nitty gritty routes and sometimes, you know, you
just don't need to.