1
00:00:05,630 --> 00:00:06,350
What's up everyone.

2
00:00:06,350 --> 00:00:11,330
Mark Price here at slopes dot com and welcome to the last video in the window shopper series.

3
00:00:11,360 --> 00:00:17,500
A full fledged application with lots professional tactics and practices in it.

4
00:00:17,510 --> 00:00:22,670
So in this video we're going to go ahead and create a really cool icon here on the left hand side that

5
00:00:22,670 --> 00:00:25,090
denotes what type of currency you're using.

6
00:00:25,340 --> 00:00:29,740
And it's going to be based on the location so it supports multiple countries which is really cool.

7
00:00:29,900 --> 00:00:35,210
And we're going to write some very custom drawing code which is awesome as well to some advanced stuff

8
00:00:35,210 --> 00:00:38,500
that you can do right here because I'm amazing like that.

9
00:00:38,500 --> 00:00:40,340
I'm going to teach you amazing things.

10
00:00:40,340 --> 00:00:43,310
So in case you didn't think it was amazing now.

11
00:00:43,390 --> 00:00:46,600
Now you know so we're going to go to our Currency textfield.

12
00:00:46,790 --> 00:00:47,330
OK.

13
00:00:47,360 --> 00:00:50,810
The Cussons text and this is where we're going to write it and what we're going to do is we're going

14
00:00:50,810 --> 00:00:53,030
to use a function called draw wrecked.

15
00:00:53,200 --> 00:00:56,870
So I'm going to press Enter a couple of times and type in the word draw and it's the first one there

16
00:00:56,870 --> 00:00:58,010
draw bracket.

17
00:00:58,040 --> 00:01:00,720
Now you don't ever call super under-react.

18
00:01:01,250 --> 00:01:05,650
And here's something else really important don't ever ever ever implement this function.

19
00:01:05,660 --> 00:01:10,970
If it's empty it will cause performance issues in your app and Apple says all over the documentation

20
00:01:11,000 --> 00:01:12,110
when I give you these tips.

21
00:01:12,290 --> 00:01:16,100
I'm not making this stuff up it's all the documentation but you're clearly taking the course because

22
00:01:16,100 --> 00:01:17,810
you don't like to read Apple documentation.

23
00:01:17,810 --> 00:01:19,780
So I'm just reciting the docs for you.

24
00:01:19,790 --> 00:01:22,540
So anyway I'm just kidding.

25
00:01:22,540 --> 00:01:26,520
It's sometimes docs are very confusing but draw.

26
00:01:26,650 --> 00:01:28,930
Ok only ever use if you're actually going to draw.

27
00:01:29,130 --> 00:01:33,350
And I might also say if you're doing things like changing the corner radius of a layer and things like

28
00:01:33,350 --> 00:01:35,090
that don't do that there as well.

29
00:01:35,110 --> 00:01:35,690
OK.

30
00:01:36,140 --> 00:01:39,740
You really only want to draw here or you really only want to put something here is when you actually

31
00:01:39,740 --> 00:01:44,540
need to draw some type of sub you're at a subcu into your into your view itself.

32
00:01:44,540 --> 00:01:50,930
OK and we are going to do some drawing and I'm not talking about drawing with no busier lines and curves

33
00:01:50,930 --> 00:01:53,350
and things like that that would go in here.

34
00:01:53,660 --> 00:01:58,420
But we're going to add some views and I think I think the draw function is the perfect spot to do that.

35
00:01:58,790 --> 00:02:02,380
So enough of that what we're going to do is we're going to create a label.

36
00:02:02,540 --> 00:02:08,030
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

37
00:02:08,120 --> 00:02:10,520
area of the of the textfield.

38
00:02:10,520 --> 00:02:14,390
So let's do it.

39
00:02:14,390 --> 00:02:20,960
So when you say size C.G. float what I'm going to do here is just create the with the with the height

40
00:02:21,020 --> 00:02:23,390
of the label.

41
00:02:23,420 --> 00:02:28,370
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

42
00:02:28,370 --> 00:02:30,590
if I don't it will default to a double.

43
00:02:30,710 --> 00:02:31,240
OK.

