Hey buddy what's going on this is Caleb with Deb's slopes.
And in this video we're going to continue learning about protocols and we're going to build a little
app that's going to allow us to use mutating functions within protocols and we're going to use it to
modify some values is going to be really cool.
It's just another thing we can do with protocols so let's get started.
Go ahead and pull open X code and you should get this little view here click on Create new X code project
and we're going to go ahead and just create a single view app and we're going to name this luck on.
OK it's going to be like having an app having to do with light.
So go ahead and click next.
And we're going to save this in protocols and delegates like so.
Boom there we go.
So go ahead and pull this open in full screen.
If whoops if it'll let me.
There we go.
And we're going to start by building the UI really quickly.
It's a super simple interface.
Just click on the background view set the background to be dark grey.
We're going to drag on a label and then we're going to drag in some assets to work for some or to use
as a button graphics.
So go ahead and type UI label and go ahead and drag this on to the screen and center it like so we're
going to change the font to custom the family to Avenir next.
And we're going to set the style to be heavy.
OK.
And we're going to bump this all the way up to like size 100.
It's going to be really big.
And of course with that in mind we need to resize this whole thing like so can stretch it so that it's
a little wider.
There we go.
And now what we're going to do is we're going to write the word off.
OK.
And you know it just for fun let's put in some emojis here let's put in the the moon.
But we're going to make it dark so that it is like a not a full moon but whatever dark moon is and we're
actually going to need to reduce this I guess to size 80.
Perhaps that might help.
Maybe 70.
OK.
Looks like 70s.
Good.
And we're going to go ahead and center that again and change the font color to be white just like so
now we're going to go ahead and pin this to pin this but align this horizontally and vertically like
so by selecting the item and then pinning it horizontally and vertically in the container.
And now we're going to go ahead and add a button like so and we're going to just drop it right there.
Now at this point we actually do need to use some assets.
So we're going to go ahead and pull in some graphics and we're going to use these to set the values
for our off and on button.
So click on assets Doxey assets and then you can actually drag in these assets if you don't have these
you can download them by tapping on the little download source code button.
And the assets will be downloaded.
You can airdrop them to your Mac if you're on your iPhone or if you're on your Mac.
They just download your Downloads folder.
So now we have an on button and off button which is really cool.
So what we're going to do is we're going to go back to the story board and we're going to set this button
to not have a text value.
So delete that but we are going to set it to be off button because that's the white one with the shadow.
Now we're going to need to resize this so go ahead and give it a height and width constraint of 50 and
50 like so.
But of course it's not going to do anything until we pin it horizontally in the container and then we're
going to go ahead and we're going to pin it.
Whoops.
We're going to pin it 100 from the bottom like so and then it makes a nice square perfectly circular
button which is cool.
So that's too small for my liking so I'm actually going to change this to be 100 by 100.
OK that looks pretty good.
And now all we need to do is to connect the button and the label to our view controller.
So go ahead and open the assistant editor and we're going to go ahead and make some room here and I'm
going to connect these to this new controller.
Get rid of the boilerplate stuff.
You don't need it.
And yeah let's go ahead and do this.
So from the label right click and drag and we're going to call this on off label like so and we're going
to right click and drag from the button and put it below.
You did load change the connection to action and we're going to call this toggle button was pressed.
And basically what this is going to do when we tap this button we're going to set the view to be white.
We're going to change the font color to be black and change these and Moji used to actually be the full
moon.
It's basically sort of like a flashlight app but we're going to use a protocol and a mutating function
to change its value.
It's really really cool actually.
So now that the interface is finished we are going to oh you know what.
No no no.
Sorry if we're going to change what the button looks like.
We need an outlet for the button as well.
So right click and drag and create an outlet called toggle button.
Perfect.
OK so now that our interfaces done we're actually going to go ahead and reopen these editors on the
side.
We're going to close the assistant editor and go into our view controller.
So we're going to basically think what we need to do here.
When I toggle that button we're going to need to change the background to white.
We're going to need to change the font color to dark gray or we're going to need to replace those emojis
with full moons instead of the Dark Moon and then change the button image as well.
So there's a lot of things we've got to do but I think a great way to manage this would be to use an
enumeration case so we're going to right click and create a new group we're going to call it in DMs
while we're at it we might as well create a new group for our protocols or just create a protocol's
group as well and then rearrange those whoops we don't want it to be in the folder we want it to be
outside the folder.
That's fine.
OK.
So anyway go ahead and right click on the folder click new file and we're going to create an enumeration.
So I clicked on swift file and this enumeration is basically going to help us to monitor the on status
or the off status of the button.
So I'm going to call it switch status.
Press enter and what we're going to do is we're going to create an enumeration with two different cases.
OK one for on and one for off.
So do that now by typing Inam switch status case on.
And then we're going to type case on.
And we actually don't need to do two separate lines.
We can just type Khama off and that creates two separate cases for us which is really neat.
But what I said was that we would be using mutating functions and we're going to actually create our
protocol now so that I can explain that to you.
So go ahead and right click on the protocols group click new file and click swift file.
We're going to name this toggle obal and this is another convention another naming convention for protocols.
If this protocol kind of only handles one type of behavior like toggling something you can just name
the protocol toggle a bowl and then when we conform to this we are basically making something toggle
able able to be toggled on or off.
So go ahead and click Create.
And we're going to name our protocol here like so protocol toggle label and we're going to write one
function func toggle.
OK.
Now of course there's no implementation code here.
When we call toggle somewhere else we're going to basically say hey whatever class or structure or enumeration
we conform to targetable and we'll be able to call toggle and set up the implementation that way.
Now I did say though that we're using a mutating function so we need to call that here mutating and
a mutating function whatever variable we call toggle on we're actually going to change the value of
that variable.
And that's where our enumeration comes into play.
So with our protocol toggle able here go back to switch status and what we're going to do is we're going
to conform to our protocol in this enumeration.
So go ahead and do that by typing a colon.
And we're going to make switch status toggle obol.
We're going to give it the capability to be toggled.
But of course it's going to yell at us saying that we don't yet conform to this protocol.
How do we conform to it by by implementing the mutating function toggle.
So let's go ahead and do that beneath our cases here by typing Tuggle.
And you'll notice that the function toggle comes in here.
But remember we want it to be mutating so we need to declare mutating.
Now what we're going to do is we're basically going to write a statement saying if the current case
is on it's going to be flipped to off when we call toggle if it's off we're going to flip it to on.
So to do this we're going to actually use a switch statement and since this is an enumeration of type
switch status when we use self that's going to refer to whatever instance of switch status we use.
So we can type switch self and if you have not yet use switch statements they're basically like if.
Else or if else if statements that allow us to switch through a bunch of different cases and since our
switched status only has two values we could technically use an if else statement.
But I find that a switch statement can be a little more descriptive.
So let's say that we have two separate cases for a switch which we do.
Case one is on K and in a switch statement you need to put a colon at the end.
Then we're going to do something.
Ok but what if we are off.
So case off the colon and we're going to do something else.
OK.
That's how a switch statement works.
If the value comes in as on we're going to do something otherwise if the value comes in as off we'll
do that thing.
Now like I said this is a mutating function called toggle.
So if the value of this switch status comes in as on what we're going to do is we're going to set self
meaning the switch status.
We're going to set self to be equal to off this mutating function is actually going to be able to set
the value of whatever instance of switch status we have.
The same thing goes for k start off we're going to set self to be equal to dot on this mutating function
allows us to change the value of any instance of switch status which is really really cool.
So we conformed to a protocol within our enumeration.
And now watch what we can do.
We can go into our view controller like so and what we can do is we can create an instance of switch
status and set it with a default value.
So in our interface builder let's think what status is this currently off.
So if I want to set it to be off by default I can go like this var switch status of type switch status
and we're going to set it to be equal to off.
OK.
So we're setting a default value when switch status is created.
It is set to be off by default.
That is going to be really helpful for.
Because what we're going to do is we are basically going to toggle it can remember switch status.
If I go look at the definition of switch status if I call switch status toggle it's basically going
to take that off value and it's going to flip it to be on if it's on it will flip it to be off.
So when the toggle button is pressed we're going to go ahead and call switch status dot toggle.
Pretty easy right.
And that's going to toggle the value.
So it starts out as off and we toggle it when we press the button.
That makes sense right just like a light switch or a push button.
So now we're going to go ahead and use an IF statement to check if it's off and we're going to do something
and if it's not off meaning on we're going to do something else.
So if switch status is equal to off we're going to go ahead and we're going to set the image to be our
off button which if you look at the assets here are off button is the white one like so and the on button
is the black one.
So we're going to go ahead and type if switch statuses off.
We're going to set toggle button set image and we're going to call you I image named and we can type
off button.
OK.
Now when you use your image this way you need to force unwrap it but that's going to set the image to
be the off image if it is off.
That's what we want now to get this to work.
You need to set the control state to be normal.
And that way we can actually change the image.
Pretty cool then what we need to do is we need to think the background color in our interface builder
is gray when it's off.
So what I'm going to say is I'm going to go ahead and do view the background color and I'm going to
use a color literal.
And these are the coolest things you can actually click on it and you can set whatever color you want.
There is my dark gray background color so I'm going to set the background to be that color literal.
Next up we're going to need to set the status label to say off and have the two dark moons.
So go ahead and say on off label text equals and we're going to pass in those two dark moons which I
can access here I'm going to copy and paste it.
And I'm going to say off.
Just like that.
That's how we did it in the interface builder.
So that is set.
And now I need to change the text color to be white.
So on off label dot text color and I can use a color literal again.
Of course I want it to be white.
So that's great.
If the switch is off it's going to set the off image for the Betton.
It's going to set the background color the text and the text color elves.
OK we need to set the toggle button that said image and we're going to use you image named wups named
and we need to set the on button.
Like so force and wrap it and then we're going to set the control state to be normal.
That way we can set the image of the button.
Next we're going to set the view on background color to be a color literal and if it is on we want the
background to be white but that makes our text invisible.
So let's go ahead and let's change the text color and let's change what the text says.
Let's start with the text on off label that text equals and we're going to say
on.
OK.
And just for fun I'm going to put in my nice glowing moon here.
Pretty cool.
And there we go.
So that's on.
But the font color is still white.
So the words would be disappearing.
So let's go ahead and set on off label text color and we're going to set to be a color literal and we're
going to choose the dark gray color like the background.
Very very cool.
This is actually all we need to do.
Thanks to our protocol and things to our mutating function.
We can set our switch status to have an inherent value off and then we can toggle it every time we press
the button it's going to actually change the value of our variable.
That's the really cool thing with mutating functions.
So let's go build this to a simulator and let's see how we did.
We're going to build it and let's just test it out really quickly.
We should be able to toggle the values to flip this on and flip this off.
If you really wanted to dive into this you could wire up the flash on the camera to turn on and off
whenever you toggle the button.
That's something you could do.
Not saying you will but you definitely could.
So let's let's check out our sim here and see how we did.
Read it appears to be loading taking its sweet time.
OK so here we are it says off.
We have the dark moons the light button when I click it watch what happens.
It toggles on the background becomes white.
The moons change the words change and the spring board quit.
Think Spring board.
Good old Escobedo bugs.
And the button changes as well let's toggle it off.
So cool.
So I'm mutating function is able to change the values as we want.
Super super cool guys.
This has been a little intro to protocols and delegates I hope that you now feel confident using them
or at least thinking of ways that you could use them in your apps whether you're setting up a specific
type of functionality whether you are passing data using the delegate method or even using mutating
functions to modify values.
There's lots of ways protocol's can benefit us so I hope you've enjoyed this little intro to protocols
and we're going to head over to the next video now.