1

00:00:08,110 --> 00:00:10,570

Hey buddy what's going on this is Caleb with Debb slopes.



2

00:00:10,570 --> 00:00:15,040

And in this video we're going to continue learning about protocols and we're going to build a little



3

00:00:15,040 --> 00:00:20,220

app that's going to allow us to use mutating functions within protocols.



4

00:00:20,380 --> 00:00:24,270

And we're going to use it to modify some values it's going to be really cool.



5

00:00:24,280 --> 00:00:28,580

It's just another thing we can do with protocols so let's get started.



6

00:00:28,690 --> 00:00:36,070

Go ahead and pull open X code and you should get this little view here click on Create new X code project



7

00:00:36,340 --> 00:00:41,660

and we're going to go ahead and just create a single view app and we're going to name this zone.



8

00:00:41,820 --> 00:00:45,340

OK it's going to be like having an app having to do with light.



9

00:00:45,370 --> 00:00:47,500

So go ahead and click next.



10

00:00:47,500 --> 00:00:55,900

And we're going to save this in protocols and delegates like so boom there we go.



11

00:00:56,500 --> 00:00:58,800

So go out and pull this open in full screen.



12

00:00:58,800 --> 00:01:00,600

If whip's if it'll let me.



13

00:01:00,610 --> 00:01:01,670

There we go.



14

00:01:02,020 --> 00:01:04,720

And we're going to start by building the UI really quickly.



15

00:01:04,720 --> 00:01:06,520

It's a super simple interface.



16

00:01:06,550 --> 00:01:11,270

Just click on the background view set the background to be dark grey.



17

00:01:11,530 --> 00:01:18,700

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



18

00:01:18,700 --> 00:01:20,370

as a button graphics.



19

00:01:20,380 --> 00:01:27,030

So go ahead and type UI label and go ahead and drag this onto the screen and center it like.



20

00:01:27,030 --> 00:01:33,640

So we're going to change the font to custom the family to Avenir next.



21

00:01:33,850 --> 00:01:37,350

And we're going to set the style to be heavy.



22

00:01:37,630 --> 00:01:38,260

OK.



23

00:01:38,350 --> 00:01:41,230

And we're going to bump this all the way up to like size 100.



24

00:01:41,290 --> 00:01:42,960

It's going to be really big.



25

00:01:43,120 --> 00:01:50,620

And of course with that in mind we need to resize this whole thing like so can stretches so that it's



26

00:01:50,620 --> 00:01:52,680

a little wider.



27

00:01:52,700 --> 00:01:53,630

There we go.



28

00:01:54,020 --> 00:01:57,590

And now what we're going to do is we're going to write the word off.



29

00:01:57,920 --> 00:01:58,170

OK.



30

00:01:58,190 --> 00:02:03,710

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



31

00:02:03,710 --> 00:02:11,120

to make it dark so that it is like a not a full moon but whatever dark moon is and we're actually going



32

00:02:11,120 --> 00:02:13,430

to need to reduce this I guess to size 80.



33

00:02:13,430 --> 00:02:15,700

Perhaps that might help.



34

00:02:15,710 --> 00:02:17,060

Maybe 70.



35

00:02:17,350 --> 00:02:17,820

OK.



36

00:02:18,020 --> 00:02:18,790

Looks like 70s.



37

00:02:18,800 --> 00:02:19,660

Good.



38

00:02:20,030 --> 00:02:26,750

And we're going to go ahead and center that again and change the font color to be white just like so



39

00:02:27,620 --> 00:02:31,550

now we're going to go ahead and pin this to pin this.



40

00:02:31,590 --> 00:02:39,460

But align this horizontally and vertically like so by selecting the item and then pinning it horizontally



41

00:02:39,460 --> 00:02:41,500

and vertically in the container.



42

00:02:41,890 --> 00:02:49,420

And now we're going to go ahead and add a button like so and we're going to just drop it right there.



43

00:02:49,420 --> 00:02:54,070

Now at this point we actually do need to use some assets.



44

00:02:54,070 --> 00:03:00,820

So we're going to go ahead and pull in some graphics and we're going to use these to set the values



45