44
00:02:31,460 --> 00:02:32,690
And we we can't use doubles here.

45
00:02:32,690 --> 00:02:35,220
When it comes to drawing because we have to UCG flops.

46
00:02:35,240 --> 00:02:42,220
All right so let's create a label so let currency label equals UI label.

47
00:02:42,440 --> 00:02:46,880
All right and what did I say when we're loading up views programmatically we should use the what.

48
00:02:46,880 --> 00:02:48,220
The one with the frame.

49
00:02:48,390 --> 00:02:49,070
OK.

50
00:02:49,310 --> 00:02:54,600
We're going to create a frame and the one with the C.G. floats x y with height.

51
00:02:54,740 --> 00:02:55,190
OK.

52
00:02:55,460 --> 00:02:58,220
And so we want to about 5 pixels from the left.

53
00:02:58,320 --> 00:02:59,540
Ok that makes sense.

54
00:02:59,810 --> 00:03:02,760
But what about on the y position like how far do we want it from the top.

55
00:03:02,760 --> 00:03:08,420
Well think about this and I was development frames they start at the top left.

56
00:03:08,420 --> 00:03:11,120
So 0 0 and that's that's the origin.

57
00:03:11,150 --> 00:03:17,210
And so if I was to say oh I want it you know halfway between the height of the textfield.

58
00:03:17,360 --> 00:03:18,540
OK that's great.

59
00:03:18,710 --> 00:03:21,230
But we still have the height of the label that we need to consider.

60
00:03:21,230 --> 00:03:24,340
So we've got to factor that math in as well too but it's not that hard.

61
00:03:24,350 --> 00:03:26,480
And we've done this before.

62
00:03:26,760 --> 00:03:30,430
Frame size that height divided by two.

63
00:03:30,610 --> 00:03:31,410
OK.

64
00:03:31,890 --> 00:03:33,080
Minus.

65
00:03:33,350 --> 00:03:35,850
And this would be size divided by two.

66
00:03:36,000 --> 00:03:38,620
So minus size divided by two I could have said 10.

67
00:03:38,900 --> 00:03:43,940
But this is this is better because in case changes here I don't have to go back and change the code

68
00:03:43,940 --> 00:03:44,830
over here.

69
00:03:45,140 --> 00:03:51,420
The width of this is just going to be sized so and the heights is going to be size actually.

70
00:03:51,440 --> 00:03:53,210
So it's between about 20.

71
00:03:53,240 --> 00:03:57,860
So what we've done is we've said we want the label 5 pixels from the left points on the left and we

72
00:03:57,860 --> 00:04:02,120
want it in the center of the of the textfield.

73
00:04:02,210 --> 00:04:02,520
OK.

74
00:04:02,560 --> 00:04:06,980
We did some simple math to get the center of the textfield and if you don't understand this math just

75
00:04:06,980 --> 00:04:10,070
read it carefully and look at it until you do understand.

76
00:04:10,070 --> 00:04:14,660
Again a lot of new programmers who are just getting into it they're not used to reading into the details

77
00:04:14,730 --> 00:04:15,980
and details are so important.

78
00:04:15,980 --> 00:04:19,240
Pause videos don't move on so you understand everything.

79
00:04:19,250 --> 00:04:21,260
No more speed reading ever again.

80
00:04:21,260 --> 00:04:25,260
If you are speed reading code and these lessons you're doing it wrong.

81
00:04:25,280 --> 00:04:27,670
Don't ever speed read ever again when it comes to code.

82
00:04:27,950 --> 00:04:31,450
I learned that myself so currency label so that's great.

83
00:04:31,460 --> 00:04:33,670
We've set up a position in a size.

84
00:04:33,680 --> 00:04:41,120
Next thing I knew was background color so currency label background color equals and to do the color

85
00:04:41,120 --> 00:04:41,700
literal.

86
00:04:41,810 --> 00:04:51,530
So fun and pretty and what I want to do is like a like a light gray or maybe dark gray with some opacity

87
00:04:51,680 --> 00:04:58,410
like green with the past lets do it like Ray but with opacity I should have done opacity here.

88
00:04:59,090 --> 00:05:01,010
Maybe like 80 percent opacity.

