1

00:00:00,610 --> 00:00:07,090

Now it's time to actually implement the table view that's going to hold all of our messages from Firebase



2

00:00:07,420 --> 00:00:11,800

now instead of using a table view controller like I've shown you in previous lessons.



3

00:00:11,830 --> 00:00:14,180

This time we're going to implement it manually.



4

00:00:14,590 --> 00:00:19,750

This is going to give you a slightly better understanding of how table views work and is more than likely



5

00:00:19,750 --> 00:00:25,870

how you are going to do it in your apps when you need more than a table view on a single screen.



6

00:00:26,350 --> 00:00:30,960

OK, so the first thing we're actually going to do here is get rid of this out.



7

00:00:31,420 --> 00:00:39,190

So let's go over to our view controller and let's just comment about the out.



8

00:00:39,480 --> 00:00:44,360

And what I'm going to put there is for debugging purposes.



9

00:00:44,360 --> 00:00:45,430

So I'm not going to remove it.



10

00:00:46,040 --> 00:00:47,440

I'm just going to leave it in there.



11

00:00:48,010 --> 00:00:50,920

So this view controller is where we'll implement the table view.



12

00:00:50,920 --> 00:00:57,890

But of course, first we go to our storyboard and we are going to have to drop one in.



13

00:00:58,720 --> 00:01:01,530

So let's move this up and down.



14

00:01:01,540 --> 00:01:03,800

I like to have all my things neatly stacked up.



15

00:01:04,360 --> 00:01:04,930

There we go.



16

00:01:06,850 --> 00:01:12,550

So this blank view controller that I'm highlighting here is where we're going to implement this table



17

00:01:12,550 --> 00:01:12,810

view.



18

00:01:13,030 --> 00:01:14,580

Currently, there's nothing in there.



19

00:01:15,460 --> 00:01:16,840

So I'm going to hit plus at the top.



20

00:01:16,840 --> 00:01:17,290

Right.



21

00:01:18,100 --> 00:01:21,210

And first of all, I'm going to put it TextField in the bottom.



22

00:01:21,550 --> 00:01:24,730

This is where we're going to write our messages.



23

00:01:25,510 --> 00:01:27,040

Now, I'm going to constrain this.



24

00:01:27,370 --> 00:01:33,490

So I'm going to hold control, click and drag to The View, and I'm going to give it an equal width



25

00:01:33,490 --> 00:01:34,840

to the total view.



26

00:01:35,410 --> 00:01:41,920

And I'm going to control click to it again and have the bottom space to the safe area, and then we



27

00:01:41,920 --> 00:01:46,000

are going to horizontally constrain it in the container.



28

00:01:46,390 --> 00:01:49,660

So now everything is actually constrained in their.



29

00:01:51,730 --> 00:01:52,690

So this.



30

00:01:56,120 --> 00:01:57,030

That's what I'm after.



31

00:01:57,050 --> 00:01:57,290

Right.



32

00:01:57,310 --> 00:02:02,960

So when you say I wanted equal width, this is the constraint that pops up, that little one that I'm



33

00:02:02,960 --> 00:02:04,400

highlighting down here.



34

00:02:06,110 --> 00:02:11,900

But when you double click it, it shows you a multiply of value, that's the percentage of the view



35

00:02:12,260 --> 00:02:13,430

width, right?



36

00:02:13,460 --> 00:02:20,570

So this is point to three of the view with overall, what I want to do is maybe crank this up to point



37

00:02:20,660 --> 00:02:27,210

nine and it's just put it to one, a K zero point nine.



38

00:02:27,470 --> 00:02:27,940

There we go.



39

00:02:28,850 --> 00:02:31,530

So now it's got a bit of breathing room on the sides.



40

00:02:32,180 --> 00:02:36,410

Now we can hit the top right plus and drop in a table view.



41

00:02:40,270 --> 00:02:41,140

So there we go.



42

00:02:41,320 --> 00:02:44,800

I'm going to control click it up to the yeah, come on.



43

00:02:47,130 --> 00:02:55,710

Control click up to the top top space control, click to the TextField and give it some vertical spacing,



44

00:02:56,910 --> 00:03:03,180

and then I'm going to plunk this horizontally in the container and I'm going to give it.



45

00:03:05,130 --> 00:03:06,120

The same with.



46

00:03:08,190 --> 00:03:15,240

As the view in the background, so again, will be setting that multiplex at this time, I'm just going



47

00:03:15,240 --> 00:03:18,630

to do one so it expands all the way out.



48

00:03:18,930 --> 00:03:22,080

And then this top constraint I'm going to put on zero.



49

00:03:24,590 --> 00:03:29,180

And then there's a bottom constraint, the kind of hard to see sometimes, so this one's just to the



50

00:03:29,180 --> 00:03:30,170

right at the bottom here.



51

00:03:33,490 --> 00:03:40,690

So now they all kind of sit on top of each other, so that should give us the quintessential table view.



