So ladies and gentlemen welcome back Johnny be here with devah slopes 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.
So we want to 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 jabbering 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.
Let's go ahead and add our segue right away.
So when a controlled jet can create a counter Visi to our new avatar picture visi.
And I'm going to look at the Segway and come over to our Actually inspector and give it an identifier
right to call this to create account.
And just like we've been doing with our other segues my computer 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 picker going to copy that.
Jump over to Constance.
There we go.
Was weird.
All right.
I'm going 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 Visi 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.
Let's see if we have it and create a count b c
c here.
Hey we do already have it.
I remember adding that now.
OK.
So creative.
VC what we're going to do here.
Pick Avatar pressed.
OK good.
So we were going to say perform Segway and it looks like my auto complete is on the fritz.
I'm going to clean it holding Shift command OK.
I clean succeeded and I say 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.
So right there puts you right there and constrain you.
It's going to be eight from the top with margins checked and with an height had four constraints.
They're going to need a cig mounted control right here.
And the first thing I want to do is get rid of that awful blue tint.
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.
It's going to be our default then change it to segment one and change that to 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.
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.
See where is that.
Here in the Cyzon Specter said the cell size to 100 and 100 just for starters.
And then let's go ahead and add an image vu 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 view control it a couple
of things we're going to do on the collection of you though make sure you've got your collection be
selected.
We are going to give it some section instead so that's just some padding on the left and the 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 what let's go ahead and create our view controller file that it's going to be hooked up
to this view right here over here and 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 and press next and create
and we're going to clean up this stuff that we don't use this account or comment.
And then we get a hold option and click on Main storyboard so that we can add our Iby outlet's it's
school over it 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 so we do need this right panel.
Back over to our identity inspector for the class select avatar picture visi.
OK good.
Now I can control drag over here and I can say back pressed.
And this is going to be an action and touch up inside is good.
And we're just here I'm going to write right off the bat my Sapre 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 an outlet for the collection of you.
So here we are right out.
Let's I'm going to control drag from the collection view over to our avatar bigger VC and this is going
to be an outlet.
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.
We need to connect.
OK.
Now remember when we could go 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 segmented 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 in back closing or assistant editor now we're just here in our topic.
VC 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 is going to take a collection view delegate UI collection view a data source and a little tip
you don't actually need to take out the entire thing and doesn't even need to be in the order that someone
write you like collection them are going to write flow and there we go you collection view delegate
flow lay out instead of having to type out that whole thing you're able to just get the pop right up
and 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 she gets 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 add sulphur item and that's the one we want and just for now we're going to see a return
a UI collection.
So it's good.
Next step we need to know how many sections we have Serenus a number of sections and only have one section
so we're going to return one and then we're going 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 go ahead and build that and see how that looks.
All right so the build was successful but we could probably even run this and if I come over here over
here and have an account click on it.
Oh 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.
Let's go ahead and do that right now.
So it's a view and I'm going to see a new file and this 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 I'm going to say next I said 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 so class with the collection view item 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 a tire 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 say awake from NIB so delete that placeholder if you click on a weight from NIB.
It says it prepares the receiver for a service for service after it has been loaded from an Interface
Builder or archive or NIB file.
I 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 it also says let's see here.
Just wanted to show you this other thing says you must call the super implementation awake from nib
to your 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 are and then we're going to create a function here.
Call this set up.
Can 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.
We're going to see soft layer dubbed back ground color is equal to eye color dot light gray C-g color.
And Marina itself that
there corner radius equal to 10.
And then when you say self that clips two bounds is equal to true.
And I 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 cell.
See here here in the recent specter under identifier we need to say give this reuse identifier.
So I want to see Avatar.
So that's how reuse identifiers.
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 that cell is equal to collection
the U dot D Q reusable cell with reuse identifier and our reuse identifier is that I copy that.
Yeah Avatar 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 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 because 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 to keep your log in.
I don't have an account.
She was 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 2.
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 you want to
say get status to get and Dr. get to commit Dasch am and this is less lesson 13
and with that I will see you guys all in the next one.