Say what's up everyone Arkwright's slopes dot com and previously on Windows shopper we created an app
and it's really cool but unfortunately the runtime look is not how it looks when I'm in Interface Builder
and it's really hard to build apps and the Interface Builder and it doesn't look like what it's supposed
to look like.
And how do you fix it how do you get it to do what you want it to do because it's custom code that's
changing this.
And we want it to be reusable.
Now I'm really thinking about maybe just going back to Interface Builder and resetting all the buttons
manually because I want to see what I'm doing.
Well what did you could have the best of both worlds What if you could have your cake and eat it too.
Well I'm going to show you right now and it's really really simple.
So let's go back to our code here in our currency textfield and we're going to do is we're going to
use something called IB desirable.
So you preface your class with something called at IB design.
Well this is a class attribute.
And what we're saying is hey we want the changes that happen in this class to show up in the interface
builder.
OK.
Which is really really cool.
Now it's not going to work yet.
And there's one reason why it's because we need to implement a function called prepare for prepare prepare
for Interface Builder OK and prepare for Interface Builder is going to run code to show the changes
in Interface Builder.
And so what we want is all the code that's in this function here to run there.
Well how do we do that.
Because we also need our awake from NIB function to run that as well too because this one is only going
to be called an Interface Builder.
But this is called that runtime.
Well that's as simple as extracting both of these into a custom function and you can call this whatever
you want.
I think we'll call it customize phunk customize view like so and then all we need to do is command X
code command V to paste it here and then prepare for Interface Builder we'll call customize view and
then in a week from now we'll call customize you like so.
That's it.
Literally all we did was we put at I be desirable and then we did the prepare for Interface Builder.
So any of your code that changes things programmatically any of your view logic needs to happen in the
prepare for Interface Builder which it is because we moved everything into customized view.
So if we go back to our main storyboard it's brilliant to look at that and guess what nobody else teaches
this blows my mind.
You should be implementing this in your app so you can actually build apps that look the way that you
are dragging them around.
So now I feel comfortable finishing our interface here.
So let's make this a little bit bigger there like that.
And it's going start pinning stuffs I want to pin this let's say 35 from the top and you know from the
sides 1:58 let's say 2000 from the left and 20 from the right.
And then let's give it a fixed height let's say a 40.
Much better beautiful.
I'm really like in this app now all real time command DB duplicate.
And of course it's giving us red lines is yelling at us because we don't have constraints set up yet.
So let's do that now.
Let's pin this say 25 from the top 1 and as far as the left and the right go do 20 and 20.
And we also could have pinned to these edges to be the same.
We'll do that.
I'll show you how to do that.
We'll give it a fact when we want to do the high here we'll just pin it from the top.
And this is cool.
What does control drag from this hourly wage.
And let's go ahead and say we want him to have the equal leading and the equal trailing boum.
And how about equal heights really cool.
So now if I change this one the other one will follow suite follow suit if I update the frames.
But we're not going to do that.
So really cool stuff your hourly wage your hourly wage this is all looking great.
And then the item price is what this one says so in the placeholder we're going to say item price looking
good.
Let's just run it just to be sure everything is ship shape beautiful.
Your hourly wage item price.
Let's click one of these here and we got the wrong keyboard.
Let's fix that.
We want the decimal pad keyboard.
So this one is pretty simple to change as well.
Turn off this thing and close up here.
OK.
So we want to do is for the keyboard type we want to do decimal pad and same thing here.
We want to do decimal pad keyboard type decimal pad.
And I think on this bottom one here will say auto and able to return key on this bottom field here.
Cool so you enter a value here you interview here you can only enter in numbers digits.
This is great.
It's exactly what we want.
And then of course what we need also if we look at our images here.
OK we're going to need this Calculate button here and then we're also going to need this label here
that says 32 hours etc. we can really do this stuff over here without the Calculate button.
And so I say we did that first but this is really interesting.
So the Calculate button if I'm looking at the designs correctly when the keyboard's up we need this
calculator button at the top.
And when the keyboard disappears we want the Calculate button to disappear.
Now one way to do this is to programmatically detect when the keyboard comes up or its height and position
is in place of you and have animate and hide and show based on what the keyboards visible or not.
But X code has given us a handy feature that makes this all that functionality automatic for us so let's
go ahead and do that next.
Drag these off drag this off.
Well we're going to do is in our view controller we're going to write some code for this.
Now maybe in the future I might put this in some type of custom extension or class that's more reusable
but I don't really see that use case just yet.
And sometimes it's not ideal to prematurely refactor things OK because you may never you may never get
to that point and the code will be just fine.
So I feel comfortable doing this code here in the view did load because it's only a one time thing and
it's specific to this app here.
And so what we're going to do is we're going to create a button code.
I don't know if you knew that but everything you can do in Interface Builder you could do in code.
In fact that's how a lot of it used to be you do it programmatically.
So what we're going to do is we're going to create a button programmatically.
And then we're going to attach it to the text fields accessory.
OK.
And first things first is you've got to have ibl it's for text fields Otherwise we can't reference them.
So back to the Interface Builder click the assistant editor and close some of the stuff up here so it's
not so congested normally it won't be this congested.
I have things extra large on the screen for teaching purposes but normally when you're working you can
adjust the resolution of your monitor so you can fit more things on it.
And I'm going to control drag from this first textfield over here above the override to load outlet
and we're going to call this wage ti XTi like so.
And then the item price put right below it will let me right there and we're going to call this price
XTi.
I'm going to close this as an editor and then I'm going to expand this here so we can see all of our
code files save it and then open up the main VC does with ALCA very good.
And now we have two text fields we have Atlas references for them.
So first things first is let's go ahead and create that button programmatically.
So let calque button equals UI button and we're going to do one with the frame whenever you're working
programmatically you typically want to do the UI button or you would view with the frame so you can
specify how big it's going to be.
You don't have to.
You could do at a later point in time but usually you want to do it here.
And so we're going to create a CGI wrecked inside that's going to create the frame for us because frame
is a CD-ROM.
That's what it calls for and what we'll do is we're going to say zero x okay and zero y zero x zero
Why that's just going to keep it at the top left which is where we want it.
And then we just sort of with the height and the with is going to be the width of the view itself which
is the size of the keyboard because the keyboard expands the whole view.
So all we have to do is say view of frame size and the height can be whatever we want and I'm going
to put 60 because I think 60s a nice high looks nice.
OK let's go and give it a background color so calque button dot the background color equals and we're
going to say the color literal and let's double click it and let's go for a nice nice orange color and
like those oranges to this orange here and just adjust it slightly so it's a little bit lighter.
We go.
You go.
Nice little orange color there.
All right say calque button set title.
OK.
And we're going to say calculate like so for control control control state normal.
Let me give you a pro tip.
OK.
Always always always use set title when you're setting the text on a button always versus.
We could have said Kalpa and dot
that title OK which is a title I will not text I could have said calque but that title will that text
equals calculate.
But guess what it doesn't work and you'll bang your head on the keyboard.
This does not work because that's not how you set text on a button.
Let's use that text on the label as you know you'll say my label that text equals whatever.
But the protip again when working with the button if you want to set the title called Set title.
Trust me this title table that text does not work and you'll probably want to do that because you're
used to working with labels.
But you heard it from me.
Ok cool.
So that's the that's the title calculate we're going to say calque button set.
Title color again you want to use the set title color and not the other way of setting the color.
And we're going to say color literal white is fine.
And for the normal state of the button.
OK we don't want the press data or the highlighted state or anything like that.
All right.
And then the next thing we need to do is we need to have a target for when the button is pressed like
what function is going to be called and soullessness let's get rid of this memory warning and then let's
go ahead and say phunk calculate like so we want to do is when the calculator is press we want it to
call a function.
And so now we can actually add the target of the buttons we can say calque button add target like so
and we're going to say self and the action OK is going to be a selector and we're going to say I mean
visi.
Calculate like so for touch up there you go touch up inside.
Now if we run this this should group let us build.
Phil I don't know what do we do.
Argument of Selecta refers to instance method to calculate that is not exposed to objective c at RBJ
C to expose this instance method to objective c.
So go ahead n click fix.
Now the thing is ok you'll notice here we've gotten at RBJ see.
So when you're working with selectors.
OK this is a function that will be called at a later point in time.
It is using Objective-C runtime that's a feature of Objective-C messaging sending strings between classes
that can call a function.
That's not a swift thing.
And so previous versions of X code this would happen automatically under the hood but would now before
they want you to know when a function is an object A C runtime function.
So your code doesn't change here but it has changed here you've got to use the explicitly add at o BJC
to say hey it's going to use an objective c feature in order to run this and so that is how you do it.
And so the pound sign selector main Veazey calculator there are a couple of other ways of running selectors
but this is the best way and the safest way.
OK.
And make sure that the functions actually there if you use a different method like the you know if I
said selector and then use the string method like calculate like so if that function didn't exist then
at runtime the app would crash and that's not a good experience so this is safer.
OK.
So we set the button at the target that we want to be called when the when the button is pressed.
OK.
And then all that's left now is on those two textfield to set this button as the accessory view.
So we're going to say wage TXI.
Input accessory view equals calque button.
And then what we'll do is we'll say the price next to 60 that input access review equals the calque
button and that looks good as well too.
And then right here let's just do a print saying hey we got here a got here.
We could also debugged it but prints are more fun.
OK.
So what I'm going to do here is I'm going to run this is clear this nonsense let's run it.
And when I tap on this you're going to see the calculate field here and when I click it we got here
should print which it did.
Now if you're working with the simulator and the keyboard didn't prayer you can do command K that toggles
the keyboard for the simulator itself and sometimes it's not enabled by default.
But what we want is for it to appear when you're typing and stuff.
And so it's definitely a working the Calculate button is working.
And so the whole hiding and showing of it it's all automatic now.
It adds it automatically hides it shows automatically.
And that's exactly what we want.
This would have been a lot of code right if we hadn't used the input accessor abuse of coolit little
feature that comes with the text fields.
OK.
And so again what we did here was we created a.
All right.
And then we set a background color gave it a title and stuff and we added its target function programmatically
instead of having Iby action from your interface builder.
We used ad target and then we put it here if you didn't want to use a button we could also have used
a UI view and did the same things added a label on it and the colors.
And then we could added a gesture recognizer but I thought that was a little bit more code.
And this made a whole lot more sense here.
So this is what we're going to roll with right here so I think this video is good for now.
We've done some really cool stuff and so let's stop it.
Catch up if you're behind and let's move on afford Mark Price slopes dot.com.