89
00:05:01,010 --> 00:05:08,280
Just for now we can maybe we can do them more like.

90
00:05:08,410 --> 00:05:12,040
All right this is more white a wider label with 80 percent Passey that's fine too.

91
00:05:13,350 --> 00:05:14,710
We can play around with it later.

92
00:05:14,760 --> 00:05:14,960
OK.

93
00:05:14,970 --> 00:05:18,450
I'm just I'm just guesstimating off the top of my head here so.

94
00:05:18,600 --> 00:05:18,870
All right.

95
00:05:18,870 --> 00:05:21,670
Great that's the background color we need to center the text of the label.

96
00:05:21,720 --> 00:05:22,190
OK.

97
00:05:22,200 --> 00:05:24,730
Because otherwise it's good to be aligned left.

98
00:05:24,930 --> 00:05:28,800
And I know this from hard experience of course if you ran and built it you would see it but I'm just

99
00:05:28,800 --> 00:05:34,810
going to set it here preemptively or say text alignment equals that center.

100
00:05:34,850 --> 00:05:35,550
All right.

101
00:05:35,550 --> 00:05:40,920
And then currency label that text color equals let's look at dark gray color

102
00:05:44,430 --> 00:05:48,400
color literal dark green.

103
00:05:48,510 --> 00:05:49,060
Come on.

104
00:05:49,170 --> 00:05:50,270
Come on.

105
00:05:50,580 --> 00:06:00,480
Go like this darker at their own text color and then currency label dot layer dark corner radius.

106
00:06:00,480 --> 00:06:04,000
Let's give it a rounded corner 5.0 that looks nice.

107
00:06:04,050 --> 00:06:08,530
Currency label that clips to bounce which is true.

108
00:06:08,760 --> 00:06:09,520
Now this is it.

109
00:06:09,720 --> 00:06:11,570
Well you know what I'm not going to do this.

110
00:06:11,580 --> 00:06:14,030
I'm going to show you what happens when we don't do this.

111
00:06:14,040 --> 00:06:19,390
So Coop's abounds it was true and OK this is looking good so far.

112
00:06:21,070 --> 00:06:26,890
Let's do the location thing now with the currency so we're going to do a number for matter so let formatter

113
00:06:27,130 --> 00:06:30,290
equals number four matter OK.

114
00:06:30,550 --> 00:06:35,400
And formatter that number style equals currency.

115
00:06:35,650 --> 00:06:38,070
OK so we're setting the type of style of our format.

116
00:06:38,440 --> 00:06:43,720
And then formatter dot locale equals current.

117
00:06:43,740 --> 00:06:48,700
Now this is interesting formatter but look how this is like the location location and it's wherever

118
00:06:48,700 --> 00:06:50,860
the device is currently from.

119
00:06:50,860 --> 00:06:55,660
This is actually the default behavior so we didn't need to do this but I did want you to see that you

120
00:06:55,660 --> 00:07:00,340
can set the locale so whereas on my assimilator you're going to see a dollar sign if you're from some

121
00:07:00,340 --> 00:07:05,110
other country you're going to see your native format of currency based on whatever's on your typical

122
00:07:05,110 --> 00:07:05,610
device.

123
00:07:05,640 --> 00:07:10,460
And that comes for us automatically in the number formatter which is really nice.

124
00:07:10,630 --> 00:07:19,650
And then let's actually just set that symbol so currency label that text equals formatter currency symbol.

125
00:07:20,210 --> 00:07:25,000
OK matter what currency but we're just grabbing the actual symbol it's giving a string back which I

126
00:07:25,000 --> 00:07:26,070
think is really cool.

127
00:07:26,170 --> 00:07:31,750
And the last thing we need to do is add the subcu so add subcu currency label.

128
00:07:31,750 --> 00:07:34,760
We're going to add it to this textfield.

129
00:07:34,990 --> 00:07:39,160
So this may be a lot and you may be confused but again read it through it carefully we're doing things

130
00:07:39,160 --> 00:07:40,120
you've done before.

131
00:07:40,120 --> 00:07:45,550
Text color alignment all the things that we used to click on before were just doing it programmatically.

