Stuff ladies and gentlemen welcome back Johnny be here with Devis Lois dot com.
And then this lesson we are going to take a break from the API for just a little bit and work on our
UI a little bit more.
All right.
So right now we can open up and go into loggin go to her don't have an account but if you click on this
doesn't do anything we want to be able to pick our avatar image or so we want and end up with is when
we're here and we click on our Choose Avatar we want to jump over into this view where we have a collection
view of a whole bunch of different cute little avatar images.
And speaking of this is the I got these assets off of the Noun Project and so to give attribution where
attribution is do these are the artists that created these awesome assets.
OK.
So you can find each of these at the back from these authors here at the Noun Project dot com.
OK.
All right so what do we what do we need to do.
We need to create a view controller with a segmented control that will toggle between kind of the dark
and light themed avatars.
We've got a backbone and that's pretty much it shouldn't be.
Shouldn't be too hard.
But let's let's get cracking and we're going to see if we can get through all of this in just this one
video OK.
So without me Jever on any further let's get going.
All right so first off let's jump in to storyboard.
We're going to need a new controller.
So I'm going to zoom out a little bit here.
Scroll over and drop in a new View Controller Ken.
Let's go ahead and add our segue right away.
So when a control jet can create a counter Visi to our new avatar picture visi.
And I'm going to look the Segway and come over to our Actually inspector and give it an identifier right
to call this to create the account.
And just like we've been doing with our other segues my copyright and jump into our Constans file and
I'm going to add a segue.
Constance I want to say let two Avatar pick her equal to and then when I paste in what I copied in there
that I say to create count that's not what I wanted.
Back to storyboard not to create a count.
We called it too.
I meant to Avatar picture.
I've been working on that create account Visi for too long.
All right.
Avatar Pickert going to copy that.
Jump over to Constance.
There we go.
We are.
All right.
Got to say that.
And let's jump back over to our story board and actually let's open up our assistant editor with our
create a count VC selected in the summer I do mean that one because we're going to add the the action
forward.
If we don't already have it see if we have it and create a count b c m c here.
Hey we do already have it.
I remember adding that now.
OK.
So creative count visi.
Well we're going to do here.
Pick Avatar press.
OK good.
So we were going to say perform Segway and it looks like my autocomplete is on the fritz.
I'm going to clean it holding Shift command OK.
I succeeded.
And as they perform there we go perform Segway with identifier and this identifier is to have a tar
picker.
Sender is new.
OK.
So when I say that and all right.
Now let's jump back into storyboard.
So now when we click on that button we are going to get sent on over to this empty view controller and
let's go ahead and start adding some stuff that we need.
We're going to button in the top left that is going to take us back to this view right here.
And so we're going to go ahead and get rid of its title and change its image to this one is going to
be called smack back right there.
That puts you right there and constrain you.
It's going to be eight from the top with margins checked and with the height had four constraints.
They're going to need a cig mounted control right here.
And the first thing I'm going to do is get rid of that awful Bluett and I really can't stand it.
OK right here tent.
Let's give it our nice blue color.
There we go.
All right and then we're going to change its titles right here.
Segment zero.
First the title is dark is going to be our default then change it to segment 1 and change that to the
light.
And that looks great.
All right going to constrain this and we're going to go eight from the top with margin's checked and
our with we're going to get to one hundred and sixty and we are going to send two of that horizontally
in container.
Wonderful.
All right.
Now let's go ahead and add in a collection view.
And so here in our library just search for collection view and just drop that in and go ahead and let's
give this some constraints of 20 from the top zero from the left zero from the right and zero from the
bottom.
Add those four constraints.
See here then here to see where is that.
Here in the site's inspector you said the cell size to 100 and 100 just for starters.
And then let's go ahead and add an image view to our prototype cell right here.
Of course it's huge.
So we're going to resize it just a little bit and then we'll go ahead and give it its constraints.
So this is going to be without constrained to margins checked so unchecked what 10 10 10 and 10.
All right.
Wonderful.
And that is pretty much all of the UI that we are going to require here in this.
You control it.
A couple of things we're going to do on the collection of you though make sure you've got your collection
view selected.
We are going to give it some section instead.
So that's just some padding on the left and right.
We're going to give it padding of 20 on the left and right right there.
All right.
Wonderful.
I'm going to save that.
And you know let's go ahead and create our view controller file that it's going to be hooked up to this
view right here.
So over here in controller and right click and say new file is going to be Cocco touch class subclass
you view controller.
And call this avatar picture visi.
Right.
And press next and create We're going to clean up this stuff that we don't use this account or comment.
And then I'm going to hold the option and click on Main storyboards so that we can add our Iby outlets.
It's school over Hugh Grant closes right Pennel give us a little bit more room and where you're going
to need an action for this back button.
Forgot to set the class for for this view controllers.
We do need this right panel back over to our identity inspector for the class select avatar picture
VC.
OK good.
Now I can control drag over here and I can say back pressed.
And this is going to be an action and a touch up inside is good.
And while we're just here I'm going to write right off the bat I say not perform it.
This is going to be dismiss.
Animated is true and the completion is new.
All right so that takes care of the back button.
Now we're going to need a an outlet for the collection view.
So here we are right out.
Let's get a control drag from the collection view over to our bigger b c and this is going to be an.
I'm just going to call this collection view.
I'm going to say connect and then I'm going to grab the segmented control and get an outlet here.
And this is there is going to call this segment control and that's an outlet.
And when you connect.
OK.
Now remember when we clicked on this we want to go back and forth between the dark and the light Avatar
images.
So we're also going to need an IP action for the segment to control.
So again control dragging.
We're going to make an action and the event.
There's a few here but the event that we want is the value changed.
So whenever we click on a different one then than what is selected in the segment to control this function
is going to be called a value changed.
All right and we're going to name this segment control changed.
All right.
Looks good.
All right jump back closing our assistant editor now we're just here in our avatar picture visi.
What do we need next quiz.
We need to be able to work with collection views so we need to implement our protocols.
That's right.
So it's going to take us a collection view delegate UI collection view a data source and a little tip
you don't actually need to type out the entire thing and doesn't need to be in the order.
Watch this.
I'm going to write you a collection then I'm going to write flow.
And there we go you clicking view delegate flow layout instead of having to type out that whole thing
you're able to just get that pop right up.
All right there we go.
So we have added our protocols now we need to set our delegate and data source.
So when I say collection the dot delegate is equal to self.
So if we click on delegate this is just saying the description says the object that acts as the delegate
of the collection view and the delegate is this you control.
That's why we're setting it to self then we're going to say collection the data source is also self
that's going to see this and build it.
And we should get some errors because now that we have implemented our protocols we need to conform
to them.
So let's go ahead and do that.
We need.
So for item at sulfur item and you that's the one we want and just for now we're going to see a return
AUI collection.
So looks good.
Next step we need to know how many sections we house are and say number of sections in a only have one
section so we're going to return one and then we're you need to know how many items are in the sections
or in a number of items in section and if we pop over to our assets we see that we have numbered 0 through
27.
So we have in total 28 so return 28 items.
All right let's go ahead and build that and see how that looks.
All right so the build was successful but we've probably even run this.
And if I come over here come over here and have an account click on it.
We got a crash and see what happened.
So for item does not have a reuse identifier cells must be retrieved by calling.
OK.
So you get to do a couple of things here in our self or item at thingamajigs So what we're going to
do is we need to create a custom class for our cell.
So let's go ahead and do that right now.
So it's a view and I'm going to see a new file and it is going to be a cook touch class and it's going
to be of subclass UI collection that you sell.
And this can be called Avatar.
So right to say next I see now we have our custom class for the avatar so let's go ahead and open up
our main story board and the assistant editor and we're going to set our prototype so here equal to
this new avatar cell class with the collection view I have been selected here we're going to go to its
class and say Avatar.
So.
So now with that done we can select our image in here and we can drag over and create an outlet here
in our avatar cell class.
And here we can see Avatar image can connect that.
And that's pretty much all of the connections that we need.
It's a pretty simple cell.
So we're going to come back here.
And let's go ahead and actually set up our our view and our functions are going to be creating as well.
So first I'm going to stay awake from NIB so to the placeholder if you click on Awake from nib it says
it prepares the receiver for a service that service after it has been loaded from an Interface Builder
archive or nib file.
Right so this is the first thing that's called when it wakes up from being a NIB.
All right.
And so we are going to say he also says let's see here I just wanted to show you this other thing says
you must call the super implementation awake from nib to the parent class the opportunity to perform
any additional initialization they require.
All right so we're going to say super dot awake from NIB.
There you go.
Right and then we're going to create a function here call the set up view.
OK.
And we look at our design mockups it looks like our cells have a background gray and rounded corners
OK.
So let's go ahead and add that here.
So we're in a soft layer that back ground color is equal to eye color dot light gray Siggi color.
And I'm going to say that
there that corner radius equal to 10.
And then when you say self that clips to Bounds is equal to true.
And that would just make sure that the view doesn't spill outside of the corner radius corners there.
OK.
So go ahead and say this and let's jump in to our main story board and we need to add a reuse identifier
that was one of the reasons for the crash.
So our avatars so see here here in the recent specter under identifier we need to say give this reuse
identifies or when to see Avatar.
So that's our reuse identifiers want to copy that and jump over to our avatar picker visi.
And here in our cell for item at function I'm going to say if let cell is equal to collection
the U dot D Q reusable cell with reuse identifier and our reuse identifier is what's needed I copy that.
Yeah Avatar's cell 4.
And that's just index path curly brace.
So if we are able to get a sale deed qued and the reuse identifier for it is Avatar's sell then we are
going to let's just return that step and we need to cast this though we need to say as Avatar so else
we're just going to return an empty habitat or come on out to compete.
So there you go.
So it's going save that and run it and see how that looks.
Well we should see is just a whole bunch of rounded gray squares.
And click here can log in don't have an account.
Click here.
And you know what I think I forgot to do.
Silly me.
Here in the amateur cell indeed we did not say did not put the function we call the function that we
created.
Try that one more time run.
I'm going log in I don't have an account choose after.
All right.
There we go.
Yeah right.
So we're making progress.
You know how far how long we've been going over 20 minutes.
Let's go ahead and stop this.
This is a pretty good stopping point.
We got our collection views set up.
And the next one is the rule.
Just go ahead and finish up the rest of the logic to show the specific and the correct Avatar images
here will get to two.
Or you can click on them and set that as the user's avatar image and maybe even will start working on
the background color.
All right so making some good progress here.
I hope you guys are having fun.
I'm going to before we finish up I'm going to go ahead and commit and see if our changes here.
So when you say get status to get and Dr. get to commit Desch am.
This is lesson 13.
And with that I will see you guys all in the next one.