00:03:00,820 --> 00:03:02,950

for our off and on button.



46

00:03:02,950 --> 00:03:09,190

So click on assets X-Sea assets and then you can actually drag in these assets if you don't have these



47

00:03:09,190 --> 00:03:12,720

you can download them by tapping on the little download source code button.



48

00:03:12,730 --> 00:03:14,860

And the assets will be downloaded.



49

00:03:14,860 --> 00:03:18,870

You can airdrop them to your Mac if you're on your iPhone or if you're on your Mac.



50

00:03:18,880 --> 00:03:20,980

They just download your Downloads folder.



51

00:03:20,980 --> 00:03:25,580

So now we have an on button and off button which is really cool.



52

00:03:25,600 --> 00:03:30,550

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



53

00:03:31,300 --> 00:03:33,700

to not have a text value.



54

00:03:34,030 --> 00:03:41,090

So delete that but we are going to set it to be off button because that's the white one with the shadow.



55

00:03:41,140 --> 00:03:47,320

Now we're going to need to resize this so go ahead and give it a height and with constraint of 50 and



56

00:03:47,320 --> 00:03:49,440

50 like so.



57

00:03:49,630 --> 00:03:55,030

But of course it's not going to do anything until we pin it horizontally in the container and then we're



58

00:03:55,030 --> 00:03:56,840

going to go ahead and we're going to pin it.



59

00:03:57,070 --> 00:03:57,720

Whoops.



60

00:03:58,060 --> 00:04:05,720

We're going to pin it 100 from the bottom like so and then it makes it nice square perfectly circular



61

00:04:05,720 --> 00:04:07,240

button which is cool.



62

00:04:07,370 --> 00:04:14,490

So that's too small for my liking so I'm actually going to change this to be 100 by 100.



63

00:04:15,110 --> 00:04:16,390

OK that looks pretty good.



64

00:04:16,790 --> 00:04:20,780

And now all we need to do is to connect the button and the label to our view controller.



65

00:04:20,780 --> 00:04:26,630

So go ahead and open the assistant editor and we're going to go ahead and make some room here and I'm



66

00:04:26,630 --> 00:04:28,900

going to connect these to this new controller.



67

00:04:29,210 --> 00:04:30,960

Get rid of the boiler plate stuff.



68

00:04:30,960 --> 00:04:31,990

You don't need it.



69

00:04:32,040 --> 00:04:34,610

And yeah let's go and do this.



70

00:04:34,610 --> 00:04:44,510

So from the label right click and drag and we're going to call this on off label like so and we're going



71

00:04:44,510 --> 00:04:48,380

to right click and drag from the button and put it bloviated load.



72

00:04:48,500 --> 00:04:57,260

Change the connection to action and we're going to call this toggle button was pressed.



73

00:04:57,260 --> 00:05:02,300

And basically what this is going to do when we tap this button we're going to set the view to be white.



74

00:05:02,300 --> 00:05:07,440

We're going to change the font color to be black and change these emojis to actually be the full moon.



75

00:05:07,730 --> 00:05:12,530

It's basically sort of like a flashlight app but we're going to use a protocol and a mutating function



76

00:05:12,530 --> 00:05:13,650

to change this value.



77

00:05:13,660 --> 00:05:15,660

It's really really cool actually.



78

00:05:15,680 --> 00:05:20,000

So now that the interface is finished we are going to oh you know what.



79

00:05:20,010 --> 00:05:20,390

No no no.



80

00:05:20,390 --> 00:05:22,720

Sorry if we're going to change what the button looks like.



81

00:05:22,720 --> 00:05:24,610

We need an outlet for the button as well.



82

00:05:24,620 --> 00:05:29,280

So right click and drag and create an outlet called toggle button.



83

00:05:29,300 --> 00:05:30,320

Perfect.



84

00:05:30,590 --> 00:05:35,420

OK so now that our interface is done we're actually going to go ahead and reopen these editors on the



85

00:05:35,420 --> 00:05:36,260

side.



86

00:05:36,260 --> 00:05:40,950

We're going to close the assistant editor and go into our view controller.



87

00:05:41,120 --> 00:05:45,180