52

00:03:40,690 --> 00:03:43,410

Look with the entry box, the bottom.



53

00:03:43,690 --> 00:03:49,330

So if I hit play on the iPod this time, we get to see what that looks like.



54

00:03:51,410 --> 00:03:58,010

Of course, we will have to register our user first or log in, but we won't have to keep doing that



55

00:03:58,010 --> 00:04:01,760

every time we build this because the user will remain logged in.



56

00:04:03,590 --> 00:04:08,420

So whatever at whatever dot com and password.



57

00:04:09,260 --> 00:04:10,550

And I'm just going to copy that.



58

00:04:11,450 --> 00:04:13,690

I'm going to register and we're in.



59

00:04:14,200 --> 00:04:16,360

OK, so you can see the scrolling item there.



60

00:04:17,060 --> 00:04:18,380

There are these offset lines.



61

00:04:18,380 --> 00:04:19,540

Don't worry about that for now.



62

00:04:19,940 --> 00:04:23,840

And then down at the bottom, we have this little entry box.



63

00:04:24,140 --> 00:04:29,600

And if I hit Command K, I get to see the keyboard now.



64

00:04:30,580 --> 00:04:36,570

You'll notice the screen isn't actually moving up and perhaps that's a problem that we need to fix later,



65

00:04:36,940 --> 00:04:43,400

but we will get there as and when that used to be a major problem actually for iOS apps, as I recall.



66

00:04:43,900 --> 00:04:47,740

I don't think it's much of a problem anymore because there are simple solutions for it.



67

00:04:48,650 --> 00:04:55,330

OK, one thing I'm looking at here is perhaps give this at the bottom, a little bit of breathing room



68

00:04:55,600 --> 00:04:57,280

from the very bottom of the screen.



69

00:04:57,670 --> 00:05:00,250

So I'm going to move that TextView up just a touch.



70

00:05:00,610 --> 00:05:08,830

And if you can't see the constraint over at the top, right, you can hit the little triangle and it's



71

00:05:08,830 --> 00:05:10,540

called the size inspector.



72

00:05:11,050 --> 00:05:14,200

And that will give you all the constraints and you can hover over them.



73

00:05:14,590 --> 00:05:15,790

So we've got a line bottom.



74

00:05:15,790 --> 00:05:17,740

We can edit that with.



75

00:05:17,740 --> 00:05:19,090

It's tiny, tiny font.



76

00:05:19,180 --> 00:05:20,790

Maybe give it some breathing room of 10.



77

00:05:21,640 --> 00:05:27,040

OK, now we've shifted up just just a little bit just to make it look a little bit better.



78

00:05:27,850 --> 00:05:35,590

And actually we can have space to table view also at 10 and now it's a bit more symmetrical.



79

00:05:35,980 --> 00:05:38,020

Depends how you like the look of your items.



80

00:05:38,560 --> 00:05:40,120

OK, so we've got the table view.



81

00:05:40,540 --> 00:05:43,870

We got the item to enter the text.



82

00:05:43,870 --> 00:05:48,700

But because it's not a table view controller, there are no cells.



83

00:05:48,940 --> 00:05:53,680

Cells are the little boxes that hold the information that scroll up and down in the table view.



84

00:05:54,340 --> 00:06:00,760

So if I hit the top right plus item, you'll notice we can drop in a table view cell and I can drop



85

00:06:00,760 --> 00:06:03,940

that into my table view anywhere will do.



86

00:06:04,150 --> 00:06:07,030

And it will automatically call it a prototype.



87

00:06:07,040 --> 00:06:12,310

So make sure that it's embedded in the table view because that's a common source of error.



88

00:06:13,300 --> 00:06:18,100

OK, so we've got the table view, so let's go over and check out some properties.



89

00:06:18,100 --> 00:06:19,330

First of all, we have style.



90

00:06:19,840 --> 00:06:21,850

Well, we just want a subtitle.



91

00:06:22,210 --> 00:06:24,160

So a title and a subtitle.



92

00:06:24,580 --> 00:06:28,720

This will show the message and the date with the author or something like that.



93

00:06:30,670 --> 00:06:37,540

OK, and I think we can leave everything as it is if we hit play on that, we shouldn't get any horrendous



94

00:06:37,540 --> 00:06:38,620

errors, I hope.



95

00:06:40,660 --> 00:06:41,950

Yeah, build succeeded.



96

00:06:42,520 --> 00:06:46,690

We're already locked in and so we get our items here.



97

00:06:47,450 --> 00:06:52,570

OK, so you can see that little if you look at the bottom where the TextView is, I'm just scrolling



98

00:06:52,570 --> 00:06:57,640

this up and down a little bit and we have that appearance and disappearance.



99

00:06:57,640 --> 00:07:00,940

So that's the limit of the background.



100

00:07:00,940 --> 00:07:01,750

Scrolling V.



101

00:07:03,460 --> 00:07:10,600