132
00:07:45,550 --> 00:07:51,030
If you think interface builders magical it's not all those properties are here in the code.

133
00:07:51,160 --> 00:07:55,180
And then what we've done here is we've taken this number formatter we've gotten our current location

134
00:07:55,180 --> 00:07:59,560
and we're just grabbing the symbol for the currency and setting it to the label and then adding that

135
00:07:59,560 --> 00:08:02,230
label on to the textfield itself.

136
00:08:02,230 --> 00:08:06,340
And because we've set the position and the size it'll go right where it needs to go.

137
00:08:06,730 --> 00:08:08,860
Let's see if it works let's just run it here.

138
00:08:08,860 --> 00:08:09,160
Perfect.

139
00:08:09,160 --> 00:08:10,980
It's got a nice little symbol the colors are even good.

140
00:08:10,990 --> 00:08:13,150
But notice how we have a problem now.

141
00:08:13,150 --> 00:08:15,550
These used to be rounded before right.

142
00:08:15,550 --> 00:08:19,080
Remember and this sort of are this would be rounded to be set the corner radius.

143
00:08:19,090 --> 00:08:22,520
But it's not working well.

144
00:08:22,960 --> 00:08:23,860
OK.

145
00:08:23,950 --> 00:08:31,330
Protip when working in draw recked OK you must set clip to bounce on the things that need to be clipped

146
00:08:31,330 --> 00:08:35,080
because it will it takes off that feature for you.

147
00:08:35,170 --> 00:08:39,650
OK so what worked before no longer works because we've implemented draw recked.

148
00:08:39,670 --> 00:08:41,220
But it's a really easy fix.

149
00:08:41,260 --> 00:08:41,920
OK.

150
00:08:42,100 --> 00:08:44,640
And all you have to do is set the clip to bounce.

151
00:08:44,800 --> 00:08:52,890
OK so what we'll do here is we will say currency label clipped to bounds it true and then we'll do it

152
00:08:52,890 --> 00:08:54,220
in one more spot.

153
00:08:54,220 --> 00:08:57,940
We'll do it here on a regular textfield inside the customized view.

154
00:08:58,000 --> 00:09:01,760
We're just going to say clip two bounds equals true.

155
00:09:01,780 --> 00:09:07,270
Right now it's bleeding off the edge because the default behavior was taken off once we implemented

156
00:09:07,270 --> 00:09:08,290
draw recked here.

157
00:09:08,440 --> 00:09:08,800
OK.

158
00:09:08,860 --> 00:09:09,920
No big deal.

159
00:09:10,420 --> 00:09:11,240
Let's run it again.

160
00:09:11,270 --> 00:09:13,120
See how it looks beautiful.

161
00:09:13,120 --> 00:09:16,750
So yeah I mean the designer we talked about he likes I like it.

162
00:09:16,750 --> 00:09:22,060
And now whatever country you're from is going to have its proper currency symbol and you know our app

163
00:09:22,060 --> 00:09:26,790
is working you know to 0 8 that's the hourly wage we want.

164
00:09:26,830 --> 00:09:29,770
Let's say we make $50 an hour because we're high roller.

165
00:09:29,770 --> 00:09:34,340
And then the item price is you know $2000 and 50 cents.

166
00:09:34,360 --> 00:09:36,330
I don't know what it costs that's like.

167
00:09:36,580 --> 00:09:38,570
You know that's like the iPad 15.

168
00:09:38,590 --> 00:09:40,730
The new one it's like a 50 inch screen.

169
00:09:40,730 --> 00:09:42,130
You know it's $2000.

170
00:09:42,340 --> 00:09:43,680
It's absolutely phenomenal.

171
00:09:43,680 --> 00:09:45,450
It's going to change your life.

172
00:09:45,460 --> 00:09:47,920
OK so let's calculate it.

173
00:09:48,070 --> 00:09:51,430
So it's going take 41 hours to get this you know iPad 15.

174
00:09:51,430 --> 00:09:56,480
But you know Apple's sold you on the Kool-Aid and you're going to buy it.

175
00:09:56,740 --> 00:10:01,290
And so it's clear the calculator will say well it's a new car.

