Hey everybody what's going on this is Caleb with slopes dot com.
And in this video we're going to continue our talk about protocols and we're going to build a little
application called Color wizard.
And I want to show you what it's like really quickly.
It's a super simple app but we're going to use protocols to delegate the passing of information between
View controllers and it's super super cool.
Let me show you really quick.
So we're going to pull it open and it says here color presenter.
Gray is boring to color so I can click the plus button and I can choose a color green yellow blue red
or purple.
And when I choose one that data is passed back to the previous view controller and it's saved as the
background color for the view.
We also passed the name of the color so that's how this application is going to work.
It's pretty simple to build and so we're going to go ahead and get started right now.
Go ahead and pull up an X code and when you do this will pop up what we're going to do is we're going
to click Create new X code project and I'm going to pull this over here to the proper window.
And this is going to be a single view application.
So go ahead and click that.
That looks great.
And for the product name I'm just going to call it color magic.
OK go ahead and click next.
And we're going to save this.
Let's see where should we save this.
How about in the protocols and delegates folder that only makes sense.
And now we're going to go ahead and pull that open full screen.
And here's what we're going to do.
We're going to build the UI first.
OK.
So go into main storyboard and just like that.
We're going to go ahead and start building out this user interface.
So this screen is actually pretty simple.
There's just going to be a single label in the center that says Gray is boring.
Choose a color but we do need to set the background color.
So go ahead and click and we're going to set it to be this dark gray color which if you're interested.
That is whip's.
I don't know why that is not full screen.
That color is for a for a for a k if you want to use that same dark gray that I am.
It's up to you.
And next we're going to go ahead and add AUI label.
OK so drag one on there center it make it look pretty and we're going to drag it so that it can fit
nicely right here.
Make it a little taller and we're going to make it so that it is two lines so we can have two lines
of text.
And just like I said it's going to say Gray is boring.
Choose a color.
OK.
Now we're going to center this and I think we should also change the font from system to custom and
change the family to Avenir next.
It's my favorite font.
Then we're going to select Demi bold and I'm going to bump this up to maybe 24 and you can already see
it's starting to go onto the second line which is exactly what we want.
OK.
Click next and change the font color to be white like so.
And then what we're going to do is we're going to go ahead and pin this horizontally and vertically
in the container so that it stays right in the center.
So click on the align button and select horizontally and vertically in a container and add two constraints.
Now of course you can see that there are some problems here.
It's not on two lines sort of fixed that we're going to just kind of eyeball with.
And let's just say maybe 150 press enter.
OK obviously that's too small.
So we need to modify it by selecting the label and changing the width maybe to 200.
There we go.
Gray is boring.
Choose a color.
So next what we're going to do is we are going to go ahead and drag on a new UI View Controller.
So go ahead and type UI view and the controller is going to be the top result there.
Drag it on and let it go.
And for this what we're going to do is we're going to make five UI buttons and we're going to put them
inside of a stacked view and keep a stack view is going to allow us to basically equally space all five
buttons really easily.
So go ahead and search for a button which is the same thing as a UI button as you probably know and
drag one on just like that.
And I'm going to just go and copy and paste it five times.
One two three four five.
And with all these done we can go ahead and select all of them and then click the stack button right
here at the bottom.
And now it's in the stack view.
They're evenly spaced and yeah it's really cool.
So let's go ahead let's actually make this stack.
You take up the entire width of the screen by clicking on the penmen menu or pin button I guess and
setting all of the constraints here to be 0 0 0 and 0 press enter and you'll see that it stretches out.
The only problem is that we are not yet equally spaced.
OK.
If you look in the attributes inspector you'll notice that the distribution is just set to fill.
This is just kind of saying hey take up this space but we need to tell it to fill equally.
And as you can see the buttons automatically will scale to be of equal size.
Cool.
So let's go ahead let's set up our buttons now to have the proper colors in the background as well as
their label.
So this one we're going to scroll down and choose.
It's background color which you know what I'm going to open up my colors here.
And I think let's go ahead and find a nice green color.
And I don't really like any of those.
Maybe I have one in that I've saved already.
That looks much better.
Ok if you want this color just by the way it's 6 D.
B c 63 and you can use that it's totally fine.
And now let's go ahead and change the text color to white K and we're going to bump it up to maybe 20.
Let's do 24 and then we're going to actually change the fonts will have to change the size in just a
second.
Do Avenir next and do Demy bold and make it a size 24.
OK.
Very cool.
Now you know what I'm noticing that these buttons they don't have the right text property for the font
or the size so I'm going to actually get rid of those and then watch what happens.
I can just duplicate these and they'll automatically fill in exactly what I needed them to be like.
So that's just a nice little hack.
All right so with all this all five buttons in place now I can start changing the colors again.
So let's choose a nice yellow.
There we go for this one.
Let's do a nice blue.
That's a little too intense.
How about this one.
That's better for this one.
Let's do a red color.
I think I have one saved here.
Yup.
Oh by the way guys I'm not really telling you what these colors are.
Am I.
The yellow is a 9 4 4.
The blue is 4 7 8.
The red is d 2 5 0 for E and the bottom one we're going to do a nice purple color like so.
And this purple if you're interested is 8 6 8 7 B-D.
So this is great but the only thing we need to do now is to set each of these buttons labels to match
the color that's reflected in the background.
So go ahead and click on green and type Green.
Go ahead and click on yellow and type yellow.
You guys know the drill blue red and purple.
Amazing.
So now we have five buttons and that's exactly how many we need.
That's perfect.
But now we need to think how are we going to get from this view controller to this view controller and
what we could do is we could add a button and we could set up a segue.
So when you tap on the button this view controller would be presented Motegi.
And then we could set it so that when you tap on the button it's dismissed and the data is passed back.
That's just one way we could do it.
But what I'm going to do is I'm going to select this view controller and I'm actually going to go up
to editor embed in and select navigation controller.
OK.
Now what that does is it basically creates a navigation controller just like you would expect.
OK.
And the navigation controller is going to be in charge of controlling navigation.
OK that's pretty simple.
You have seen apps with navigation controllers for sure.
They have a bar at the top.
They usually have a title.
They'll have a button or two.
And when you select a button it will slide the next view controller over.
You'll recognize that when we start using it.
So we're going to do now is we're going to go ahead and give this controller a title and let's call
this color magic.
That's easy.
And then what we're going to do is we're going to add a bar button item.
OK so when I drag this on watch what happens do you see how it kind of illuminates there.
If I drop this we can change this to be of type add K that's super simple but I don't want it to be
this blue color so I'm going to change the tint to match our dark gray.
OK.
And it looks like maybe that's not quite working exactly how I thought it would.
So let's go ahead and let's just set this to be default and then let's change the tent of the entire
bar here.
I think that might help us we'll change the title color to dark gray.
And let's go ahead and let's change.
Well you know what if I change the bartend.
Yeah that'll change the whole bar.
We don't want that.
But we do want the tent on the tent.
There we go.
Forgot about that.
So if we set the tent you'll notice in a second that this will update.
And now if you look at it it has a nice dark gray tent very very cool.
So now the easiest part about this application is actually how we're going to transfer the data from
you control the view controller and to do that or I guess the easiest part is to create the segue to
pop up this controller.
Watch how easy this is.
If I select our plus button here and I right click and drag to this view controller and let go I can
just click show and now there's a segue that's prepared when I tap on this it's going to slide this
controller over and show all my buttons.
Really cool but I don't want this to say color magic.
So what I'm going to do is I'm going to select the navigation bar select color magic for back button
and I'm just going to type back.
OK.
Now that will show as soon as I push this button it will slide over and I can tap back to go back in
time which is pretty cool or not back in time but I guess back in space which is pretty neat.
So now let's go ahead and let's test this to see how we did let's build this to a simulator and let's
just make sure everything looks nice and as soon as it's running then we can start diving into Iby actions
and Iby outlet's very easily.
So let's take a look how did we do.
OK there's our view controller that looks good when I click on this button watch what happens.
We get our little navigation to popovers slides over if I press back it goes back.
That's so easy.
And that's just built in from Iowa.
Thanks to the navigation controller.
Really really cool stuff.
So let's go ahead and let's go back to our project here and let's think we have a view controller file
here.
And you know what I'm actually going to name this color presenter Visi and we need to rename the class
here color presenter Visi because remember this.
This class is going to be going with the screen that presents the color at the end.
Now of course if I go in here and select the identity it's still looking for that old file.
So let's change it to color presenter AVC press enter.
And now we're going to go ahead and create a new code file for the button visi.
So right click new file and we're going to create a cocoa touch class and it's already a subclass of
view controller.
But this is going to be color picker Visi because that's where we pick the color on these buttons so
press next.
And go ahead and click Create supercool and we can actually get rid of did receive memory warning as
well as this commented out navigation stuff.
We're not going to need it.
But yeah just leave it like this.
And now we can go back to main storyboard and set the identity of our color picker visi.
So select it go to the identity and the identity inspector and this is going to be color picker AVC
press enter and now it has exactly what we need which is really cool.
So let's think about what we need to do here.
We have a button that can automatically load this color picker visi.
The only thing that we need to change is what this label says because remember when we select a color
we need to update this label with that colors name.
So let's go ahead and let's open the assistant editor.
Let's go to color presenter AVC and we're going to go ahead and mix some more room here.
We're going to go ahead and make some make an outlet for our label so select that label right click
and drag and we're going to call this color name label and go ahead and connect it just like that.
Super easy.
And you know what while we're here.
Get rid of did receive memory warning.
We don't need it.
And cool.
Yeah that's all that we're going to need to do for the outlets on this new controller.
The next thing we need to choose is color picker Visi and we need to create some Iby actions for these
buttons.
But you know it's even easier than creating an action for each button creating one Iby action and using
ascender of type you eye button to determine which button was pressed.
So we're going to go ahead and do that.
And let me show you just how easy it is.
Go ahead and type at Iby action phunk button will be more specific.
Color button was pressed and the cool thing.
What we can do here is we can type sender UI button.
That's not a UI button.
That's also not a hide button.
There we go.
OK.
So the sender is of type UI button and the coolest thing is that because of that we're going to be able
to access this Button's background color and this Button's title label because if we tap on this button
it's going to pass in this Button's values through the sender which is just so cool.
So like I said we can go ahead and we can drop this on the green button.
We can do it again on the yellow button.
We can do it again on the blue button and I'm sure you're noticing as I'm selecting this all three buttons
are selected they're red and purple.
So now we have one shared Iby action for any of these buttons.
If I select one it's going to pass in the ballot.
The buttons value through the sender which is really neat.
So just for an example we're going to go ahead and just print sender which is of type you I button let's
do sender dot title label dot text and we're going to just print it out to see what it says.
So let's go ahead and let's BuildOn run let's go test it.
And then I think we're going to be good to go to the next video where we'll actually start using our
protocols and actually building out the code side which is really neat.
So click on the plus button and when I select one of these buttons watch what happens in the console.
It says green yellow red blue purple.
So we're able to use one Iby action to access all of those buttons at the same time which is really
neat.
So that is that our UI is now done.
And in the next video we're going to start creating a protocol.
We're going to use the delegate method to transfer data from one view controller to the next.
It's one really incredible way that protocols can be helpful in Iowa development.
So let's head over to the next video and I'll see you there.