It hey everybody this is Caleb with Dev slopes dotcom and in this video we're going to go ahead and
set up our users cell which is what we're going to use when we search for a user when we're trying to
create a group.
It will show a profile image their email and it'll also have a check so we can determine whether or
not we have added them to a group or not.
So go ahead and pull open that code project and what we're going to do is we're going to start by designing
the cell here the user's cell.
And then after we design it we're going to create the subclass in code.
So this is a little bit too skinny for my liking.
I'm going to go ahead and pull it down to maybe 55.
That looks like a pretty good height.
And let's go ahead and I'm going to change the background to be Let's see does light gray look better.
Yeah I like that.
The light gray looks better compared to the dark gray which will be the background.
I think that looks pretty cool.
And now I'm going to do is I'm going to drag on a UI image view like so OK.
And drag it onto the cell.
Now I'm going to resize it.
So it's a nice little square and we want it to fit inside that cell.
So it had better be pretty small.
Well you know what.
Now that I'm thinking about it maybe our table view cell here is a little too short.
Maybe let's make it 60 0 and something we need to remember is we also need to select the table view
and change the row height to match.
Ok cool.
So let's go ahead and let's resize this it looks like 44 by 44.
It's going to be a good size for us.
And let's go ahead and fill this with our default profile image for now let's just select that aspect
fill clip bounds.
That looks good and I'm going to go ahead and pin this zero from the left zero from the top zero from
the bottom.
And I'm actually going to pin it 10 from the left.
Oh that's odd.
Well as you can see it kind of messed up the height and width there so let's go ahead and give it a
height and width constraint of 44 and 44.
There we go.
Nice.
OK so that looks great.
Now let's go ahead and add a label for the e-mail.
So search for label and drag one on.
There we go.
That looks good.
Let's modify the font to custom Menlo And I think size 18 is probably OK but I'm going to go down to
16 just to give us a little more room and choose that nice green color.
Very cool.
We're not going to give it constrains just yet because we have another image to add let's add that on
this side here and we're going to stretch this down and we're going to make this actually just fit right
here.
Let's fill the image first and then let's determine what we need to do with it.
So let's go ahead and search for a white checkmark.
There we go and let's do aspect fit boops aspect fit.
And we're going to make it small.
And so we're going to go ahead and let's see how that looks.
Does that look pixillated to you it looks a little pixilated to me.
Let's zoom in here.
Let's see.
It's not going to let me of course.
That's nice.
OK.
So I can't zoom in but I definitely can zoom in enough to see that that is definitely pixilated.
So let's go ahead and reduce it in size a little bit K and let's give that constraint here zero to the
top 10 to the right and zero to the bottom.
Go ahead and pin it there.
That looks good.
Oh and now it's not pixilated.
Awesome.
Very cool.
And let's go ahead and let's set this label up as well so that it comes right up next to the image.
And we're going to go ahead and pin this.
Well 12 let's do 10 from the top 10 from the left 10 and 10 let's just pin it 10 all around all right
cool.
The only issue with this image here is we've not given it a with constraint so let's let's pin it at
20 and let's keep it there.
And now everything should stay in place nicely.
OK that's great.
Although it looks like the labels now a little bit too close to the image.
Let's go ahead and let's set the leading space to actually be 20.
So it's not so so so close and let's just change the default text to say user at break point.
Awesome.
OK so that's a good fit for a pretty average e-mail.
But if for some reason it didn't fit all the way I'm going to set a minimum font size of 8 so that it
can scale down if it's a little bit longer so we can fit the whole thing in the cell.
All right.
Excellent.
So this is now built out we've built out a nice little table view cell.
Now we're going to go ahead and right click on View new file and select cocoa touch class.
We're going to create the table view cell subclass for this cell and we're going to call this user cell
because it's a cell that holds information about a user so that just makes sense.
So click Create and you should see it come up here.
User so awesome.
Now go ahead and click on Main storyboard and we are actually going to set the identity of our cell
in the table view as a user cell so that we can modify it here on the on the right so select table view
cell from the document outline and then we're going to go ahead and in the class we're going to choose
user's cell.
And you know while we're at it before we forget we should also change the reuse identifier because we'll
be using that in just a moment to create all of these when we dequeue it from the table view.
So go ahead and type user cell and just paste that in there.
I like to use the camel casing here with lower case first word and uppercase second word for the reuse
identifier.
That's just what what is common.
So that's what I do.
And now we should be able to select our user cell and then come into manual go to View and choose user's
cell.
And now we should be able to access all of this how we want.
So we can get rid of Awake from NIB.
We're not going to need it but we are going to save set selected.
OK because this configures the view for the selected state how we're going to use this is we're going
to use it to toggle the checkmark.
So when we select it the checkmark will be non hidden.
When we selected again it will hide.
So this will be hidden by default and we will go ahead and show it when it's selected.
That would be pretty cool.
So let's go ahead and set up Iby outlets for now for these images the label and yeah that's it.
So right click and drag from the image call this profile image.
That's good.
Select the label call this e-mail label and then select the check and call this check image.
All right.
Very cool.
So now we can properly access all of the elements in every cell and we're going to now create a configure
cell function just like we've done with other table cells.
So go ahead and do that.
Call phunk configure cell and we have three things that we need a profile image and e-mail and we're
going to pass in a boolean called is selected.
And that's going to determine whether or not the check image shows.
So like I said we need a profile image and I'm going to use an internal parameter of image here.
We have a user name which That's fine just.
Well no let's call it e-mail that username because we're not really using usernames using e-mails.
And then for the boolean Let's go ahead and call it is selected.
So those are the three important things we're going to pass in.
OK.
An image an e-mail and is selected as boolean.
So first we're going to set up the profile image by calling self profile image image a profile image
being the image view.
And we're going to set the image to be the image that we pass in here.
OK.
Next we're going to set the username self dot whip's e-mail label.
Text equals e-mail.
The one we pass in from our function.
Very cool.
Now here's where we need to use a little bit of conditional code.
Oh whoops it looks like I made a mistake here.
Bringing in my e-mail label it looks like I got the background view and called that e-mail the e-mail
label accidentally.
Let's remove that.
That's going to cause us all kinds of problems.
OK.
Get rid of that and leave space here and let's select the label from the document outline sometimes
that's easier.
There I should have checked.
But you can tell it's an eye label right there.
OK.
E-mail label is now accessible.
Beautiful.
OK.
Now we're going to do some conditional code for is selected.
So if is selected meaning if our name has been selected already.
Right.
If we have pressed on the table the cell then the check image should show right it should not be hidden.
So go ahead and call.
Check.
Image is hidden equals false.
OK.
And then else meaning if it is not selected We're going to hide the check image because if it you have
to kind of think about it in reverse if it is selected the check image is not hidden.
If it isn't selected the check image is hidden.
It's not showing because we haven't selected anybody yet.
So go ahead and call check.
Image is hidden.
Equals.
True.
All righty.
Very very cool.
You know what just to make sure that we are referring to the right one we should call self check image
and that looks pretty good.
So if it is selected it will be false.
If it is not it will be true.
I think this is pretty good.
We're going to go ahead and just leave this like this for now.
OK we'll see how that does.
And let's go ahead and let's go set up our table view in create groups Visi so that we can show some
cells on the table for you.
OK.
So click create groups Fisi and close the assistant editor just like that.
Very good.
And now we need to go ahead and set up our table view.
I'm going to get rid of that boilerplate code and in order to start I'm going to create an extension
of this view controller and conform to the table view delegate and data source.
So type extension create groups VC.
Make sure you type the right one.
Create groups visi.
And we're going to conform to you Table View delegate and you table view data source already and as
you know there are three that we need to conform to number of sections in table view number of rows
in Section and cell for index path.
All righty.
Now a number of sections just like most times we'll be returning one LME and return down here.
You can see a little better number of rows in section for now.
Let's go ahead and let's return three.
Let's just see what 3 looks like.
And for self-growth index path let's go ahead and let's set up an instance of user cell.
Let's dequeue them and let's just see if they show.
So let's go ahead and let's think we need to do a guard let cell equals table view d q reusable cell
with identifier K and there the identifier.
If you remember that's the reuse identifier we already set it as user cell.
OK.
Now we're using guard let just in case it can't create the amount of cells it needs it's not going to
crash.
So we need to cast this as a user cell in order for it to actually have that identity as user cell.
But if this can't work then we need to call.
Else and we can't just return.
Watch what happens if I try to just return OK it says non void function should return a value and it's
telling us we need to return a table view cell.
So let's just return a blank one like so and let's instantiate it.
OK so this is good assuming we get a cell back if we do then we can call cell Dom configure cell and
we need to pass it a profile image.
OK so in order to do that we're actually going to go ahead and create a constant appear called profile
image and let's just set it to be UI image and we're going to use you image named like so.
And if you remember it's called default profile image and now we can just pass that in.
Although we will have to unwrap it simply because we are using it with a string type name and there
are chances that it could be a problem.
But we know for sure that that is the name.
So that's great.
Let's go ahead and let's pass in a random e-mail just for now.
How about mart at back to the future com.
Nice.
And how about four is selected let's just say.
True.
So we can see if the check image shows all right now the cell is configured.
Let's go ahead and return the cell.
And now we should be good to go although I am remembering for a table view we need to set the delegate
and data source in view to load.
So let's go ahead and type table view.
Delegate equal self and table view data source also equal self.
You guys will see if this works.
All right let's go try.
So build and run that building to my phone and let's build it to the simulator instead.
And let's go see if it worked.
I'm so excited to see if these cells show up.
I think they're pretty pretty cool.
They look pretty nice.
And that's a really really awesome way for the user to search through and add people they want to their
group supercool experience.
And let's see if it worked.
All right.
So we need to go into groups add groups Visi And hey look at that.
They showed up supercool.
So there's an image there's an e-mail and the check.
We said it to be selected.
And that's that's exactly right.
That's perfect.
So now we properly have table view cell showing up we have the check showing if we pass in selected
or hidden if we don't pass and selected we can give it an email we could pass in an image.
This is good to go guys we now have a user cell that properly works in the next video we're going to
set up our function that's going to search through all of our users and firebase download them down
into the cell and we're also going to go into.
Let me show you.
We'll go into the user's cell and we're going to set up a set selected to hide and show the check image
depending on whether or not we tap on the cell.
It will be super super cool.
Let's head over to that video now and let's get started.