Everybody this is Caleb with slopes dot com.
And in this video we're going to go ahead and we're going to create group cell which is going to go
right here.
It'll show a title for the title of our group.
It will show a description and will also have a label to show how many members are in the group.
So we're going to go ahead and start by building out that cell now by opening up X code going into main
storyboard.
And as soon as it loads we're going to go ahead and design it first by going to groups we then we're
going to build the subclass write it out in code to configure the cell and then we're going to configure
some static data just to make sure that our cells are loading properly.
Let's do it.
So select that cell and we're going to give it a background of dark gray and all we need to do is drag
on three UI labels it's really easy.
So go ahead and drag on a UI label beautiful and drag on another one and drag on a third one.
Looks good.
OK.
So we're going to do the same thing for all three of these because the font and the color will be the
same.
So select custom change it to Menlo And let's not mess with the size yet because the top label is going
to have slightly bigger font but we can change the color to our teal color which is really cool and
we can go ahead and start kind of maneuvering these around now.
So this will be for the group title.
This will be for group description and this will be blank members that will show how many members are
in the group.
Now the group title.
I'm going to put kind of up here to the side and I'm going to actually bump it up to about 20.
And let's actually make it bold.
So it kind of stands apart from the rest of the cell.
The others the other members were going to go ahead and put slightly in.
And we're going to set them so that they basically fill the entire cell just like that.
So for the group title we're going to go ahead and let's pin that maybe let's do eight from the top
eight from the left eight from the right.
And let's do eight from the nearest text text field no label you white label a label I promise.
OK.
Beautiful.
So that's in place.
Let's go ahead and let's set some constraints here.
We're going to set eight from the top.
Well no you know what we already have a constraint there so we don't need to pin that.
Let's go ahead and pin 15 from the left 0.
Well no let's do it from the right and let's do it.
Eight from the one right beneath it.
Very cool although it looks like we may have some issues with our constraint at the very end on the
trailing side.
Try negative eight.
OK.
So good.
Looks like we need to go negative 8 pull it in the way we want and for the members we're going to basically
do the same thing except we'll do 15 from the left whoopsies 8 from the right and we're going to do
eight from the bottom just like that.
We don't need to give it a top constraint because it already has one.
We're already pinning it to the top here.
Although you know what it looks like we actually do need to do that.
I don't know what I'm thinking.
OK.
Pin the top to that label.
Whoops we already pin that one.
We're going to actually pin the bottom of this oh no we're good.
Interesting.
So you know what
trailing space is not matching up.
Let's let's actually you know what guys.
Sorry I don't like how I'm doing this.
I'm going to go ahead and I'm just going to remove all the constraints for now for these two labels
and since they're basically doing the same thing I'm going to just go ahead and put them in a stack
view and let's go ahead and set it to fill.
So it goes across the whole stack of you.
And now we should be able to constrain the stack view the way we want.
So let's go ahead and pin that 8 from the top let's do 20 from the left 20 from the right and maybe
8 from the bottom.
OK.
Awesome.
So that looks exactly how we wanted it.
Although we definitely need a little bit of spacing so let's give it five pieces of spacing pieces at
points.
And since we're adding spacing Let's go ahead and let's move the bottom constraint down to zero so that
we can fit everything in.
And that looks pretty good.
So this is now a group cell it'll show the group's title description and the number of members.
So let's go ahead and create the subclass.
Now in code right click on view click new file Cocco touch class and you table you sell it's already
there but we're just going to call this group cell.
Click next.
And go ahead and create that into our project.
And now we can get rid of all of this junk that we do not need but we do need to go set the identity
in main but storyboard so go back to main storyboard open the assistant editor while we're here we're
going to use it in just a second and we're going to select the table view cell just like that in the
identity Inspector go ahead and give it an identity of group cell.
Perfect.
And now we should be able to see that when we go to View group sell we should be able to interface between
these two.
So let's create some ivy outlets so that we can properly interface with groups.
And to do that we're basically going to select each label right click and drag and we'll call this group
title label.
Next we're going to go ahead and we will call this group description label and this will be member count
label to denote the number of members.
Very cool.
Now of course in order to actually properly show information we need to write a configure cell function
so let's do that.
Phunk configure cell.
And what we're going to do is when we can figure this we need to pass in a title for the group of type
String we need to pass in a description of type string not a Stern string and we need to pass in a member
count of type int because it's a value right.
Three members four members five members.
Now what we need to do is we need to set these labels so self group title label text is going to be
equal to the title Whichever one we pull down from firebase self description label group description
label.
That text is going to be equal to description then self dot member count label dot text is going to
be equal to the member count.
But we need to create a string and pass in the number.
So to do that go ahead and type a quotation mark and then inside use a forward slash and parentheses
and we can pass in member count and then we can say members.
So that'll basically create a string version of that number and add members at the end and it will show
the proper information.
Super easy.
So now that we have properly created a group cell and set up its subclass what we need to do is set
up the reuse identifier because we're about to load some data and we're going to try to fill in some
cells.
So since this is called Group cell I'm going to copy that and just paste it in as the reuse identifier
but make the G at the front lower case just personal preference.
All right so now we need to set up groups you see we have not yet connected outlets for the table view
or for anything else.
Let's go do that now.
Actually sorry back into Main Story storyboard.
Go ahead and open up the assistant editor and here's what we're going to do.
We're going to select our table view.
We're going to select automatic and go to groups Visi then we're going to right click and drag to create
a groups table view.
OK create an ID outlet there to save that in place.
Very cool.
And now we can close the assistant editor and just do work in VC.
So let's go ahead let's get rid of it did receive memory warning and we're going to actually create
an extension of groups Fisi so that we can conform to the table view delegate table view data source
protocols.
So go ahead and type extension groups VC and type you.
Table View delegate and you table view data source.
Excellent.
There are three functions we have to conform to.
So a number of sections which usually we just return one then we have a number of rows in S..
Let's just return three.
Let's see just three of our cells.
And then there cell for row an index path.
So to do this we're just going to generate three cells and we're going to just set them with all the
same information just to see if our table is working.
And so let's do it.
Go ahead and type guard.
Let cell equals groups table view dequeue reusable cell with identifier.
Now remember our identifier is group cell and the index path is just the index path from the table view.
Now in order to actually instantiate this as a group cell we need to optionally cast it as a group cell.
Otherwise if we don't get anything back if we can't do QSL we're just going to return a table view cell.
Very cool.
So now we need to configure our cell to show all the proper information.
So go ahead and type Celcom configure cell for the title let's just say nerd herd.
The description is the nerdiest nerds around I think we've done this already and the member count let's
say there's three members Me and two other people great.
After we configure the cell we're going to go ahead and return the cell so that the table view can use
it the way that it needs to.
Awesome So that looks great.
There's one thing we need to definitely set our groups table view to have a delegate.
So type groups table view.
Delegate is going to be self and groups table view datasource is also going to be self.
So it knows where to get all of the information it needs.
So let's go ahead let's build and run let's see if this shows our three cells that we want to display
and build and run.
There we go.
It's opening up.
And when we click on groups we should definitely see a table view loading three cells.
Click oh and we get a crash.
Interesting.
OK.
Terminating app to uncaught exception an unknown key exception UI you control or set value for undefined
key.
This class is not a key value coding compliant for the key groups table view interesting.
Let's go back and let's take a look at what we've done here.
We have set up a table view.
OK we have an IB outlet.
We have given it a delegate a data source we have told it all of the required things we are returning
a table view cell like we're supposed to.
OK let's go check to make sure that we didn't accidentally connect this to the wrong thing.
No it's connected to groups.
That's exactly what we want.
Actually
group sell gay group sell That's exactly right.
Groups cell is the name.
Interesting.
So that's not working.
Now when we open the view controller on feuded load we are showing everything.
Let's let's just see if we remove these it should just show the empty table view if it doesn't if it
crashes again we'll know we have another problem.
But I'm just making sure that it's not to do with the table view.
OK.
And you know what.
It actually appears to be a problem with the table view.
That's really weird.
We have a group so
OK so I think I found the problem guys.
It's a really really weird issue.
Now if you click on feedback you'll notice that its identity is feed Visi and we're inheriting it from
the target meaning that it's pulling feed the sea from our feet to the C-code files.
Watch what happens when we select groups somehow inherit from Target got unchecked meaning it's not
actually pulling groups Fisi from anywhere.
So it's sort of like somehow we have until that and now it's no longer a part of our app.
I bet that this has been working the whole time.
We just did not have that.
Let's build and run.
Let's see if that works again that's a really weird problem.
And this code beta bug is really bothering me with this gray thing he just stays there no matter what.
OK let's try it again.
Groups and we have our groups showing up now.
The font is way too big as you notice.
We're going to go ahead and change that really quickly.
And sorry for this giant grey depressing thing.
But we're going to fix it really quickly let's notice in this cell.
I believe it was 14.
Let's set both of these down to 14 looks good.
And that means this could probably be maybe 18.
It's build and run one more time.
I knew that I had set that up properly but I was just trying to figure out why it wasn't working it
was just some super weird fluky bug.
You probably won't have that bug because you probably didn't accidentally tick the wrong box.
So let's check it out.
Ah that looks much better.
Much more consistent.
Now we are successfully loading static data into our table view in the next video we're going to write
a function called Get all groups that's going to allow us to download all the groups from firebase and
pass them into our table view.
Now the cool thing is that if someone adds us to a group it's going to show up immediately in table
view.
Really really cool stuff.
And just an amazing part of the real time firebase database.
Let's head over to the next video where we'll download all of our groups.
I'll see you there.