So we're going to basically think what we need to do here.



88

00:05:45,200 --> 00:05:51,410

When I toggle that button we're going to need to change the background to white.



89

00:05:51,410 --> 00:05:55,770

We're going to need to change the font color to dark gray we're going to need to replace those images



90

00:05:55,790 --> 00:06:00,170

with full moons instead of the Dark Moon and then change the button image as well.



91

00:06:00,170 --> 00:06:05,030

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



92

00:06:05,030 --> 00:06:06,020

enumeration.



93

00:06:06,050 --> 00:06:11,660

OK so we're going to right click and create a new group we're going to call it in terms while we're



94

00:06:11,660 --> 00:06:16,490

at it we might as well create a new group for our protocols or just create a protocol's group as well



95

00:06:17,240 --> 00:06:24,800

and then rearrange those whoops we don't want it to be in the folder we want it to be outside the folder.



96

00:06:25,100 --> 00:06:25,940

That's fine.



97

00:06:26,240 --> 00:06:26,510

OK.



98

00:06:26,510 --> 00:06:33,380

So anyway go ahead and right click on the folder click new file and we're going to create an enumeration.



99

00:06:33,590 --> 00:06:40,490

So I clicked on swift file and this enumeration is basically going to help us to monitor the on status



100

00:06:40,490 --> 00:06:42,400

or the off status of the button.



101

00:06:42,410 --> 00:06:45,950

So I'm going to call it switch status.



102

00:06:46,370 --> 00:06:52,140

Press enter and what we're going to do is we're going to create an enumeration with two different cases.



103

00:06:52,170 --> 00:06:54,410

OK one for on and one for off.



104

00:06:54,410 --> 00:07:04,010

So do that now by typing Inam switch status case on.



105

00:07:04,420 --> 00:07:06,670

And then we're going to type case on.



106

00:07:06,880 --> 00:07:08,860

And we actually don't need to do two separate lines.



107

00:07:08,860 --> 00:07:15,600

We can just type Khama off and that creates two separate cases for us which is really neat.



108

00:07:16,000 --> 00:07:21,940

But what I said was that we would be using mutating functions and we're going to actually create our



109

00:07:21,940 --> 00:07:24,670

protocol now so that I can explain that to you.



110

00:07:24,700 --> 00:07:31,900

So go ahead and right click on the protocols group click new file and it clicks with File.



111

00:07:31,900 --> 00:07:34,340

We're going to name this toggle Abel.



112

00:07:34,660 --> 00:07:38,920

And this is another convention another naming convention for protocols.



113

00:07:38,920 --> 00:07:45,970

If this protocol kind of only handles one type of behavior like toggling something you can just name



114

00:07:45,970 --> 00:07:52,060

the protocol toggle a bowl and then when we conform to this we are basically making something toggle



115

00:07:52,060 --> 00:07:54,700

able able to be toggled on or off.



116

00:07:54,700 --> 00:08:02,380

So go ahead and click Create and we're going to name our protocol here like so protocol toggle Libelle



117

00:08:03,730 --> 00:08:08,370

and we're going to write one function func toggle.



118

00:08:08,720 --> 00:08:09,610

OK.



119

00:08:09,700 --> 00:08:12,300

Now of course there's no implementation code here.



120

00:08:12,550 --> 00:08:20,200

When we call toggle somewhere else we're going to basically say hey whatever class or structure or enumeration



121

00:08:20,200 --> 00:08:26,350

we conform to targetable and we'll be able to call toggle and set up the implementation that way.



122

00:08:26,350 --> 00:08:33,630

Now I did say though that we're using a mutating function so we need to call that here mutating and



123

00:08:33,640 --> 00:08:39,910

a mutating function whatever variable we call toggle on we're actually going to change the value of



124

00:08:39,910 --> 00:08:40,920

that variable.



125

00:08:41,050 --> 00:08:43,510

And that's where our enumeration comes into play.



126

00:08:43,510 --> 00:08:49,540

So with our protocol toggle here go back to switch status and what we're going to do is we're going



127

00:08:49,540 --> 00:08:52,890

to conform to our protocol in this enumeration.