OK, so that all works fine, I think before we end this section, we should actually give this a title



102

00:07:12,460 --> 00:07:13,270

chit chat.



103

00:07:17,050 --> 00:07:22,310

And then what can we do with that title, can we change the font?



104

00:07:23,080 --> 00:07:23,950

Yes, we can.



105

00:07:24,220 --> 00:07:28,810

But you'll notice if I select this section, the middle one, I can't change the font.



106

00:07:29,080 --> 00:07:37,720

But if I select the NAV controller, I can add that font will bubble through to everywhere so we can



107

00:07:37,720 --> 00:07:44,380

give that title color our green color if we want to, or we can turn it off.



108

00:07:47,000 --> 00:07:48,680

Let's have white for the title.



109

00:07:50,960 --> 00:07:52,560

I'm looking at the wrong thing here.



110

00:07:52,730 --> 00:07:57,470

Let's put that back to default and over in the title text attributes.



111

00:08:01,470 --> 00:08:08,190

Is it that one green, that's it, chitchat so we can have that is green or we could have a green background



112

00:08:09,150 --> 00:08:15,900

so we can have bought it as green and then the title color as white and that more matches what we've



113

00:08:15,900 --> 00:08:16,900

got going on over here.



114

00:08:17,250 --> 00:08:23,060

So now let's copy this font, which was, what was it, Dedeaux Italic.



115

00:08:24,270 --> 00:08:29,460

So let's go back to our title here and let's find it.



116

00:08:33,280 --> 00:08:35,680

Man, they make this so small, don't they?



117

00:08:39,390 --> 00:08:41,550

Where is my font selection?



118

00:08:44,750 --> 00:08:45,650

Yes, custom.



119

00:08:50,270 --> 00:08:51,560

Where do you guys think it is?



120

00:08:52,490 --> 00:08:53,630

I seem to have lost it.



121

00:08:56,270 --> 00:08:58,070

Oh, I hate this.



122

00:08:58,070 --> 00:08:58,220

Right.



123

00:08:58,250 --> 00:08:59,420

Let's go back to chitchat.



124

00:09:00,720 --> 00:09:09,970

There we have the front, if I selected OK, it's under the font family, can we actually find the font



125

00:09:10,780 --> 00:09:16,090

section on this tiny writing and yell if you can see it?



126

00:09:16,090 --> 00:09:19,600

Because I sure can't see it right.



127

00:09:19,600 --> 00:09:25,720

As as I recall, this is one of those things that needs some kind of custom code.



128

00:09:26,440 --> 00:09:27,340

So you know what?



129

00:09:27,430 --> 00:09:31,930

To save you guys some time, I'm actually going to leave this as it is.



130

00:09:34,460 --> 00:09:39,050

Yeah, because we can't change it being in the top, I remember what I had to do before was actually



131

00:09:39,050 --> 00:09:43,440

make an image and put that into the top, but that was many, many years ago.



132

00:09:43,460 --> 00:09:44,930

It's got to be an easier way to do this.



133

00:09:45,470 --> 00:09:48,830

And as I say, it's probably through code.



134

00:09:49,880 --> 00:09:53,080

So we're going to leave that as it is and just call it chit chat.



135

00:09:53,090 --> 00:09:55,160

So let's hit play and see what that looks like.



136

00:09:55,620 --> 00:09:59,570

That should look a lot more slick, I think.



137

00:10:02,990 --> 00:10:09,190

Yeah, yeah, so it matches the theme of our app, if we want to, we can put a green section around



138

00:10:09,190 --> 00:10:10,840

the bottom and see what that looks like.



139

00:10:12,250 --> 00:10:14,770

It's always pretty tough for me with colors.



140

00:10:15,130 --> 00:10:16,930

You don't want to overdo it.



141

00:10:17,050 --> 00:10:21,960

And because I'm a simple programmer, I sometimes do actually overdo it.



142

00:10:23,170 --> 00:10:24,750

So you've got green on the background.



143

00:10:24,760 --> 00:10:28,720

What I would actually like is green on the background surrounding it.



144

00:10:33,540 --> 00:10:36,470

So where are we going to find that, do you think?



145

00:10:38,730 --> 00:10:39,840

Got color.



146

00:10:41,000 --> 00:10:42,280

No, that's not it.



147

00:10:43,670 --> 00:10:44,990

That's the label color.



148

00:10:45,350 --> 00:10:46,310

Let's turn that off.



149

00:10:49,580 --> 00:10:57,080

Font, you know, let's not waste your time with this, we will leave that as it stands currently and



150

00:10:57,080 --> 00:11:01,680

it's one of those things that we can actually come back to if need be.



151

00:11:01,910 --> 00:11:02,840

That's a big problem.



152

00:11:02,840 --> 00:11:10,640

As a developer, I, I always go down these little nitty gritty routes and sometimes, you know, you



153

00:11:10,640 --> 00:11:11,810

just don't need to.