Everybody welcome back.
Johnny B who with slopes dot com and we are continuing on with our chat app.
Let's go and just run this to see where we left off we were working on our collection of view in our
avatar picker View Controller and yes so in this little lesson we are going to continue working on that.
Get it to where it's showing all of the correct Avatar images as well as being able to select them and
see that to our user data service.
So if this pops up it's just been trying to vamp here while this loads that we click here on our menu
go to log in don't have an account sign up here and this is where we're at right now again.
So we need to work on our configure cell function and I get that all working.
All right.
So let's take a look at our avatar so one of the first things what we're going to need to know to configure
our cell is whether it's supposed to be a dark or light cell right.
So I'm thinking we create an enumerator here and we're going to call this enumerator Avatar type A and
we have two cases.
Case one is dark dark stuff.
That hand is trying to set it equal to an image and cased next cases light.
And so then in our configure cell function or a funk configure configure.
So we are going to need to know the index so that we can set the image and that's going to be of a type.
And we're also going to need to know the type of Avatar that is supposed to be whether it's dark or
light.
And that is of type have a tar type in the area that we just created can cause the bottom pane here.
And so we're going to say if the type is equal to Avatar type dot dark then the avatar image that we
have an IP outlet for the only image the only UI element inside of these cells then the image is going
to be equal to UI image named and it is going to be named dark and then string and interpolate the index
that we are passing into this function.
And then just a little bit of stabilizing.
If it's a dark Avatar we're going to have a light gray background to it.
If it's that light they're going to have a dark gray background just so that the backgrounds accentuate
the Avatar images.
All right.
Francis self-taught layer dot back ground color is equal to you by colored light gray dot C-g color.
So else if this is a light Avatar we are going to say and I'm just going to copy this because it's pretty
much the same thing.
The avatar image is going to be equal to you image named instead of dark.
It's just going to be light.
And just to drive it home one more time if we look at our assets these are named dark and then an integer.
So what's going to happen is when the cell for item is function is called and the controller is going
to cycle through and it's going to send the index 0 through 27 to our configure item cell and it's going
to do the check whether it's supposed to be dark or light and then it's going to pick the Avatar images
based on that.
OK.
And we need to change this color to just a regular Gray.
All right.
Perfect.
And save that
analysis jump into are going to say that Ganjam two are avid her picker visi.
And here we need to call our configure cell function.
Ok I was going to say so dot configure cell and we have we're going to pass in the index and that's
pretty easy because that's.
That's right.
Here the index paths are going to say Index path that item will give us the specific index path index
number that we want.
But here we need to pass in the type.
All right so we need to actually create a variable that stores the type of Avatar type that we are currently
selected.
OK.
So the variable is going to be our avatar type and this is going to equal an avatar type and by default
it's going to be set to the dark because when we load the view controller that's what the segment control
is set to by default in.
So for now we're just passing the Avatar type here and it's just going to be the dark for now until
we get in our segment control changed function working.
All right so let's go ahead and run that.
I'm going to click here.
Click on log in.
Don't have an account.
And drum roll.
Hey every
looks pretty cool.
This doesn't do anything yet though.
So let's go ahead and fix that.
How are we going to do that if we come down here to the segment control changed.
I want you to try and figure this out on your own.
OK.
So just kind of to talk you through it.
What you're going to need to do is you're going to need to do a check to see which segment control is
selected then you're going to need to change this avatar type.
And then you'll need to do something to reload the data.
All right.
So see if you can figure that out on your own.
And if and if not then we're going to do it right now.
Together game.
So we're going to say if segment control that selected segment index.
So that's how we are able to access and know which one is selected.
0 is the first one and then number one is the right one answering to say.
So if it's equal to zero then we know that the dark is selected sorry and say Avatar type is equal to
dot dark and else the Avatar type is equal to dot light.
All right so we are changing the variable here based on which segment control is selected.
And then after we have set that then we're going to say collection view dot reload data and that will
call all these collection view functions again and this time when we pass and so that configure cell
if we have selected the light segment control then the light type of Avatar type will be passed on to
the configure cell and instead of the loading the dark Avatar images will show the lions all right.
So to see that an action was go ahead and run it and open up our menu press log in dont have an account
click on the Avatar.
And hey there we go.
So now we are toggling between the dark and light.
So that looks awesome but this the flow doesn't look great how it's set up and it probably doesn't look
awesome on both of the larger and smaller files like this is a plus so it doesn't look awesome on the
7 or the size either so let's go ahead and let's try and fix that.
So one of the functions that we get here is if you type size four item at let's see I think we won this
round here a size 4 item at.
All right.
And we can type in a and return a C-g size.
But I think what we want to do is we're going to be we're going to do a little bit of math and some
coding here to make it more fluid.
All right.
So we have to take into account the screen sizes from the SE all the way up to the seven plus right.
And so we want the sizes of the cells and even how many columns to be dynamic based on which screen
size we're using.
All right so we are going to calculate the number of columns and the size of the individual cells based
on the screen size.
Right.
So what we're into is we're going to say we're create a variable here called number of columns.
OK.
And that's going to be a see you float.
And we're going to start out with three but we're going to say if the UI screen dot main dot bounds
dot with is greater than 300 and 20 then go ahead and set the number of columns equal to four.
OK.
So we'll talk about this basically right here.
This is just getting the width of the screen size screamed at mean that bounced out with just getting
the width of the current screen and 320 that is the width of the smallest iPhone size the iPhone s e.
So if so we're saying there's going to be three columns.
If it's an iPhone.
If it's anything bigger an iPhone 6 or 7 or any of the pluses then we're going to go with forehands
just because that will look a little bit better.
All right.
So now we need to calculate the size of the width and height of our cells.
OK.
So what we're going to say is going to say let the space between cells of type C.G. float rancid that
equal to 10 and you may be wondering why worse we're explicitly declaring all of these numbers to be
of type e.g. float.
And that's because if you see here the C-g size we're going to be required to when we do math all of
the numbers we want them all to be of the same type so that everything works out OK.
So I'm going to pull this up here again.
Our simulator just to kind of will have a visual aid while I explain the math that we're going to be
looking at here.
All right.
So this space between cells variable is this guy right here.
So this gap as well as this one right here.
And so what we're what our goal is to calculate how tall and how wide we want each of these cells to
be based on the screen with.
And so we're going to need to know the gap that we want between the cells.
And we also need to know the inset distance which I said was this padding on the sides so we said that
to be equal to 20 in case we're going to say let go and call that padding.
And that's also of type C.G. float.
And that is equal to 40 because it is 20 on both sides.
Basically we're going to be eliminating everything that is not purely clutching view OK.
And then we're going to say let cell dimension equal.
And so we're going to say a couple of parentheses here.
We're going to take collection be you dot bounds dot with minus the inset hers minus the padding minus
the number of columns minus one times the space between cells.
All of that divided by the number
of columns I need space right here.
All right.
So just kind of try to take a look at that again.
So let me see if I can find a place for this that will fit Ka-Zar left panel.
OK.
So we're saying we're crying like I said we're trying to get the I mean make the smaller.
There OK.
So we're trying to get the cell width and height mainly the the width.
OK.
Because we're looking at squares here.
All right so we're saying we're getting the space between the cells and we're getting the padding which
is 40.
So we're starting out saying get the entire width.
We're going to subtract from that the padding.
OK.
So that's gone then we're going to subtract from that the gap right here.
OK.
And so all that leaves is this distance this with and this with.
And so we're just going to take that amount and we're going to divide that by the number of columns
and that will give us the width of each individual cell based on the number of columns the space between
the cells and the padding.
All right.
So then all we have to do is return a C.G. size.
And that is going to be with cell dimension and height cell dimension.
All right so when I say that and I'm going to run this on an iPhone 7 plus 6 s and s e and I'll just
come back to you when those are all back up.
All right.
So we got all.
All three of them up here.
The seven plus a 6 s and s e.
And you can see that we have they all look up great.
We have three rows in the.
We have four in the plus and the regular size and each of the sizes they all are dynamically size so
you don't have any weird spacing.
And so yeah it looks it looks real good guys.
All right so I'm going to go ahead and stop that and open up our great pain again.
I said the last thing to do is select an avatar.
All right so what we're going to need to do for that is if we are going to call the function did select.
All right.
So what happens when we click it.
We are going to save whichever one was selected as the user's avatar name.
All right.
So if the Avatar type is equal to that dark when we selected the user data service for instance that
set avatar name Raemer I said we're going to need this.
We are going to set that equal to
dark and we're going to string and interpolate.
And we're going to say Index path that item right else the user data service instance does set an avatar
name will be liked and then string interpolate with the index path that item right there you go.
And then once that's done we are going to just self-doubt dismiss animated as true and completion is
new.
So when we click on it and we are saving to the user data service Let's jump over here and jump over
here to the user data service we saving to the avatar name property.
Whichever one we clicked on basically and then we are just dismissing.
All right.
And then what we want to do is when.
So we're going to dismiss back to the create account VC and what we want to do is when we get back here
we want to update the profile or the users image to the one that we just selected.
So we're Reseda going to see on view did appear and we're going to do a check because when we initialize
the user data service we set the avatar name just equal to an empty string.
So what we're going to do is say if user data services for instance dot have a term name is not still
equal to that empty string meaning we have selected one from the avatar picture then we're going to
set the user image that image equal to that image.
So when I say image name.
And the name of the image is used do a service dot instance dot avatar name.
And then we are also going to set the local variable for Avatar name which we use here in our create
user function.
OK.
So when I say avatar name is equal to I can use a data service that instance that Avatar avatar name
and there we go let's say that and run it I'm going to put this back up on the iPhone 7 and run that
and see how that works.
Let's see here we go in and go on to have an account click here and we're going to select this shark.
And hey there we go.
All right.
Awesome
of these light ones though it's kind of hard to kind of hard to see it but we'll fix that here in the
next videos.
Go ahead and call it good on this one.
So in this video we set out to finish up our avatar picture Visi and that we did.
Now we can select our avatars.
We can we've got the sizing right and dynamic for any of the iPhone sizes.
And yeah it looks really really good so far.
So you guys are doing awesome making great progress when we go ahead and just save our progress here
in Terminal 4 Get set get commit that.
And this is less than 14.
And in the next lesson we're going to work on that background color as well as some other cool things
or so I will see you then.