128

00:08:53,080 --> 00:08:55,210

So go ahead and do that by typing a colon.



129

00:08:55,420 --> 00:08:58,630

And we're going to make switch status tag label.



130

00:08:58,690 --> 00:09:00,900

We're going to give it the capability to be toggled.



131

00:09:01,000 --> 00:09:05,730

But of course it's going to yell at us saying that we don't yet conform to this protocol.



132

00:09:05,950 --> 00:09:12,370

How do we conform to it by by implementing the mutating function toggle.



133

00:09:12,370 --> 00:09:17,240

So let's go ahead and do that beneath our cases here by typing Tuggle.



134

00:09:17,500 --> 00:09:20,880

And you'll notice that the function toggle comes in here.



135

00:09:21,070 --> 00:09:26,050

But remember we want it to be mutating so we need to declare mutating.



136

00:09:26,050 --> 00:09:32,410

Now what we're going to do is we're basically going to write a statement saying if the current case



137

00:09:32,500 --> 00:09:38,890

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.



138

00:09:39,070 --> 00:09:42,180

So to do this we're going to actually use a switch statement.



139

00:09:42,310 --> 00:09:48,460

And since this is an enumeration of type switch status when we use self that's going to refer to whatever



140

00:09:48,490 --> 00:09:50,620

instance of switch status we use.



141

00:09:50,620 --> 00:09:57,190

So we can type switch self and if you have not yet use switch statements they're basically like if.



142

00:09:57,190 --> 00:10:04,090

Else or if else if statements that allow us to switch through a bunch of different cases and since our



143

00:10:04,090 --> 00:10:09,120

switched status only has two values we could technically use an if else statement.



144

00:10:09,400 --> 00:10:12,720

But I find that a switch statement can be a little more descriptive.



145

00:10:12,940 --> 00:10:17,500

So let's say that we have two separate cases for a switch which we do.



146

00:10:17,590 --> 00:10:26,610

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



147

00:10:26,610 --> 00:10:27,790

something.



148

00:10:28,450 --> 00:10:31,050

Ok but what if we are off.



149

00:10:31,050 --> 00:10:35,610

So case off of colon and we're going to do something else.



150

00:10:35,870 --> 00:10:37,680

And that's how a switch statement works.



151

00:10:37,770 --> 00:10:42,600

If the value comes in as on we're going to do something otherwise if the value comes in as off we'll



152

00:10:42,600 --> 00:10:43,770

do that thing.



153

00:10:43,920 --> 00:10:47,750

Now like I said this is a mutating function called toggle.



154

00:10:47,820 --> 00:10:56,130

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



155

00:10:56,280 --> 00:10:58,090

meaning the switch status.



156

00:10:58,200 --> 00:11:03,600

We're going to set self to be equal to off this mutating function is actually going to be able to set



157

00:11:03,600 --> 00:11:07,140

the value of whatever instance of the switch status we have.



158

00:11:07,320 --> 00:11:14,520

The same thing goes for k start off we're going to set self to be equal to dot on this mutating function



159

00:11:14,580 --> 00:11:19,940

allows us to change the value of any instance of switch status which is really really cool.



160

00:11:20,010 --> 00:11:24,000

So we conformed to a protocol within our enumeration.



161

00:11:24,210 --> 00:11:26,370

And now watch what we can do.



162

00:11:26,550 --> 00:11:32,790

We can go into our view controller like so and what we can do is we can create an instance of switch



163

00:11:32,790 --> 00:11:35,250

status and set it with a default value.



164

00:11:35,250 --> 00:11:41,030

So in our interface builder let's think what status is this currently off.



165

00:11:41,040 --> 00:11:49,770

So if I want to set it to be off by default I can go like this var switch status of type switch status



166

00:11:50,310 --> 00:11:54,080

and we're going to set it to be equal to off.



167

00:11:54,200 --> 00:11:54,680

OK.



168

00:11:54,840 --> 00:11:58,190

So we're setting a default value when switch status is created.



169

00:11:58,290 --> 00:12:00,990

It is set to be off by default.



170

00:12:00,990 --> 00:12:06,270