176
00:10:01,420 --> 00:10:07,660
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

177
00:10:08,730 --> 00:10:09,470
car.

178
00:10:09,610 --> 00:10:10,520
Nissan JTR.

179
00:10:10,540 --> 00:10:14,600
So we can get it for you know ninety five thousand dollars to get a used one.

180
00:10:14,600 --> 00:10:18,240
So 0 0 0 make 25 bucks an hour.

181
00:10:18,520 --> 00:10:21,980
So I'd only have to work 30 100 hours to get my JTR.

182
00:10:22,270 --> 00:10:27,130
So the good news about this calculator is it can help you burst your dreams in a moment's notice just

183
00:10:27,130 --> 00:10:30,340
by putting in the actual numbers in there because you know you worked for stuff and you're like I'm

184
00:10:30,340 --> 00:10:30,920
going to get it.

185
00:10:31,140 --> 00:10:33,400
But you never actually run the math when you're in the math.

186
00:10:33,430 --> 00:10:34,270
Reality sets in.

187
00:10:34,270 --> 00:10:40,750
So you're probably more suited for let's say a Honda Civic a used Honda Civic.

188
00:10:40,750 --> 00:10:44,510
So you know we're looking at you on a civic and get it for like eight grand.

189
00:10:44,530 --> 00:10:45,230
There you go.

190
00:10:45,340 --> 00:10:48,260
Twenty hours that's about it's kind of like a GDR.

191
00:10:48,850 --> 00:10:49,360
Not really.

192
00:10:49,360 --> 00:10:55,780
So anyway our app is working we got beautiful a custom label here with the currency.

193
00:10:55,910 --> 00:10:57,120
Is looking really fantastic.

194
00:10:57,120 --> 00:10:58,440
So you did a great job.

195
00:10:58,450 --> 00:10:59,990
Let's recap what we've learned.

196
00:11:00,160 --> 00:11:06,640
So in this section we have learned how to write unit tests which are basically it's code that tests

197
00:11:06,640 --> 00:11:09,150
code and we should always run unit tests.

198
00:11:09,160 --> 00:11:12,580
And in fact we were bad because we didn't run this before we finished let's run this.

199
00:11:12,580 --> 00:11:18,970
Now make sure that we have green checkmarks always run unit tests before you ship a product for sure

200
00:11:19,600 --> 00:11:24,760
before you even test send out a test build or test flight or however you do it always run your tests

201
00:11:24,790 --> 00:11:25,230
OK.

202
00:11:25,300 --> 00:11:26,860
These are working that's great.

203
00:11:26,860 --> 00:11:28,630
So you learn how to build unit tests.

204
00:11:28,630 --> 00:11:33,850
You also learned how to work with Cousin textfield and how to work with be desirable so things that

205
00:11:33,850 --> 00:11:40,180
you code inside the custom class actually show up in the interface which is awesome because you learn

206
00:11:40,180 --> 00:11:41,070
how to do that.

207
00:11:41,290 --> 00:11:47,440
You learn how to create a custom label by hand and put it in the draw recked function and then how to

208
00:11:47,440 --> 00:11:52,650
add it onto the screen and place its position which is really cool stuff.

209
00:11:53,170 --> 00:11:55,110
You learn how to attribute strings.

210
00:11:55,210 --> 00:12:01,770
You learned how to basically build a full scale application that has multiple components to it.

211
00:12:02,040 --> 00:12:04,330
We've got good protective code here.

212
00:12:04,660 --> 00:12:08,620
Really good stuff here so this is this is fantastic.

213
00:12:08,620 --> 00:12:10,180
Good job pat yourself on the back.

214
00:12:10,180 --> 00:12:10,870
You've done a lot.

215
00:12:10,870 --> 00:12:13,440
So we're going to call this video and this app done.

216
00:12:13,540 --> 00:12:14,320
That's it.

217
00:12:14,500 --> 00:12:15,850
Let's move on and forward.

218
00:12:15,850 --> 00:12:17,200
Mark Price does slopes.

219
00:12:17,240 --> 00:12:17,950
Dot.com.

220
00:12:17,950 --> 00:12:18,680
See you next time.