Hey welcome back everyone.
Johnny be here with sloths dot com.
And in this lesson we are going to continue on our way with our SMAC app and we are going to finally
do that.
Cool.
Generate background color on the avatar image right here.
So let's get to it first thing right here in our variable's we are going to add a new one called B.G.
color.
And so this is going to be an optional UI color.
And so this is just going to be to kind of help us keep track of whether or not we have set a background
color and also hold the the randomly generated color that we're going to create.
So I think we don't it doesn't look like we have.
Yes we do pick background color press start so we already got our action here.
So what do we need to do.
What we are going to do is we are going to create a randomly generated you eye color.
And so what do we call that background color so if I say the background color is equal to you high color
and then we use an initialiser you can see that we have a number of color initialises here.
We're working with this one right here.
The Red Green Blue.
Alpha.
OK.
And so what these.
Well we're going to do is we're going to randomly generate an R G and B value.
And then we're just going to create it.
All right.
So pretty straightforward.
So what we're going to do is we're going to say let our for the red and we're going to create a randomly
generated numbers we're going to see arke for random And let's see here we want this one right here.
And so we're going to put in a upper bound.
And so the these colors are these values for argy bargy and b its value is a number between 1 and 255
and then divided by 255 normalized to that number.
OK so we're going to say 255 and then we need to divide that by 255 but these also need to be a C.G.
float.
OK so I'm going to write C G for low and then I'm just going to wrap that in here.
This C.G. float right here.
All right so we're creating a CGU float.
Randomly generated number between 0 and 255 of the upper bound into five and then we're going to divide
that by 255.
All right.
So and we're just going to do that with R G and B R G and B.
Change this to G.
Change.
Change has to be her.
Sorry B.
And then Alpha is just going to be one we don't really need a variable for that.
So we're going to create that background color from those values.
Now for the background color is equal to UI color.
That's going to be this guy right here.
So the read is are the green is G and the blue is B and the alpha is just one.
I mean and we want it to be not transparent at all.
All right.
So then we can say self that user image that back ground color is equal to the color.
And that should that should actually do it.
Let's go and try that.
I'll run it.
All right.
Opening it up when to log in and create a count.
And I'm going to choose an avatar and say this elephant here and then we're going to say generate background
color.
Hey there we go.
Pretty cool huh.
We got a square here so that doesn't look quite like what we wanted.
Also did you notice that if we select one of these light ones hold on let me just close this and jump
back in.
So if we selected a late one it's kind of hard to tell.
So I'm thinking up here in the view dude up here we're just going to do a check on that.
So we're going to say if the avatar name contains so you can say it contains And so what we're going
to do is we're going to do a search for a string and we're just going to see if it contains the word
light in which case it is one of the light ones.
And then we're also going to do a check to see if background color is equal to nil.
And if so then we're going to set the user image background color equal to a light gray colors and say
color dot light gray.
OK so what we're doing is we're saying if we go here for the first time and we haven't selected a background
color yet and we have chosen a light one we're going to set a light gray background color so that the
white or the light Avatar kind of pops out OK.
So go go and do that and save that and run it one more time by opening up.
You let's go in.
And so I'm going to use a light colored Avatar.
And there we go.
So now we are setting the light that background color to a light.
If we have not yet chosen a background color so now we have created and chosen the background color.
So if I choose another light one it should still stay pink.
Yeah.
There you go.
All right.
So let's let's fix this square.
Let's make that rounded and we could do that here in our view controller.
But remember it's better practice to subclass that into a view.
So we're going to do is very similar to our around a button subclass we are just going to create a circle
image subclass.
So when I click right here on view and see a new file and it's a touch class we are going to subclass
of you I image the you and we're going to call this circle image.
OK.
And I say next thing and create
this.
And just like we did with the rounded rectangle around that button I should say we're going to say at
Iby these Anable so that we can see the results inside of storyboarded and then we don't need any.
I'd be inspectable because we're not going to be changing anything in storyboard what this circle image
subclassed is going to do is just going to just make everything that it is applied to a circle.
OK.
So we're going to stay awake from NIB and in here we are going to put a set up function views from the
same set up view.
And what we're going to do look for up the function phunk real funk set up you and what are we going
to do.
We're just going to make it round.
So to do that we just go say self-taught layer dot corner radius is equal to.
And then we're just going to say self-taught frame with divided by two.
So if you give it a corner radius of half of its width assuming that it's a square then it's going to
be a perfect circle.
OK.
And then we need to say self-taught clips to bounds equal to true.
If you click on clips to bounds you get a better description it has a boolean value that determines
whether sub views are confined to the bounds of the view.
And lastly we need our prepare for interface build their function are going to call super dot prepare
interface builder.
And then we're going to call our setup function also.
And here in Awake from NIB as well set up here as well.
All right so that looks good.
Just to recap when we awake from nib or when we were prepared for Interface Builder we call setup view
in which we simply do a full rounding of the image view based on it's with Kames I want to save that
in.
Let's go ahead and run that again and see how that looks.
Oh wait stop.
We need to apply it to our images.
And so we've got a couple of images that we want to be around.
Here's one in our create account.
Make sure you have the actual image selected though and go do its identity inspector and set this to
circle image and then over here as well in the menu profile image we're going to set this two circle
image also.
All right then we're in a run.
OK.
So let's go ahead and open it up.
Check out don't have an account choose.
Avatar it's the spider here and.
Hmm.
Let's go ahead and generate a background color as we go.
And then if we pick a light one see the octopus here.
That's pretty cool.
I think we can make this when we click on this make this look a little bit nice right now it's just
like boom different color boom different color.
Let's go ahead and add a little bit of an animation there I think.
So we're going to jump back in to create account visi.
And here let's see where it is are.
OK right here pick background color pressed.
All right so here we can see you by the you dot animate with duration.
And we don't actually need this second part right here.
So just with duration I'm going to say zero point two I think seconds will be good.
And then we're going to do our opening closing curly braces and we're just going to drop this guy in
right here.
And I think I need a selfie right here for this background color.
So basically here we're just creating a very simple animation.
We're sitting the duration meaning the length of the animation period and we are just changing the background
color.
See how that looks.
All right.
Opening it up log in don't have an account.
Choose an avatar.
Let's get right here and generate background color and look at that.
Now we got a nice little fade animation between the colors.
That looks really good.
I like that one right there.
All right so what's next if we check out our.
Let's see here.
Do I have my mockups open.
OK.
So we're going to try and finish up the create a count VC in this video.
So one of the things that we need to do is if you see here these placeholder text colors are different.
Right.
So let's go ahead and see if we can fix that.
And surprisingly that's not something that you can fix in Interface Builder.
You have to actually do this programmatically OK.
So let's do it.
I'm going to come down here to the bottom and create a new function called set up view so set up view
OK.
And so what we have to do is we need to actually use attribute ID text to set the font color for this.
And so to do that we're going to create a new constant.
We're going to jump over here to our Constans file and we'll create a new little header here for our
colors and I'm going to say let SMAC purple place holder equal and I'm going to do a color a literal
Kemang color that URL and the recently used.
Make sure you got your purple one here and actually do and see if we can do other.
And then we're going to drop the opacity here to 50 percent
and there we have our new color.
So that's our placeholder color scheme to save that and jump back into create account.
VC So to set the font color of the placeholder what we got to do is we got to say user name text dot
attribute tude placeholder.
And so this is the styled string that is displayed when there is no other text in the text field.
I'm going to set that equal to an end this afternoon and this attribute could string an argument to
initialize that with.
Let's see here.
String and attributes.
OK.
So the string for the user name and that's just hopes user user name and then the attributes.
If we click here on attributes this has the attributes for the new attribute of string.
All right so what do we want to do.
We want to change the color of it.
So I'm going to do open close square brackets and we're going to say and s at true booted string key
and the key that we want is foreground color and K and the value for that is our.
Mac purple placeholder.
So if we save that and run it let's make sure that works OK to log in to here.
And that did not work because once again I forgot to call the function that we just created.
All right backup to view to load and say set up you run that again.
All right.
I'm going to click you click here into the count and there we go.
So now we have our placeholder text color that we actually want.
So let's go ahead and do that for the other two.
And here's an essay.
Copy and paste and paste and this one here is going to be the email text
and the stream user name is going to be just email or string for the placeholder then this guy right
here is going to be pass.
Text and it's placeholder text is password all ready and that should do.
Going to build make sure that error goes away.
All right let's go ahead and run this and make sure those look good.
We're going to open this up and it's actually create a new use of this time and I'm going to choose
an avatar.
And about porcupine I think that is maybe I want to call him Porky.
And email is Porky at porc dot com.
The password is 1 2 3 4 5 6 going to generate a background color and that looks good.
And we're going to create a count K
so you'll notice that after I clicked on this there's no indication to the user that anything is happening.
And especially if you are waiting for the for the for your server to come back alive if you're not if
you're still on the free tier then that could be very troubling to the user that might click it again
and then you might have some issues.
So let's go ahead and throw a an activity indicator in our screen right here so I'm going to jump into
that storyboard and you'll see the one that just popped up.
That's what we're going to do right here in our create an account and a search for activity to build
their own activity indicator.
I'm just going to drop this right here.
Here in the Daily Beast inspector changed the style to large and white and then we're going to change
the color here to our purple.
All right that looks good.
And then I'm going to change and I'm going to give big constraints of horizontally and vertically in
container and that looks kind of right over the face.
Let's move it up a little bit.
So if you go to our Cyzon inspector and come here to your constraints you can actually give offsets
on your constraint so here a line center to why if you say minus 100 it's centered but shifted up the
amount that you put in here.
So I think that will look good and we need to have an outlet for someone to hold option and click on
create account b c
them we got to find it again.
See right here.
All right so outlets.
I'm just going to see that.
Make sure you've got your spinner selected.
I'm going to control drag from over here.
Yes.
Call this spinner.
OK.
So now we have an outlet for it.
Let's jump back into our create account.
These Swift file and we're going to start out with it.
Hit it.
All right.
So down here in our setup you function I'm going to say spinner that is hidden is equal to true.
True.
And just get this quick.
OK so it starts out hidden.
When do we want it to show we want it to show.
Right when we click on the Create a count button when I say spinner that is hidden is equal to false
and then started spinning.
All we got to do is say spinner dot start animating and then it'll it'll show and start animating.
And we want it to disappear if everything is successful.
So I'm going to get rid of this print statement here and we're going to say spinner that his head is
equal to true hand spinner.
Stop animating and that's about as easy as it is to add a progress indicator.
So when I run this again we need self because we are in a closure area I'm going to run that all right.
Jump into here.
Log in VC.
All right here's our create an account VC.
So I'm again choose an avid term like a shark.
Different background color looks good.
This is going to be Sharkboy and his e-mail is that shark at me dot com.
And then the password but there's someone toggled the software keyboard and to do that it's command.
And put in my password and then I know I can't create an account can I this the keyboard is covering
it.
So we're going to fix that here in just one second.
But to make sure that our spinner is working on a click Create account.
And hey there we go there is our spinner and it's going to spin until the creative process is over.
Then it disappears.
All right very nice.
OK.
So let's let's fix that problem where we can't click on the create button when the keyboard is up.
So most of the time what we're used to is just being able to tap off of the keyboard and making the
keyboard disappear.
Right.
So how do we do that.
Well it's pretty easy.
We've got to do it here in view to load.
We're going to add a half gesture recognizer and feckless do that in set up view since we already have
it.
So we're going to do is we're going to say let tap equal and that's going to be a UI tap gesture recognizer
and we're going to set it's target and it's action.
So the target is self and the action is a function that we need to create first.
So right here we're going to say phunk handle tap Haendel tap.
And what we're going to do is we're just going to view it and editing and we're going to say true and
what this does is this just causes the view or one of its embedded text fields to resign the first responders
that has meaning if we have a keyboard open and we tap then it's just going to dismiss that keyboard
for us.
OK.
So then here in the action selector we just need to say hash tag selector and then we're going to say
create a count VCT that handle tap and then we're probably going to get this error because the new with
swift for the syntax for an argument of Selecta refers to an instance method handled have that is not
exposed to objective c at objective c to expose this instance method to Objective-C.
And if you just click on fix then it adds at Objective-C to are handled tap function.
So in switch 3 I think it was implicitly implied that these were exposed to Objective-C handles.
But now once before we're just explicitly saying this isn't a function that's exposed to Objective-C.
All right so we've created our tap gesture recognizer.
Now we need to just assign it to the views and say View dot add gesture recognizer and we are the view
that we are adding is tap.
All right so that looks good.
Save that and run it and let's make sure that's working.
All right clicking here.
Log in.
I don't have an account.
And click on the username toggle the software keyboard if it's not coming up and then I'm going to click
over here and boom disappears.
All right.
Perfect.
Very nice.
All right and that pretty much takes care of everything in our create account of your controller.
The only thing left is what happens when we create an account.
You know right now we send off the call to the API.
But you know nothing we don't know what to do after we create an account.
So what we're going to do is we're going to create a notification using notification center and when
notification center is like I like to compare it to kind of a radio station.
You have notification posts and that's kind of just like blasting out in all directions to all classes
that we haven't created a notification and to be able to receive and know what to do with these notifications.
You need to be tuned in to that specific channel.
All right.
So what we're going to do right now is we're just going to create the post for the notification.
We're just going to create the blasting out for the information that says hey we have created an account.
We have changed we have changed some stuff up.
All right.
And we're going to create a reusable notification that's going to be useful called user data did change.
And so what that means is either We've created an account we've logged in or even that we've logged
out.
Those are the kind of the scenarios that's going to be covered under the use of this notification.
So let's create the notification names so jump into Constans.
I'm just going to do it here under colors I'm going to say no to thickish.
Constance and we're going to say let no tiff underscore user data did change.
OK.
And this is going to be a notification that name and that is going to be called notify if user data
changed.
OK so this is just creating the name of the notification and then we're going to jump back into create
a count b c and after the create a count button is pressed and everything is successful.
We are going to post this notification.
Basically just sending out the notification saying hey world we have successfully logged in or logged
out or created a user do with that information what you will.
All right so we're going to see a notification centered not default not post.
All right.
And so what we need right here is this right here the notification name is the concern that we just
created.
So no to use the data to change and we're not sending any object with the notifications so this can
be new accident going to say that and we won't be.
Right now we can't tell that this works because we don't have any other classes that are tuned into
this particular notification.
But that right there completes our create a count visi.
So now in the next videos what we can actually do with this notification is we'll know when the user
has been created and when it gets dismissed we can't have that notification here in our channel Visi
and then we can do things like update the profile image we can update the logon button to instead of
saying log in showed the actual user's name.
All right so that's the reason for this notification.
And yes we're making great progress guys.
Hope you are really having fun.
I really like the A C.
Do we still have here.
This is one of my favorite things is the avatar picture and the generating the background color I just
think is super cool.
So because guys are having fun.
I know that I am.
And to just to finish off real quick going to commit and add our changes and then we will see you in
the next one.