That is going to be really helpful for us because what we're going to do is we are basically going to



171

00:12:06,270 --> 00:12:09,320

toggle it can't remember switch status.



172

00:12:09,450 --> 00:12:16,320

If I go look at the definition of switch status if I call switch status toggle it's basically going



173

00:12:16,320 --> 00:12:20,620

to take that off value and it's going to flip it to be on if it's on.



174

00:12:20,630 --> 00:12:22,010

It'll flip it to be off.



175

00:12:22,020 --> 00:12:29,640

So when the toggle button is pressed we're going to go ahead and call switch status dot toggle.



176

00:12:29,640 --> 00:12:30,900

Pretty easy right.



177

00:12:31,410 --> 00:12:32,970

And that's going to toggle the value.



178

00:12:32,970 --> 00:12:37,240

So it starts out as off and we toggle it when we press the button.



179

00:12:37,260 --> 00:12:40,440

That makes sense right just like a light switch or a push button.



180

00:12:40,440 --> 00:12:46,020

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



181

00:12:46,410 --> 00:12:49,750

and if it's not off meaning on we're going to do something else.



182

00:12:49,800 --> 00:12:59,220

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



183

00:12:59,220 --> 00:13:05,580

off button which if you look at the assets here are off button is the white one like so and the on button



184

00:13:05,580 --> 00:13:06,610

is the black one.



185

00:13:06,660 --> 00:13:13,950

So we're going to go ahead and type if switch statuses off we're going to set toggle button set image



186

00:13:14,310 --> 00:13:19,710

and we're going to call you I image named and we can type off button.



187

00:13:20,060 --> 00:13:20,430

OK.



188

00:13:20,440 --> 00:13:25,650

Now when you use your image this way you need to force unwrap it but that's going to set the image to



189

00:13:25,650 --> 00:13:28,140

be the off image if it is off.



190

00:13:28,140 --> 00:13:30,350

That's what we want now to get this to work.



191

00:13:30,360 --> 00:13:33,290

You need to set the control state to be normal.



192

00:13:33,810 --> 00:13:36,960

And that way we can actually change the image.



193

00:13:36,960 --> 00:13:43,140

Pretty cool then what we need to do is we need to think the background color in our interface builder



194

00:13:43,830 --> 00:13:46,410

is gray when it's off.



195

00:13:46,410 --> 00:13:53,130

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



196

00:13:53,130 --> 00:13:58,560

use a color literal and these are the coolest things you can actually click on it and you can set whatever



197

00:13:58,560 --> 00:13:59,550

color you want.



198

00:13:59,550 --> 00:14:04,650

There is my dark gray background color so I'm going to set the background to be that color literal.



199

00:14:04,680 --> 00:14:12,050

Next up we're going to need to set the status label to say off and have the two dark moons.



200

00:14:12,060 --> 00:14:20,700

So go ahead and say on off label text equals and we're going to pass in those two dark moons which I



201

00:14:20,700 --> 00:14:26,250

can access here I'm going to copy and paste it and I'm going to say off.



202

00:14:26,460 --> 00:14:27,220

Just like that.



203

00:14:27,240 --> 00:14:29,260

That's how we did it in the interface builder.



204

00:14:29,580 --> 00:14:30,890

So that is set.



205

00:14:31,080 --> 00:14:34,430

And now I need to change the text color to be white.



206

00:14:34,590 --> 00:14:40,620

So on off label dot text color and I can use a color literal again.



207

00:14:40,620 --> 00:14:42,350

Of course I want it to be white.



208

00:14:42,570 --> 00:14:43,740

So that's great.



209

00:14:43,740 --> 00:14:48,300

If the switch is off it's going to set the off image for the Betton.



210

00:14:48,300 --> 00:14:53,020

It's going to set the background color the text and the text color else.



211

00:14:53,190 --> 00:14:53,530

OK.



212

00:14:53,550 --> 00:15:03,900

We need to set the toggle button that said image and we're going to use you image named wups named and



213

00:15:03,900 --> 00:15:05,690

we need to set the on button.



214

00:15:05,730 --> 00:15:10,780

Like so force and wrap it and then we're going to set the control state to be normal.



