What's up everyone.
Mark Price here at slopes dot com and welcome to the last video in the window shopper series.
A full fledged application with lots professional tactics and practices in it.
So in this video we're going to go ahead and create a really cool icon here on the left hand side that
denotes what type of currency you're using.
And it's going to be based on the location so it supports multiple countries which is really cool.
And we're going to write some very custom drawing code which is awesome as well to some advanced stuff
that you can do right here because I'm amazing like that.
I'm going to teach you amazing things.
So in case you didn't think it was amazing now.
Now you know so we're going to go to our Currency textfield.
OK.
The Cussons text and this is where we're going to write it and what we're going to do is we're going
to use a function called draw wrecked.
So I'm going to press Enter a couple of times and type in the word draw and it's the first one there
draw bracket.
Now you don't ever call super under-react.
And here's something else really important don't ever ever ever implement this function.
If it's empty it will cause performance issues in your app and Apple says all over the documentation
when I give you these tips.
I'm not making this stuff up it's all the documentation but you're clearly taking the course because
you don't like to read Apple documentation.
So I'm just reciting the docs for you.
So anyway I'm just kidding.
It's sometimes docs are very confusing but draw.
Ok only ever use if you're actually going to draw.
And I might also say if you're doing things like changing the corner radius of a layer and things like
that don't do that there as well.
OK.
You really only want to draw here or you really only want to put something here is when you actually
need to draw some type of sub you're at a subcu into your into your view itself.
OK and we are going to do some drawing and I'm not talking about drawing with no busier lines and curves
and things like that that would go in here.
But we're going to add some views and I think I think the draw function is the perfect spot to do that.
So enough of that what we're going to do is we're going to create a label.
OK we're going to format it and style it and then we're going to add it as a subcu in the left corner
area of the of the textfield.
So let's do it.
So when you say size C.G. float what I'm going to do here is just create the with the with the height
of the label.
I'm just storing it here in a variable so I can use it later and I'm specifying of type C.G. float because
if I don't it will default to a double.
OK.
And we we can't use doubles here.
When it comes to drawing because we have to UCG flops.
All right so let's create a label so let currency label equals UI label.
All right and what did I say when we're loading up views programmatically we should use the what.
The one with the frame.
OK.
We're going to create a frame and the one with the C.G. floats x y with height.
OK.
And so we want to about 5 pixels from the left.
Ok that makes sense.
But what about on the y position like how far do we want it from the top.
Well think about this and I was development frames they start at the top left.
So 0 0 and that's that's the origin.
And so if I was to say oh I want it you know halfway between the height of the textfield.
OK that's great.
But we still have the height of the label that we need to consider.
So we've got to factor that math in as well too but it's not that hard.
And we've done this before.
Frame size that height divided by two.
OK.
Minus.
And this would be size divided by two.
So minus size divided by two I could have said 10.
But this is this is better because in case changes here I don't have to go back and change the code
over here.
The width of this is just going to be sized so and the heights is going to be size actually.
So it's between about 20.
So what we've done is we've said we want the label 5 pixels from the left points on the left and we
want it in the center of the of the textfield.
OK.
We did some simple math to get the center of the textfield and if you don't understand this math just
read it carefully and look at it until you do understand.
Again a lot of new programmers who are just getting into it they're not used to reading into the details
and details are so important.
Pause videos don't move on so you understand everything.
No more speed reading ever again.
If you are speed reading code and these lessons you're doing it wrong.
Don't ever speed read ever again when it comes to code.
I learned that myself so currency label so that's great.
We've set up a position in a size.
Next thing I knew was background color so currency label background color equals and to do the color
literal.
So fun and pretty and what I want to do is like a like a light gray or maybe dark gray with some opacity
like green with the past lets do it like Ray but with opacity I should have done opacity here.
Maybe like 80 percent opacity.
Just for now we can maybe we can do them more like.
All right this is more white a wider label with 80 percent Passey that's fine too.
We can play around with it later.
OK.
I'm just I'm just guesstimating off the top of my head here so.
All right.
Great that's the background color we need to center the text of the label.
OK.
Because otherwise it's good to be aligned left.
And I know this from hard experience of course if you ran and built it you would see it but I'm just
going to set it here preemptively or say text alignment equals that center.
All right.
And then currency label that text color equals let's look at dark gray color
color literal dark green.
Come on.
Go like this darker at their own text color and then currency label dot layer dark corner radius.
Let's give it a rounded corner 5.0 that looks nice.
Currency label that clips to bounce which is true.
Now this is it.
Well you know what I'm not going to do this.
I'm going to show you what happens when we don't do this.
So Coop's abounds it was true and OK this is looking good so far.
Let's do the location thing now with the currency so we're going to do a number for matter so let formatter
equals number four matter OK.
And formatter that number style equals currency.
OK so we're setting the type of style of our format.
And then formatter dot locale equals current.
Now this is interesting formatter but look how this is like the location location and it's wherever
the device is currently from.
This is actually the default behavior so we didn't need to do this but I did want you to see that you
can set the locale so whereas on my assimilator you're going to see a dollar sign if you're from some
other country you're going to see your native format of currency based on whatever's on your typical
device.
And that comes for us automatically in the number formatter which is really nice.
And then let's actually just set that symbol so currency label that text equals formatter currency symbol.
OK matter what currency but we're just grabbing the actual symbol it's giving a string back which I
think is really cool.
And the last thing we need to do is add the subcu so add subcu currency label.
We're going to add it to this textfield.
So this may be a lot and you may be confused but again read it through it carefully we're doing things
you've done before.
Text color alignment all the things that we used to click on before were just doing it programmatically.
If you think interface builders magical it's not all those properties are here in the code.
And then what we've done here is we've taken this number formatter we've gotten our current location
and we're just grabbing the symbol for the currency and setting it to the label and then adding that
label on to the textfield itself.
And because we've set the position and the size it'll go right where it needs to go.
Let's see if it works let's just run it here.
Perfect.
It's got a nice little symbol the colors are even good.
But notice how we have a problem now.
These used to be rounded before right.
Remember and this sort of are this would be rounded to be set the corner radius.
But it's not working well.
OK.
Protip when working in draw recked OK you must set clip to bounce on the things that need to be clipped
because it will it takes off that feature for you.
OK so what worked before no longer works because we've implemented draw recked.
But it's a really easy fix.
OK.
And all you have to do is set the clip to bounce.
OK so what we'll do here is we will say currency label clipped to bounds it true and then we'll do it
in one more spot.
We'll do it here on a regular textfield inside the customized view.
We're just going to say clip two bounds equals true.
Right now it's bleeding off the edge because the default behavior was taken off once we implemented
draw recked here.
OK.
No big deal.
Let's run it again.
See how it looks beautiful.
So yeah I mean the designer we talked about he likes I like it.
And now whatever country you're from is going to have its proper currency symbol and you know our app
is working you know to 0 8 that's the hourly wage we want.
Let's say we make $50 an hour because we're high roller.
And then the item price is you know $2000 and 50 cents.
I don't know what it costs that's like.
You know that's like the iPad 15.
The new one it's like a 50 inch screen.
You know it's $2000.
It's absolutely phenomenal.
It's going to change your life.
OK so let's calculate it.
So it's going take 41 hours to get this you know iPad 15.
But you know Apple's sold you on the Kool-Aid and you're going to buy it.
And so it's clear the calculator will say well it's a new car.
So are really wage let's say as $25 an hour and the car we want you know let's say it's a it's a used
car.
Nissan JTR.
So we can get it for you know ninety five thousand dollars to get a used one.
So 0 0 0 make 25 bucks an hour.
So I'd only have to work 30 100 hours to get my JTR.
So the good news about this calculator is it can help you burst your dreams in a moment's notice just
by putting in the actual numbers in there because you know you worked for stuff and you're like I'm
going to get it.
But you never actually run the math when you're in the math.
Reality sets in.
So you're probably more suited for let's say a Honda Civic a used Honda Civic.
So you know we're looking at you on a civic and get it for like eight grand.
There you go.
Twenty hours that's about it's kind of like a GDR.
Not really.
So anyway our app is working we got beautiful a custom label here with the currency.
Is looking really fantastic.
So you did a great job.
Let's recap what we've learned.
So in this section we have learned how to write unit tests which are basically it's code that tests
code and we should always run unit tests.
And in fact we were bad because we didn't run this before we finished let's run this.
Now make sure that we have green checkmarks always run unit tests before you ship a product for sure
before you even test send out a test build or test flight or however you do it always run your tests
OK.
These are working that's great.
So you learn how to build unit tests.
You also learned how to work with Cousin textfield and how to work with be desirable so things that
you code inside the custom class actually show up in the interface which is awesome because you learn
how to do that.
You learn how to create a custom label by hand and put it in the draw recked function and then how to
add it onto the screen and place its position which is really cool stuff.
You learn how to attribute strings.
You learned how to basically build a full scale application that has multiple components to it.
We've got good protective code here.
Really good stuff here so this is this is fantastic.
Good job pat yourself on the back.
You've done a lot.
So we're going to call this video and this app done.
That's it.
Let's move on and forward.
Mark Price does slopes.
Dot.com.
See you next time.