215

00:15:10,860 --> 00:15:13,780

That way we can set the image of the button.



216

00:15:13,890 --> 00:15:20,760

Next we're going to set the view on background color to be a color literal and if it is on we want the



217

00:15:20,760 --> 00:15:24,300

background to be white but that makes our text invisible.



218

00:15:24,300 --> 00:15:28,290

So let's go ahead and let's change the text color and let's change what the text says.



219

00:15:28,320 --> 00:15:35,280

Let's start with the text on off label that text equals and we're going to say



220

00:15:37,680 --> 00:15:38,360

on.



221

00:15:38,520 --> 00:15:39,150

OK.



222

00:15:39,240 --> 00:15:43,800

And just for fun I'm going to put in my nice glowing moon here.



223

00:15:43,800 --> 00:15:45,150

Pretty cool.



224

00:15:45,690 --> 00:15:46,690

And there we go.



225

00:15:46,800 --> 00:15:49,660

So that's on but the font color is still white.



226

00:15:49,680 --> 00:15:51,570

So the words would be disappearing.



227

00:15:51,570 --> 00:15:57,690

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



228

00:15:57,690 --> 00:16:00,570

going to choose the dark gray color like the background.



229

00:16:00,630 --> 00:16:02,030

Very very cool.



230

00:16:02,040 --> 00:16:04,730

This is actually all we need to do.



231

00:16:04,740 --> 00:16:12,120

Thanks to our protocol and thanks to our mutating function we can set our switch status to have an inherent



232

00:16:12,120 --> 00:16:17,400

value off and then we can toggle it every time we press the button it's going to actually change the



233

00:16:17,400 --> 00:16:18,630

value of our variable.



234

00:16:18,630 --> 00:16:22,360

That's the really cool thing with mutating functions.



235

00:16:22,380 --> 00:16:26,560

So let's go build this to a simulator and let's see how we did.



236

00:16:27,260 --> 00:16:30,330

We're going to build it and let's just test it out really quickly.



237

00:16:30,330 --> 00:16:35,520

We should be able to toggle the values to flip this on and flip this off and if you really wanted to



238

00:16:35,520 --> 00:16:42,210

dive into this you could wire up the flash on the camera to turn on and off whenever you toggle the



239

00:16:42,210 --> 00:16:43,790

button that's something you could do.



240

00:16:43,830 --> 00:16:46,060

Not saying you will but you definitely could.



241

00:16:46,290 --> 00:16:48,930

So let's let's check out our sim here and see how we did



242

00:16:55,490 --> 00:17:01,180

read it appears to be loading taking its sweet time.



243

00:17:01,190 --> 00:17:03,330

OK so here we are it says off.



244

00:17:03,580 --> 00:17:07,840

We have the dark moons the light button when I click it watch what happens.



245

00:17:07,990 --> 00:17:10,340

It toggles on the background becomes white.



246

00:17:10,420 --> 00:17:13,800

The moons change the words change and the spring board quit.



247

00:17:13,810 --> 00:17:15,010

Think Spring board.



248

00:17:15,010 --> 00:17:16,550

Good old Escobedo bugs.



249

00:17:16,870 --> 00:17:19,710

And the button changes as well let's toggle it off.



250

00:17:20,080 --> 00:17:20,880

So cool.



251

00:17:20,890 --> 00:17:25,590

So I'm mutating function is able to change the values as we want.



252

00:17:25,600 --> 00:17:26,940

Super super cool guys.



253

00:17:26,950 --> 00:17:32,790

This has been a little intro to protocols and delegates I hope that you now feel confident using them



254

00:17:33,010 --> 00:17:36,940

or at least thinking of ways that you could use them in your apps whether you're setting up a specific



255

00:17:36,940 --> 00:17:42,340

type of functionality whether you are passing data using the delegate method or even using mutating



256

00:17:42,340 --> 00:17:45,210

functions to modify values.



257

00:17:45,280 --> 00:17:50,800

There's lots of ways protocol's can benefit us so I hope you've enjoyed this little intro to protocols



258

00:17:50,800 --> 00:17:53,010

and we're going to head over to the next video now.