en/subtitles/5. Drawing.srt

﻿1
00:00:00,401 --> 00:00:04,403
[MUSIC]                         

2
00:00:04,472 --> 00:00:09,340
Stanford University.            
>> All right, well,             

3
00:00:09,409 --> 00:00:13,878
welcome to Lecture 5 then of    
CS193P this Fall of 2017.       

4
00:00:13,947 --> 00:00:16,981
So I'm gonna take just a few    
minutes of the beginning here   

5
00:00:17,050 --> 00:00:19,818
to go over just a couple of     
more little Swift things.       

6
00:00:19,887 --> 00:00:21,786
These are actually in your      
reading assignment for          

7
00:00:21,855 --> 00:00:25,090
this week. So I'm really        
just kinda emphasizing these    

8
00:00:25,158 --> 00:00:28,693
things, then we're gonna dive   
into our main topic today       

9
00:00:28,762 --> 00:00:33,098
which is views, drawings, how   
you do custom drawing in iOS.   

10
00:00:33,166 --> 00:00:36,968
And I'm gonna start with a      
huge demo, the only thing I'm   

11
00:00:37,037 --> 00:00:40,872
gonna probably be able to do    
today is the model of our MVC.  

12
00:00:40,940 --> 00:00:43,408
But that's gonna allow me to    
show you an example of enum,    

13
00:00:43,477 --> 00:00:45,677
which we didn't get to          
work into concentration.        

14
00:00:45,746 --> 00:00:49,981
So you only theoretically know  
enum, and we'll be actually do  

15
00:00:50,050 --> 00:00:53,918
enum. All right, so let's do    
these little minor things.      

16
00:00:53,987 --> 00:00:56,455
One of them is error            
handling in Swift.              

17
00:00:56,523 --> 00:00:58,757
Now, a lot of times             
you'll have an error and        

18
00:00:58,825 --> 00:01:01,626
it will be something that       
kind of, could be expected or   

19
00:01:01,695 --> 00:01:04,596
anticipated. You know, you do   
something over the network and  

20
00:01:04,664 --> 00:01:06,131
there might be                  
a network time out,             

21
00:01:06,200 --> 00:01:07,599
that's kind of a normal error.  

22
00:01:07,668 --> 00:01:10,135
If you have that kind of        
error, you likely would have    

23
00:01:10,204 --> 00:01:12,136
an argument to                  
the function that goes and      

24
00:01:12,205 --> 00:01:15,507
does that network call. Maybe   
it's even a closure that calls  

25
00:01:15,575 --> 00:01:19,177
you back and said, I found      
this somewhat expected error.   

26
00:01:19,246 --> 00:01:22,513
But sometimes you have errors   
that you don't expect or        

27
00:01:22,582 --> 00:01:25,783
that are kind of rare, and      
really disrupt the usage of     

28
00:01:25,852 --> 00:01:30,021
a method or whatever.           
And in that kind of error,      

29
00:01:30,090 --> 00:01:33,057
instead of having to have one   
of your arguments be an error   

30
00:01:33,126 --> 00:01:35,927
handler or returning an error,  
or something like that.         

31
00:01:35,996 --> 00:01:39,030
You can do something that's     
called throwing an error.       

32
00:01:39,099 --> 00:01:39,998
Now, in other languages,        

33
00:01:40,067 --> 00:01:42,300
you might think of this as      
like raising exceptions or      

34
00:01:42,369 --> 00:01:44,469
something like that.            
It's a little simpler and       

35
00:01:44,537 --> 00:01:47,372
more elegant when you design    
in Swift. It's as simple as     

36
00:01:47,441 --> 00:01:50,174
this, a method that could       
get an error, okay,             

37
00:01:50,243 --> 00:01:53,578
a significant error that would  
disrupt what it's doing,        

38
00:01:53,647 --> 00:01:56,848
can decide that it throws       
errors. And you see these       

39
00:01:56,917 --> 00:01:59,417
methods very clearly because    
when they're declared, they'll  

40
00:01:59,486 --> 00:02:03,555
have the word throws at         
the end. So this function save  

41
00:02:03,623 --> 00:02:07,025
throws. Okay, if it gets an     
error, it throws this error.    

42
00:02:07,094 --> 00:02:11,263
Now, when it throws an error    
at you, you need to catch it.   

43
00:02:11,331 --> 00:02:12,998
Okay, and                       
you catch this error and        

44
00:02:13,066 --> 00:02:15,066
then you can look at it and     
decide what to do. So           

45
00:02:15,135 --> 00:02:18,036
how do you catch an error       
that has thrown? Well,          

46
00:02:18,105 --> 00:02:22,674
you do that by putting this do  
catch construct around your     

47
00:02:22,743 --> 00:02:27,345
call to the method that might   
throw. And you say, try, in     

48
00:02:27,414 --> 00:02:31,382
front of the call. So you're    
going to try this method        

49
00:02:31,451 --> 00:02:34,552
that it might throw. But since  
you've put it inside this do,   

50
00:02:34,621 --> 00:02:37,322
catch thing, that thing you     
see up there, you're going to   

51
00:02:37,390 --> 00:02:40,292
catch that error. Okay, so      
it's as simple as that.         

52
00:02:40,361 --> 00:02:43,161
So, any method that throws      
has to be called with try.      

53
00:02:43,229 --> 00:02:45,897
Okay, you have to let Swift     
know I understand that this     

54
00:02:45,966 --> 00:02:47,666
can throw, and so               
I'm trying it.                  

55
00:02:47,734 --> 00:02:50,168
But it doesn't necessarily      
have to be kept, caught,        

56
00:02:50,237 --> 00:02:53,638
and I'll show you in a second   
how to do it without catching.  

57
00:02:53,707 --> 00:02:56,474
If you do wanna catch,          
then you do this do catch, and  

58
00:02:56,543 --> 00:02:59,778
in the catch you notice         
there's the green, let error.   

59
00:02:59,847 --> 00:03:02,914
Okay, that little error thing,  
it's just a local variable.     

60
00:03:02,983 --> 00:03:05,517
That's the thing that           
gets thrown at you, okay,       

61
00:03:05,585 --> 00:03:08,353
when it throws an error.        
And it's going to be            

62
00:03:08,421 --> 00:03:12,190
something that implements       
the protocol error, but         

63
00:03:12,259 --> 00:03:14,259
there's actually nothing        
in that protocol.               

64
00:03:14,328 --> 00:03:17,262
It just identifies, it's just   
typing this thing as error.     

65
00:03:17,330 --> 00:03:20,732
Now, in iOS when things,        
errors gets thrown at you,      

66
00:03:20,801 --> 00:03:23,234
there almost always             
going to be NSErrors.           

67
00:03:23,303 --> 00:03:26,271
So an NSError is just a class,  
it implements the Error         

68
00:03:26,340 --> 00:03:29,741
protocol which is to say that,  
that nothing in particular.     

69
00:03:29,810 --> 00:03:32,277
But NSError has a lot of        
nice methods and vars,          

70
00:03:32,346 --> 00:03:35,213
like the error code, even       
a localized description of      

71
00:03:35,282 --> 00:03:37,582
the error that you could        
present to a user,              

72
00:03:37,651 --> 00:03:40,752
for example. So the way this    
goes is if you had a function   

73
00:03:40,821 --> 00:03:41,686
save that throws,               

74
00:03:41,755 --> 00:03:44,155
you're gonna go looking         
in its documentation and        

75
00:03:44,224 --> 00:03:47,693
see what kind of NSError stuff  
it can throw. And it'll throw   

76
00:03:47,761 --> 00:03:50,127
certain errors like save,       
the save maybe it's for         

77
00:03:50,196 --> 00:03:52,964
saving into a database and the  
disk is full, so the database   

78
00:03:53,033 --> 00:03:55,333
couldn't save so maybe          
there's an error code for       

79
00:03:55,402 --> 00:03:58,169
disk full or whatever. So this  
is what you do if you want to   

80
00:03:58,238 --> 00:04:00,906
catch a thrown error and        
kind of handle it, look at it,  

81
00:04:00,974 --> 00:04:05,410
see what it is, decide what     
to do. But you can just say,    

82
00:04:05,479 --> 00:04:09,814
try!, and what that means is,   
try this and                    

83
00:04:09,883 --> 00:04:12,583
if it throws crash my app.      
Now,                            

84
00:04:12,652 --> 00:04:15,887
you would only do this if       
you were 100% certain that,     

85
00:04:15,956 --> 00:04:19,323
that thing could not throw in   
the circumstance that you're    

86
00:04:19,392 --> 00:04:22,627
doing, which is extremely       
rare, so we rarely do try!.     

87
00:04:22,696 --> 00:04:27,365
But a better one if you don't   
care about the error is try?.   

88
00:04:27,434 --> 00:04:32,370
So try?, means please try this  
and if it throws, don't crash,  

89
00:04:32,439 --> 00:04:36,441
but just ignore the fact        
that it threw. So               

90
00:04:36,510 --> 00:04:37,509
this is kind of like try and    

91
00:04:37,578 --> 00:04:40,445
ignore. Now the interesting     
thing is, you might be calling  

92
00:04:40,513 --> 00:04:44,382
a function that returns a       
value. An int that can throw.   

93
00:04:44,451 --> 00:04:47,184
So here I've got my error       
prone function that returns     

94
00:04:47,253 --> 00:04:52,089
an int, okay, and so what if I  
wanna try it with try?. Well,   

95
00:04:52,158 --> 00:04:55,560
if it succeeds, I need that     
int back. But if it fails,      

96
00:04:55,629 --> 00:05:00,198
I can't get the int back. So    
what happens when you do try?,  

97
00:05:00,266 --> 00:05:04,102
it changes the return value     
essentially, of the function    

98
00:05:04,170 --> 00:05:07,405
to be an optional version       
of that value. So               

99
00:05:07,474 --> 00:05:09,974
if you have an error prone      
function returns an int and     

100
00:05:10,043 --> 00:05:13,144
you try? it, and you let it     
equal something, you know,      

101
00:05:13,213 --> 00:05:16,347
let x equal that. This x now    
becomes an optional int,        

102
00:05:16,416 --> 00:05:19,117
because if it throws,           
it's gonna give you             

103
00:05:19,185 --> 00:05:21,786
nil. If it doesn't throw,       
you'll get the normal x value   

104
00:05:21,855 --> 00:05:25,756
that error prone function that  
returns an int, returns. Okay?  

105
00:05:25,825 --> 00:05:28,426
So that's error handling.       
There's not a lot of methods    

106
00:05:28,495 --> 00:05:31,596
that throw in iOS there, in     
there occasionally. You know,   

107
00:05:31,665 --> 00:05:33,965
you might have a typical app,   
maybe you have three or         

108
00:05:34,034 --> 00:05:36,601
four of them, somewhere.        
They're fairly rare but         

109
00:05:36,670 --> 00:05:39,137
you got to know how to handle   
them. So these are the ways to  

110
00:05:39,205 --> 00:05:43,708
handle them. All right, I       
wanna circle back now to Any.   

111
00:05:43,777 --> 00:05:45,309
This type Any that we saw with  

112
00:05:45,378 --> 00:05:49,113
NSAttributedString dictionary.  
There's another one called any  

113
00:05:49,182 --> 00:05:52,550
object which is exact the same  
as Any, it's just for classes   

114
00:05:52,619 --> 00:05:55,820
only, and the object is         
the any of classes only. And    

115
00:05:55,889 --> 00:05:58,856
I told you that Any means, you  
don't know what type it is,     

116
00:05:58,925 --> 00:06:02,360
it could be any type. And       
we also know that that's not    

117
00:06:02,428 --> 00:06:06,597
very Swifty, and cuz Swift is   
strongly tight. So Any and      

118
00:06:06,666 --> 00:06:09,601
AnyObject are in there for      
compatible with Objective-C.    

119
00:06:09,670 --> 00:06:12,870
Objective-C had a very          
important type called ID which  

120
00:06:12,939 --> 00:06:16,775
was essentially any and it was  
built in to all of the APIs.    

121
00:06:16,843 --> 00:06:19,777
So when Swift came along and    
tried to be strongly typed,     

122
00:06:19,846 --> 00:06:22,213
it had to have this             
one concession. So              

123
00:06:22,281 --> 00:06:25,483
we don't use as I've said,      
any in our own code, it's for   

124
00:06:25,552 --> 00:06:29,554
backwards compatibility.        
So variables of type any could  

125
00:06:29,622 --> 00:06:34,960
hold any type. Structs,         
enums, classes, anything.       

126
00:06:35,028 --> 00:06:39,096
And the problem though is,      
you can't send any messages to  

127
00:06:39,165 --> 00:06:42,600
something of type Any, because  
you don't, in your code,        

128
00:06:42,669 --> 00:06:45,537
know what it is. Okay?          
Now, Swift, under the covers,   

129
00:06:45,606 --> 00:06:48,172
might know what it is, but      
since you've typed it Any,      

130
00:06:48,241 --> 00:06:51,042
it's assuming you don't want    
to send any messages to it      

131
00:06:51,110 --> 00:06:54,712
that you don't know what        
it is. So, how do we            

132
00:06:54,781 --> 00:06:57,381
deal with that case in Swift    
where we got the strongly type  

133
00:06:57,450 --> 00:06:59,250
language, we can't send         
a message to Any. Well,         

134
00:06:59,318 --> 00:07:03,287
we got to convert it. Now,      
let's talk about where you're   

135
00:07:03,356 --> 00:07:06,391
gonna see it, you already saw   
it in NSAttributedString case,  

136
00:07:06,460 --> 00:07:08,159
right? Well,                    
we have that dictionary.        

137
00:07:08,228 --> 00:07:11,796
Another place you will see it   
is arguments to methods. So     

138
00:07:11,864 --> 00:07:13,364
here is a method                
called prepare for              

139
00:07:13,433 --> 00:07:16,667
segue. It's a UIView            
controller method, right?       

140
00:07:16,736 --> 00:07:18,069
You all know what               
a UIView controller is?         

141
00:07:18,137 --> 00:07:20,705
We made one for                 
concentration. And              

142
00:07:20,774 --> 00:07:24,709
I talked about when we do MVCs  
and we have multiple MVCs, and  

143
00:07:24,778 --> 00:07:28,246
they own a whole screen. Well,  
we sometimes transition from    

144
00:07:28,315 --> 00:07:31,682
one MVC together, to another.   
And this prepare for segue,     

145
00:07:31,751 --> 00:07:34,785
a segue is a transition from    
one MVC to the other, this      

146
00:07:34,854 --> 00:07:38,490
gets called in a view control   
when transition happens. Well,  

147
00:07:38,558 --> 00:07:41,993
one of the arguments to it      
there at the end is sender of   

148
00:07:42,062 --> 00:07:46,564
type Any?. Okay, an optional    
Any. And that's basically       

149
00:07:46,633 --> 00:07:51,269
what button cause this MVC      
transfer to a new MVC so.       

150
00:07:51,338 --> 00:07:54,072
So it could well be a button    
that, that sender is but        

151
00:07:54,141 --> 00:07:56,608
it can also happen if you       
click on a row in a table       

152
00:07:56,676 --> 00:08:00,445
view. So that's not a button,   
that's a table view. Cell,      

153
00:08:00,513 --> 00:08:02,980
okay, or it could happen        
from something else.            

154
00:08:03,049 --> 00:08:06,050
It could even happen by code,   
in which case this is a nil.    

155
00:08:06,119 --> 00:08:09,220
So that's why you need Any      
right there, because you're     

156
00:08:09,288 --> 00:08:12,057
not sure whether it was a       
button or a table you cell or   

157
00:08:12,125 --> 00:08:15,025
something else that caused      
this thing to happen. So        

158
00:08:15,094 --> 00:08:19,097
you'll see it as arguments, a   
case very rarely to a function  

159
00:08:19,166 --> 00:08:23,201
like this where you can kinda   
pass anything in there,. But    

160
00:08:23,270 --> 00:08:27,439
how are we gonna use this       
Any stuff? Okay, let's say      

161
00:08:27,507 --> 00:08:30,241
a button was passed on your     
table, how do I know what it    

162
00:08:30,309 --> 00:08:33,310
is and talk to it, and all      
that when it's this Any thing.  

163
00:08:33,379 --> 00:08:37,816
Okay, before I show you how to  
do it, of course don't use Any  

164
00:08:37,884 --> 00:08:41,319
in this course except for to    
do backwards compatible call    

165
00:08:41,388 --> 00:08:44,823
APIs. You don't have your own   
data structures would not be    

166
00:08:44,892 --> 00:08:47,492
use Any. Some people            
try to use Any when             

167
00:08:47,561 --> 00:08:49,561
they basically don't know how   
to design a data structure,     

168
00:08:49,630 --> 00:08:51,395
and they're like,               
I'll just make this an Any,     

169
00:08:51,464 --> 00:08:52,396
an array of Any and             

170
00:08:52,465 --> 00:08:53,965
I'll just start throwing        
random things in there.         

171
00:08:54,034 --> 00:08:57,535
No, we don't do that, okay,     
that's not, Swift. All right,   

172
00:08:57,604 --> 00:09:01,039
so now how do I use Any.        
I have to convert it to a type  

173
00:09:01,107 --> 00:09:04,609
that I do know, since I can't   
send any messages or vars,      

174
00:09:04,678 --> 00:09:07,011
I have to convert it.           
And we convert it,              

175
00:09:07,080 --> 00:09:09,847
with a special keyword and      
Swift called as,                

176
00:09:09,916 --> 00:09:14,385
as question mark. And what      
as does, is it just tries to    

177
00:09:14,453 --> 00:09:18,056
convert that any to the type    
you specify and if it can't,    

178
00:09:18,124 --> 00:09:21,326
it returns a nil. That's        
why it's as question mark.      

179
00:09:21,394 --> 00:09:23,894
And it's as simple as that.     
So here's an example,           

180
00:09:23,963 --> 00:09:25,262
it's best learn                 
by example here.                

181
00:09:25,331 --> 00:09:29,934
Let's say, I have a var called  
unknown, which of type Any, so  

182
00:09:30,003 --> 00:09:32,237
I don't know what's Any.        
It could be anything in there,  

183
00:09:32,305 --> 00:09:36,941
and I think that that thing     
in unknown might be of type,    

184
00:09:37,009 --> 00:09:40,244
MyType. I'm not sure but I      
think it might be might type.   

185
00:09:40,313 --> 00:09:44,982
So I'm gonna say if I can let   
foo, which is a new variable,   

186
00:09:45,051 --> 00:09:50,055
equal unknown as MyType.        
Then inside there,              

187
00:09:50,123 --> 00:09:53,391
I can send messages to foo      
that MyType understands,        

188
00:09:53,460 --> 00:09:56,460
right? So I've just             
converted unknown into          

189
00:09:56,529 --> 00:10:00,565
a new variable of type MyType,  
if possible by using as.        

190
00:10:00,634 --> 00:10:02,567
And you can see this is nice,   
it reads like English.          

191
00:10:02,636 --> 00:10:05,703
If I can let foo equal          
unknown as MyType,              

192
00:10:05,772 --> 00:10:09,674
then I'm going to use it        
as MyType. So that's it,        

193
00:10:09,743 --> 00:10:12,844
it's very simple,               
that's how we access Any. And   

194
00:10:12,912 --> 00:10:15,413
if it wasn't, if unknown        
was of some other type and      

195
00:10:15,481 --> 00:10:17,381
couldn't be                     
interpreted as MyType,          

196
00:10:17,450 --> 00:10:20,217
then this the curly braces,     
that stuff doesn't happen.      

197
00:10:20,286 --> 00:10:22,253
You could even say else,        
and something else, and         

198
00:10:22,322 --> 00:10:24,522
something else would happen,    
that would be fine too.         

199
00:10:24,591 --> 00:10:27,258
Now this casting of             
As is not just for              

200
00:10:27,327 --> 00:10:31,295
Any, we can also cast other     
things. Why, why else would we  

201
00:10:31,364 --> 00:10:35,533
ever want to cast? Well one     
classic one to cast, is to      

202
00:10:35,601 --> 00:10:40,771
cast from the variable type     
to one of its subclasses. So    

203
00:10:40,840 --> 00:10:44,409
let's look an example of that.  
So here I have a variable vc,   

204
00:10:44,478 --> 00:10:48,612
very importantly it's of        
type UIViewController.          

205
00:10:48,681 --> 00:10:51,916
In other words the iOS class,   
UIViewController that's         

206
00:10:51,985 --> 00:10:55,720
the type of vc. Now I'm         
setting it equal to creating    

207
00:10:55,788 --> 00:10:59,357
a ConcentrationViewController,  
which is a subclass, let's      

208
00:10:59,426 --> 00:11:03,294
say, of UIViewController.       
Now the type vc,                

209
00:11:03,362 --> 00:11:06,163
even though I assign to it      
a ConcentrationViewController,  

210
00:11:06,232 --> 00:11:08,432
that type is still              
UIViewController not            

211
00:11:08,501 --> 00:11:10,567
ConcentrationViewController.    
That's not its type,            

212
00:11:10,636 --> 00:11:13,938
its type is UIViewController.   
But this is a legal statement,  

213
00:11:14,007 --> 00:11:15,740
because of course               
a ConcentrationViewController   

214
00:11:15,808 --> 00:11:18,776
inherits from                   
UIViewController, and that is   

215
00:11:18,845 --> 00:11:22,346
a UIViewController. Now if      
I wanted to send flipCard,      

216
00:11:22,415 --> 00:11:26,117
lets say that was a method in   
ConcentrationViewController,    

217
00:11:26,186 --> 00:11:30,355
to vc I could not do that. It   
would not even compile, why?    

218
00:11:30,423 --> 00:11:32,790
Because vc is subtype           
UIViewController, and           

219
00:11:32,859 --> 00:11:36,127
the class UIViewController      
doesn't have flipCard.          

220
00:11:36,196 --> 00:11:38,596
ConcentrationViewController     
has it, but                     

221
00:11:38,664 --> 00:11:41,499
not UIViewController.           
So people get confused about    

222
00:11:41,568 --> 00:11:43,668
this, it's kind of like back    
when we're talking about        

223
00:11:43,737 --> 00:11:45,203
the protocols and               
I had things to move.           

224
00:11:45,271 --> 00:11:47,805
And it was of type movable,     
and I had a car in there and    

225
00:11:47,874 --> 00:11:50,675
I want it to send a change oil  
and people were like, why not?  

226
00:11:50,743 --> 00:11:53,978
Well, because the variable was  
typed to be a movable, and      

227
00:11:54,047 --> 00:11:56,914
movables didn't know how        
to change oil, cars do.         

228
00:11:56,983 --> 00:11:59,517
This is the same kind of thing  
here, exactly the same thing    

229
00:11:59,586 --> 00:12:02,954
just with inheritance           
instead of protocols. So        

230
00:12:03,022 --> 00:12:05,623
what if I did wanna send        
flipCard to vc, how             

231
00:12:05,691 --> 00:12:08,959
would I do it or I can cast     
with any in exact same way?     

232
00:12:09,028 --> 00:12:13,064
I can say, if I let some        
new variable called cvc,        

233
00:12:13,133 --> 00:12:15,866
ConcentrationViewController     
equal the vc                    

234
00:12:15,935 --> 00:12:18,202
as a                            
ConentrationViewController.     

235
00:12:18,271 --> 00:12:21,706
Now cvc is                      
a ConcentrationViewController,  

236
00:12:21,775 --> 00:12:25,743
I can send it flipCard.         
So same way I did with Any,     

237
00:12:25,812 --> 00:12:27,512
I'm checking to see             
if it's possible for            

238
00:12:27,580 --> 00:12:31,983
this var to be converted,       
in this case downcasted.        

239
00:12:32,052 --> 00:12:35,086
This is called downcasted, to   
a subclass of that thing, so    

240
00:12:35,155 --> 00:12:39,456
I can interact with it as       
that subclass. Same thing       

241
00:12:39,525 --> 00:12:42,026
happen here with protocols, we  
could do that same thing with   

242
00:12:42,095 --> 00:12:45,997
the car in the movable.         
We could had a movable var and  

243
00:12:46,066 --> 00:12:49,600
try to cast it as a car.        
And if you were successful,     

244
00:12:49,668 --> 00:12:52,803
then we can send a change oil.  
But if it was a shape and       

245
00:12:52,872 --> 00:12:54,939
that failed,                    
we would return nil and         

246
00:12:55,008 --> 00:12:57,074
we would not be able to do it.  
So                              

247
00:12:57,143 --> 00:13:01,045
you're gonna see us doing this  
casting not as much with Any,   

248
00:13:01,113 --> 00:13:04,382
some with Any, but a lot        
of time just down casting.      

249
00:13:04,451 --> 00:13:07,985
Because we have some function   
that takes some super class     

250
00:13:08,054 --> 00:13:10,588
and we pass a down              
cast subclass into it.          

251
00:13:10,657 --> 00:13:13,424
And we're gonna down cast       
it to look at the subclass      

252
00:13:13,493 --> 00:13:16,694
in case it is that subclass,    
then we can send it messages.   

253
00:13:16,763 --> 00:13:17,762
All right, so that's it for     

254
00:13:17,831 --> 00:13:18,763
Any and Castings object.        

255
00:13:18,831 --> 00:13:21,566
The last last slide that I      
have here before we dive in to  

256
00:13:21,634 --> 00:13:25,136
views, is just four other       
interesting classes that        

257
00:13:25,205 --> 00:13:28,940
you should know about in        
foundation. One is NSObject.    

258
00:13:29,009 --> 00:13:33,278
NSObject is the root            
class of all classes from       

259
00:13:33,346 --> 00:13:37,649
Objective-C. All the things     
like UIViewController,          

260
00:13:37,717 --> 00:13:40,217
all the UI kit classes,         
all those things that were      

261
00:13:40,286 --> 00:13:42,453
developed in                    
the Objective-C world, and      

262
00:13:42,521 --> 00:13:45,757
are compatible still with       
Objective-C. Their root class,  

263
00:13:45,825 --> 00:13:48,726
the thing they inherit from     
eventually at the top,          

264
00:13:48,795 --> 00:13:52,964
is NSObject. In Swift, no       
requirement to subclass from    

265
00:13:53,032 --> 00:13:58,169
NSObject, although there's      
a few tiny esoteric APIs that   

266
00:13:58,237 --> 00:14:00,938
ask you to pass a class in,     
that has to implement           

267
00:14:01,006 --> 00:14:03,841
NSObject. And I'll explain      
them to you when we get to it,  

268
00:14:03,910 --> 00:14:06,778
but normally your Swift class,  
like remember concentration     

269
00:14:06,846 --> 00:14:09,613
that class, we originally made  
it. It didn't inherit from      

270
00:14:09,682 --> 00:14:11,949
NSObject. It didn't             
inherit from anything.          

271
00:14:12,018 --> 00:14:13,951
When it was a class, we         
converted it to struct later.   

272
00:14:14,020 --> 00:14:15,920
And that's perfectly            
legal in Swift,                 

273
00:14:15,988 --> 00:14:17,722
that was not true               
in Objective-C.                 

274
00:14:17,791 --> 00:14:20,958
In Objective-C pretty much      
all classes had to inherit      

275
00:14:21,027 --> 00:14:24,428
from NSObject, because some     
of the runtime was built into   

276
00:14:24,497 --> 00:14:27,832
this class rather than being    
in the actual runtime like it   

277
00:14:27,900 --> 00:14:31,302
is in Swift. Okay, second       
interesting class is NSNumber,  

278
00:14:31,370 --> 00:14:34,605
in Objective-C when you pass    
numbers around you actually     

279
00:14:34,674 --> 00:14:36,140
pass them with this class.      

280
00:14:36,209 --> 00:14:39,076
NSNumber, it's a class so       
it's a reference type.          

281
00:14:39,145 --> 00:14:42,480
You didn't have double and      
int as classes.                 

282
00:14:42,548 --> 00:14:45,683
You had C like doubles and      
ints in Objective-C, but        

283
00:14:45,751 --> 00:14:48,819
you didn't have that. So if     
you wanted to pass something    

284
00:14:48,888 --> 00:14:51,789
in an object oriented way, you  
had to pass this NSNumnber.     

285
00:14:51,857 --> 00:14:54,592
Now it can represent any kind   
of number, floating point       

286
00:14:54,660 --> 00:14:57,695
number, integer, anything.      
It's a kind of a generic        

287
00:14:57,764 --> 00:15:00,831
number holder, even a boolean   
it can hold in there.           

288
00:15:00,900 --> 00:15:04,469
Now it's really awesome is all  
the API throughout iOS that     

289
00:15:04,537 --> 00:15:07,872
takes an NSNumber and there's   
a lot of it, automatically      

290
00:15:07,941 --> 00:15:12,943
bridged to the Swift types.     
So if you have an Objective-C   

291
00:15:13,012 --> 00:15:15,980
based API somewhere in iOS      
that takes a number as          

292
00:15:16,049 --> 00:15:19,383
an argument, you can pass a     
double in there. Or an int, or  

293
00:15:19,452 --> 00:15:22,587
whatever it's expecting,        
whatever it's supposed to be.   

294
00:15:22,656 --> 00:15:24,221
You don't even tell,            
you won't even know,            

295
00:15:24,290 --> 00:15:26,390
you won't even see NSNumber     
because the documentation       

296
00:15:26,459 --> 00:15:29,560
is already being converted      
as well to show you.            

297
00:15:29,629 --> 00:15:32,129
And similar, when things        
come out, if something comes    

298
00:15:32,198 --> 00:15:33,798
out of the API as an NSNumber,  

299
00:15:33,866 --> 00:15:36,534
you can work on it as           
a double or an int, or          

300
00:15:36,603 --> 00:15:40,571
whatever is appropriate and     
it work just fine. But I just   

301
00:15:40,640 --> 00:15:42,740
mentioned in case you see it    
and wonder, what is that?       

302
00:15:42,809 --> 00:15:45,710
Is this old Objective-C         
generic number holder?          

303
00:15:45,778 --> 00:15:47,645
It's easy to see create         
one from a double or            

304
00:15:47,714 --> 00:15:49,580
int by just using               
an initializer, right?          

305
00:15:49,649 --> 00:15:52,482
NSNumbers sub 35.5,             
that's gonna give you           

306
00:15:52,551 --> 00:15:55,085
an NSNumber with                
the double 35.5 in it.          

307
00:15:55,154 --> 00:15:58,189
And you can get the values out  
with vars on the number like    

308
00:15:58,258 --> 00:16:02,026
intValue, doubleValue,          
boolValue, they will give you.  

309
00:16:02,095 --> 00:16:05,563
The return in a Swift           
type double, int, bool or       

310
00:16:05,632 --> 00:16:08,932
whatever. Okay, Date.           
Some of you already know about  

311
00:16:09,001 --> 00:16:11,669
Date because you did the extra  
credit maybe, in assignments 1  

312
00:16:11,737 --> 00:16:14,939
or 2. Date is just a way to     
represent any date and time.    

313
00:16:15,008 --> 00:16:17,842
You know internally it's        
represented, I think,           

314
00:16:17,910 --> 00:16:21,712
like Number of seconds since    
1970 or something like that.    

315
00:16:21,781 --> 00:16:24,281
It's great for doing that,      
it's great for even small       

316
00:16:24,350 --> 00:16:27,384
amounts of time because the     
date includes the time down to  

317
00:16:27,453 --> 00:16:30,655
small you know,                 
sub millisecond times.          

318
00:16:30,723 --> 00:16:32,323
But I just want you to note     
that with date there's          

319
00:16:32,391 --> 00:16:34,925
other classes that go along     
with it like Calendar,          

320
00:16:34,994 --> 00:16:38,129
DateFormatter, DateComponents.  
DateComponents will give        

321
00:16:38,198 --> 00:16:40,497
you things like the month and   
things like that. And           

322
00:16:40,566 --> 00:16:44,034
why are there all those other   
classes? Well because date,     

323
00:16:44,103 --> 00:16:46,603
if you're gonna put it in       
your UI, you have to be very    

324
00:16:46,672 --> 00:16:50,607
careful. Around the world,      
dates are represented very,     

325
00:16:50,676 --> 00:16:53,744
very differently, and it's not  
just that the name of a month   

326
00:16:53,813 --> 00:16:56,013
is different in                 
a different language.           

327
00:16:56,082 --> 00:17:00,651
It's that other locale,         
we call them around the world,  

328
00:17:00,720 --> 00:17:03,521
use completely different kinds  
of dating systems. Maybe even   

329
00:17:03,590 --> 00:17:07,191
a completely different          
calendar than we use. So        

330
00:17:07,260 --> 00:17:09,293
you really have to be careful   
if you're gonna put date in     

331
00:17:09,361 --> 00:17:11,562
your UI to understand all       
of these other classes.         

332
00:17:11,630 --> 00:17:13,564
And there is plenty of          
documentation how to do it.     

333
00:17:13,632 --> 00:17:16,033
But, and it is extra work.      
Now if you're just using date   

334
00:17:16,102 --> 00:17:17,835
internally to like              
keep track of how               

335
00:17:17,904 --> 00:17:21,338
long your Concentration move,   
or set game move is taking,     

336
00:17:21,407 --> 00:17:24,208
obviously you don't need any    
of that other stuff. And        

337
00:17:24,276 --> 00:17:28,679
finally there's data.           
Data is just a bag of bits,     

338
00:17:28,748 --> 00:17:33,351
we use it to transfer data      
around a lot inside iOS API.    

339
00:17:33,419 --> 00:17:36,087
For example if we got           
an image from the Internet,     

340
00:17:36,155 --> 00:17:39,323
from some URL, it would come    
in as a big bag of bits. And    

341
00:17:39,392 --> 00:17:40,858
we have classes like UI image,  

342
00:17:40,926 --> 00:17:42,293
which I'm gonna                 
talk about today.               

343
00:17:42,362 --> 00:17:43,627
That can look into              
the bag a bit and               

344
00:17:43,696 --> 00:17:46,697
say, that's jpeg data and       
make an image out of it. Or     

345
00:17:46,765 --> 00:17:49,900
look into a bag of bits, you    
know we have formatters that    

346
00:17:49,969 --> 00:17:54,004
look and say that's json data.  
Good, who knows what JSON is,   

347
00:17:54,073 --> 00:17:55,439
raise your hand if you've       
heard of JSON, okay,            

348
00:17:55,508 --> 00:17:58,909
great. So that's JSON data, we  
interpret it as JSON data. So   

349
00:17:58,978 --> 00:18:00,577
that's what this                
data struct is,                 

350
00:18:00,646 --> 00:18:03,347
it's just a bag of bits, and    
there's lots of methods to      

351
00:18:03,416 --> 00:18:07,117
convert it to and from other    
kinds of things. That's it, so  

352
00:18:07,186 --> 00:18:09,253
that's all I wanted to mention  
is those quick things.          

353
00:18:09,321 --> 00:18:12,289
Now we can dive into our        
main topic today which is       

354
00:18:12,358 --> 00:18:15,392
a really cool one,              
which is Views. All right, so   

355
00:18:15,461 --> 00:18:18,562
I don't want you to be          
confused about the word view.   

356
00:18:18,631 --> 00:18:21,966
I'm using it in two contexts.   
One is MVC.                     

357
00:18:22,034 --> 00:18:26,003
One of the letters there is     
V for view. That means that     

358
00:18:26,071 --> 00:18:30,107
bunch of generic minions of     
your controller. That View,     

359
00:18:30,176 --> 00:18:33,377
capital V View,                 
contains a lot of views.        

360
00:18:33,446 --> 00:18:37,381
These views that I'm talking    
about, and what by these        

361
00:18:37,450 --> 00:18:41,652
Views, I mean a subclass of     
the iOS class UI view. So       

362
00:18:41,721 --> 00:18:44,588
that's what we're talking       
about today is these Views,     

363
00:18:44,657 --> 00:18:46,857
these things in an MVC's view.  
Sorry for                       

364
00:18:46,926 --> 00:18:50,060
the terminology being           
the same there but same word,   

365
00:18:50,129 --> 00:18:53,564
somewhat different meanings     
there. So what is a view?       

366
00:18:53,633 --> 00:18:56,433
What is a sub class of UIView?  
It's essentially just           

367
00:18:56,502 --> 00:18:59,703
a rectangle on screen that      
defines a coordinate,           

368
00:18:59,772 --> 00:19:00,637
a coordinate system. And        

369
00:19:00,706 --> 00:19:02,372
this is a coordinate system     
you're gonna use to draw, and   

370
00:19:02,441 --> 00:19:03,841
it's also a coordinate          
system for                      

371
00:19:03,909 --> 00:19:05,843
getting multi-touch events,     
right,                          

372
00:19:05,911 --> 00:19:09,546
with the fingers on             
the screen. It's hierarchical,  

373
00:19:09,615 --> 00:19:12,182
which means these rectangles    
live inside other rectangles,   

374
00:19:12,251 --> 00:19:13,584
live inside other rectangles,   
right?                          

375
00:19:13,653 --> 00:19:15,252
So the views inside             
views inside views.             

376
00:19:15,321 --> 00:19:16,987
And you saw this                
with Concentration.             

377
00:19:17,056 --> 00:19:19,824
We had that top-level           
view which was black, and       

378
00:19:19,892 --> 00:19:22,660
then inside that                
we had stack view.              

379
00:19:22,729 --> 00:19:24,762
Remember that?                  
So that was another view.       

380
00:19:24,831 --> 00:19:28,165
Inside that stack view were     
three more stack views.         

381
00:19:28,234 --> 00:19:31,201
Inside those three sections     
were four card buttons. So      

382
00:19:31,270 --> 00:19:34,405
as the UI buttons, right. Plus  
you had other views like your   

383
00:19:34,473 --> 00:19:37,975
new game button, score, flip    
count, those are all views.     

384
00:19:38,043 --> 00:19:40,044
And they are all kind           
of in each, you know,           

385
00:19:40,112 --> 00:19:41,779
in a hierarchical               
representation.                 

386
00:19:41,848 --> 00:19:45,382
So the way that if you look     
at a particular view and        

387
00:19:45,451 --> 00:19:47,084
you wanna see who               
its superview is,               

388
00:19:47,153 --> 00:19:50,154
in other words the view it's    
in. You just ask the view for   

389
00:19:50,223 --> 00:19:53,490
the var superview. Okay.        
Now, it's an optional UIView    

390
00:19:53,559 --> 00:19:56,793
because it might not currently  
be on screen, right? So, it     

391
00:19:56,862 --> 00:20:00,230
might not be in a superview at  
this time. You could certainly  

392
00:20:00,299 --> 00:20:02,799
add it. And then the other way  
around if you have a view and   

393
00:20:02,868 --> 00:20:05,235
you wanna say, what are all     
the subviews in it?             

394
00:20:05,304 --> 00:20:07,971
Like you wanna ask              
our blackview where,            

395
00:20:08,040 --> 00:20:11,842
show me all your subviews like  
this top level stackview and    

396
00:20:11,911 --> 00:20:14,912
the flip count, label and       
the score, and the new game     

397
00:20:14,980 --> 00:20:18,815
button. You get that with       
another view var called         

398
00:20:18,884 --> 00:20:22,452
subviews, which is, as you can  
see, an array of UIView. Okay,  

399
00:20:22,521 --> 00:20:27,524
so it's very simple to manage   
this. There is also a UI        

400
00:20:27,593 --> 00:20:31,362
window which is like way up at  
the top, but we never pay any   

401
00:20:31,430 --> 00:20:34,998
attention to that in iOS. It's  
not like the Mac where you      

402
00:20:35,067 --> 00:20:37,701
have lots of windows on         
a big desktop. The UIWindow,    

403
00:20:37,769 --> 00:20:40,637
the only time you probably      
ever care about that maybe if   

404
00:20:40,706 --> 00:20:43,340
you had an app that like        
projected part of itself out    

405
00:20:43,409 --> 00:20:47,278
onto external screen or         
something. But forget that. So  

406
00:20:47,346 --> 00:20:50,147
in this class we won't          
even mention UIWindow.          

407
00:20:50,216 --> 00:20:51,982
It's probably subclass          
UIView anyway,                  

408
00:20:52,050 --> 00:20:55,886
but we don't really talk about  
it. Now this hierarchy of       

409
00:20:55,955 --> 00:20:59,723
views inside views, you build   
in Xcode in interface builder.  

410
00:20:59,792 --> 00:21:02,392
Right, you saw how we           
built in Concentration,         

411
00:21:02,461 --> 00:21:05,762
we drag things out, we clicked  
the embed stack view button,    

412
00:21:05,831 --> 00:21:08,632
that kind of staff. So that's   
how we build this hierarchy,    

413
00:21:08,701 --> 00:21:11,802
put views inside views          
99% of the time.                

414
00:21:11,871 --> 00:21:14,404
But it can be done in code as   
well. And in your assignment    

415
00:21:14,473 --> 00:21:16,907
3, I am gonna ask you to do     
both. Build view hierarchy in   

416
00:21:16,975 --> 00:21:19,543
an interface builder like you   
did in concentration. But       

417
00:21:19,612 --> 00:21:21,812
then also do some in code,      
as well. And                    

418
00:21:21,881 --> 00:21:25,416
the way you do that is by just  
saying addSubview to a view,    

419
00:21:25,484 --> 00:21:29,486
and it will add that view       
as one of the subviews.         

420
00:21:29,555 --> 00:21:33,557
The only tricky thing here is   
when you wanna pull it out for  

421
00:21:33,625 --> 00:21:34,875
If you wanna pull a view        
out of the view hierarchy,      

422
00:21:34,876 --> 00:21:36,126
some reason.                    

423
00:21:36,195 --> 00:21:38,629
you send that message           
to the view itself.             

424
00:21:38,698 --> 00:21:41,298
Okay, you send it to the view,  
you want to remove and          

425
00:21:41,366 --> 00:21:44,067
you say remove yourself from    
superview, with this remove     

426
00:21:44,136 --> 00:21:46,536
from superview. So              
it's a little different there.  

427
00:21:46,605 --> 00:21:49,806
You send add to the enclosing   
view but you send               

428
00:21:49,875 --> 00:21:54,411
remove to the actual view       
itself. Now where does this     

429
00:21:54,480 --> 00:21:57,447
view hierarchy starts. What's   
the top containing view?        

430
00:21:57,516 --> 00:22:01,284
Well of course that's like the  
black view in concentration,    

431
00:22:01,353 --> 00:22:05,422
right, that very top view. And  
there is a very important var,  

432
00:22:05,490 --> 00:22:10,161
in UIView controller,           
called view.                    

433
00:22:10,229 --> 00:22:12,796
And that view points to         
that black one at the top.      

434
00:22:12,864 --> 00:22:14,364
And it's automatically          
wired up for                    

435
00:22:14,433 --> 00:22:18,002
you in interface builder, so    
you can always start there and  

436
00:22:18,070 --> 00:22:19,870
kinda of work your way down     
through the hierarchy,          

437
00:22:19,939 --> 00:22:22,740
looking at the sub-views and    
going on down. So               

438
00:22:22,808 --> 00:22:25,809
var view which is a UIView,     
in UIView controller,           

439
00:22:25,878 --> 00:22:29,779
very important var to know if   
you want to access your view    

440
00:22:29,848 --> 00:22:32,816
hierarchy directly. Now of      
course, you can also access     

441
00:22:32,885 --> 00:22:36,920
your view hierarchy at any      
point with an outlet. Right,    

442
00:22:36,989 --> 00:22:39,523
if you create an outlet         
like to a stack view,           

443
00:22:39,591 --> 00:22:41,291
now you can look right          
at the stack view, and          

444
00:22:41,360 --> 00:22:43,594
then start looking at its       
subviews if you want,           

445
00:22:43,663 --> 00:22:46,430
you don't have to start at the  
top and start looking down.     

446
00:22:46,498 --> 00:22:48,932
You can use an outlet,          
just go to any view you want    

447
00:22:49,001 --> 00:22:53,337
at any time. All right,         
let's talk a little bit about   

448
00:22:53,406 --> 00:22:56,874
initializing a view, right?     
Getting initialized. Normally,  

449
00:22:56,942 --> 00:23:00,310
as usual, we try to avoid       
doing init as much as we can,   

450
00:23:00,379 --> 00:23:04,548
with all those other ways we    
know. If you have to do a view  

451
00:23:04,616 --> 00:23:07,384
initializer cuz you just,       
a var that you just no way you  

452
00:23:07,452 --> 00:23:10,253
can initialize it using all     
the other ways we know. Then    

453
00:23:10,322 --> 00:23:13,424
you have to understand that     
view has two initializers,      

454
00:23:13,492 --> 00:23:16,927
init with frame and init with   
coder. Init with frame is       

455
00:23:16,995 --> 00:23:19,930
the initializer you usd         
to create a view in code.       

456
00:23:19,998 --> 00:23:23,200
Init with coder is the          
initializer that's used when    

457
00:23:23,269 --> 00:23:26,070
you build your view in          
an interface builder and        

458
00:23:26,138 --> 00:23:29,473
it gets free stride and then    
your app runs. When it runs,    

459
00:23:29,542 --> 00:23:32,943
it gets initialized with        
init with coder. The coder,     

460
00:23:33,012 --> 00:23:36,246
NSCoder is a protocol that      
handles this mechanism of       

461
00:23:36,315 --> 00:23:38,849
freeze drying with              
interface builder and           

462
00:23:38,918 --> 00:23:42,186
then re, resurrecting it        
when your app runs. So          

463
00:23:42,254 --> 00:23:44,020
you have to implement           
of both of these. And           

464
00:23:44,089 --> 00:23:45,288
the reason you have             
to implement both               

465
00:23:45,357 --> 00:23:47,791
of these is cuz init with       
frame is a designated           

466
00:23:47,859 --> 00:23:51,561
initializer, okay. And so if    
you ever created a view from    

467
00:23:51,630 --> 00:23:55,198
code, you need, if you want     
your code to execute, it's      

468
00:23:55,267 --> 00:23:59,336
gonna have to do it. And then   
init with coder is a required   

469
00:23:59,404 --> 00:24:02,339
initializer because it's part   
of a protocol that UIView       

470
00:24:02,408 --> 00:24:05,676
implements, this NSCoder        
protocol you see. Remember,     

471
00:24:05,744 --> 00:24:08,278
if you employ a protocol and    
it has an init in it,           

472
00:24:08,347 --> 00:24:11,715
it's required, okay. So you'd   
have to implement them both.    

473
00:24:11,784 --> 00:24:13,950
Now you can have some other     
function like set up or         

474
00:24:14,019 --> 00:24:17,053
whatever and call that setup    
from them both. Although,       

475
00:24:17,122 --> 00:24:20,490
sometimes it's not that simple  
because if you're using         

476
00:24:20,559 --> 00:24:23,027
this mechanism to initialize    
your own vars, you're supposed  

477
00:24:23,095 --> 00:24:26,263
to initialize your own vars     
before you call super.init.     

478
00:24:26,332 --> 00:24:29,833
Okay, so you are gonna have to  
initialize those vars inside    

479
00:24:29,902 --> 00:24:32,402
these inits. Maybe you might    
have slightly duplicated        

480
00:24:32,471 --> 00:24:34,304
code there, doing that.         
But hopefully,                  

481
00:24:34,372 --> 00:24:39,409
you can avoid this init in      
UIView entirely. Okay, another  

482
00:24:39,478 --> 00:24:42,946
alternative to initializing     
the UIView is awakeFromNib().   

483
00:24:43,015 --> 00:24:45,682
Now awakeFromNib() is           
actually a function,            

484
00:24:45,751 --> 00:24:48,652
that is sent to every single    
object that comes out of        

485
00:24:48,721 --> 00:24:50,988
an interbase face               
builder file.                   

486
00:24:51,057 --> 00:24:53,223
Every UI button,                
every UIView controller,        

487
00:24:53,292 --> 00:24:56,526
everything that comes out of    
there, when it gets unfreezed,  

488
00:24:56,595 --> 00:24:59,162
it gets sent awakeFromNib().    
Now the only thing about        

489
00:24:59,231 --> 00:25:01,965
putting initialization there    
is, it will only work for       

490
00:25:02,034 --> 00:25:04,768
views that come out of          
an interface builder file.      

491
00:25:04,837 --> 00:25:07,704
If you create a view with       
init when framed from code,     

492
00:25:07,773 --> 00:25:10,974
if you created one,             
this won't get called. Okay,    

493
00:25:11,042 --> 00:25:15,178
this only happens when you      
get unfreeze write interface.   

494
00:25:15,247 --> 00:25:19,649
NIB is kind of really old name  
for interface builder files,    

495
00:25:19,718 --> 00:25:24,087
the IB and NIB meant            
interface builder. Okay, so     

496
00:25:24,156 --> 00:25:25,955
that's it for initialization    
of views. All right,            

497
00:25:26,024 --> 00:25:28,591
now let's talk about how we     
draw. We have this UIView.      

498
00:25:28,660 --> 00:25:30,260
Why do we want it?              
Well, we wanna draw.            

499
00:25:30,328 --> 00:25:32,963
How do we draw? Before I        
can tell you how to draw,       

500
00:25:33,032 --> 00:25:34,631
we've got to talk               
about some types,               

501
00:25:34,699 --> 00:25:38,468
four very important types.      
Okay, they all start with CG,   

502
00:25:38,537 --> 00:25:42,906
like this one, CGFloat.         
CG stands for Core Graphics.    

503
00:25:42,974 --> 00:25:46,710
Core Graphics is the            
underlying drawing system for   

504
00:25:46,779 --> 00:25:49,680
normal 2D drawing in iOS.       
There are other                 

505
00:25:49,748 --> 00:25:54,151
drawing systems for doing 3D    
and other things. Not gonna     

506
00:25:54,219 --> 00:25:55,986
talk about those cuz we only    
have so much to talk about.     

507
00:25:56,054 --> 00:25:59,056
We're just gonna talk about     
the base 2D drawing system,     

508
00:25:59,124 --> 00:26:03,127
and it's called core graphics.  
So core graphics has these      

509
00:26:03,195 --> 00:26:06,029
four types, they're just        
critical to be in the say       

510
00:26:06,098 --> 00:26:09,800
anything about drawing, one     
is CGFloat. So all drawing is   

511
00:26:09,868 --> 00:26:13,970
in an accordance system that's  
floating point numbers. So      

512
00:26:14,039 --> 00:26:16,139
you're drawing in a floating    
point coordinate system,        

513
00:26:16,208 --> 00:26:17,841
not integers,                   
they're floating points.        

514
00:26:17,910 --> 00:26:20,443
When you say where you wanna    
draw, your every point you're   

515
00:26:20,512 --> 00:26:22,479
just dealing with floating      
point numbers. And for          

516
00:26:22,548 --> 00:26:24,648
those floating point            
numbers have to be CGFloat.     

517
00:26:24,716 --> 00:26:29,018
They cannot be doubles or       
regular float, they have to be  

518
00:26:29,087 --> 00:26:32,889
CGFloats. Luckily, there's      
an initializer for CGFloat.     

519
00:26:32,958 --> 00:26:37,127
We'll let you create            
a CGFloat from a double, but    

520
00:26:37,196 --> 00:26:41,698
CGFloat is the fundamental,     
kind of coordinate value,       

521
00:26:41,766 --> 00:26:45,268
a floating point co-ordinate    
value. All drawing, all your    

522
00:26:45,337 --> 00:26:50,107
code that's drawing is gonna    
have CGFloats. Now, of course,  

523
00:26:50,175 --> 00:26:53,276
there is CGPoint, which is      
just a struct with two things   

524
00:26:53,345 --> 00:26:57,314
in it, x and y, which are both  
CGFloats. And there's CGSize,   

525
00:26:57,383 --> 00:27:00,650
which is a struct that has two  
things in it, two CGFloats,     

526
00:27:00,719 --> 00:27:04,688
width and height. Okay, so you  
got float, CGFloat the base     

527
00:27:04,756 --> 00:27:07,490
thing, then you got point and   
size. And of course,            

528
00:27:07,559 --> 00:27:11,962
you can combine point and size  
into very important CGRect.     

529
00:27:12,031 --> 00:27:16,166
Now CGRect is just finds        
a rectangle obviously,          

530
00:27:16,235 --> 00:27:18,936
including your views entire     
bounds, that rectangle or       

531
00:27:19,004 --> 00:27:21,338
any rectangle you wanna draw    
inside your quadrant system     

532
00:27:21,407 --> 00:27:25,008
you're gonna use this. And it   
has a number of initializers    

533
00:27:25,077 --> 00:27:27,043
including initializing          
by origin and size.             

534
00:27:27,112 --> 00:27:29,346
Also intializer that takes      
xy width, height, etc.          

535
00:27:29,415 --> 00:27:32,749
And it also has a whole         
slew of other vars and          

536
00:27:32,818 --> 00:27:37,353
functions for manipulating      
rects, like vars like minX,     

537
00:27:37,422 --> 00:27:41,992
which gives you the minimum     
x value of your rectangle.      

538
00:27:42,061 --> 00:27:44,828
Or, intersects that             
takes another rect and          

539
00:27:44,897 --> 00:27:48,131
returns a bool whether          
the two rectangles intersect.   

540
00:27:48,200 --> 00:27:51,268
There's also intersect          
which returns a new rect        

541
00:27:51,336 --> 00:27:55,005
which is the intersection of    
two overlapping rectangles.     

542
00:27:55,074 --> 00:27:57,608
It also has contains CGPoint,   
which will tell you whether     

543
00:27:57,676 --> 00:28:00,343
there's a point, that is        
point is inside CGRect. So      

544
00:28:00,412 --> 00:28:03,280
there's tons, this probably     
two or three dozens methods so  

545
00:28:03,349 --> 00:28:05,716
definitely check out            
the documentation CGRect,       

546
00:28:05,784 --> 00:28:08,451
because it'll make your code    
a lot cleaner. And actually,    

547
00:28:08,520 --> 00:28:10,353
you're gonna see in the demo    
that I do on Wednesday.         

548
00:28:10,422 --> 00:28:13,290
I actually even extend CGRect   
to add five or six more         

549
00:28:13,358 --> 00:28:16,627
a little convenience functions  
because CGRect turned out       

550
00:28:16,695 --> 00:28:20,263
to be so important in all       
the code that you write.        

551
00:28:20,332 --> 00:28:23,901
When you're doing drawing. So   
now you know those four types,  

552
00:28:23,969 --> 00:28:26,636
let's talk about the            
coordinate system we're gonna   

553
00:28:26,705 --> 00:28:30,306
be drawing in here. The most    
important thing to know         

554
00:28:30,375 --> 00:28:34,444
besides the fact that it's      
floating point precision to     

555
00:28:34,513 --> 00:28:38,415
draw is that the origin is      
in the upper left, not lower    

556
00:28:38,484 --> 00:28:41,184
Left. The lower left would      
be Cartesian coordinates,       

557
00:28:41,253 --> 00:28:43,653
you know, like you have in      
Math class. Lower left alk,     

558
00:28:43,722 --> 00:28:46,589
also happens to be the          
coordinate system on the Mac,   

559
00:28:46,658 --> 00:28:49,159
okay. But in iOS,               
it's in the upper left,         

560
00:28:49,228 --> 00:28:53,363
and that means that increasing  
values of y go down towards     

561
00:28:53,432 --> 00:28:57,033
the bottom of the screen. So    
for example, I got this point   

562
00:28:57,102 --> 00:29:00,971
over here on the side there.    
See it up there, 500, 35.       

563
00:29:01,039 --> 00:29:05,409
It's 500 over and 35 down,      
right, way over and way down.   

564
00:29:05,477 --> 00:29:08,979
So that's x of 500, and it      
actually really would be 500.0  

565
00:29:09,047 --> 00:29:13,917
and 35.0 cuz they're floating   
point values, right? Okay,      

566
00:29:13,986 --> 00:29:18,455
the unit in this coordinate     
system are called points.       

567
00:29:18,523 --> 00:29:21,724
Points are not                  
the same as pixels.             

568
00:29:21,793 --> 00:29:25,261
Pixels are the little dots      
that the screen is made of.     

569
00:29:25,330 --> 00:29:29,666
Some screens have a lot         
of little pixels, very,         

570
00:29:29,735 --> 00:29:33,169
very high resolution,           
what we call Retina Displays.   

571
00:29:33,238 --> 00:29:36,272
You've probably heard that      
phrase. Lots of pixels per      

572
00:29:36,341 --> 00:29:40,209
point. Why is that good? Well,  
because remember you can draw   

573
00:29:40,278 --> 00:29:44,614
on floating point boundaries,   
so you can draw at 27.3, 27.6,  

574
00:29:44,683 --> 00:29:48,552
28, right? You could be         
drawing in between points. And  

575
00:29:48,620 --> 00:29:50,520
you get these very              
smooth curves or                

576
00:29:50,589 --> 00:29:54,090
whatever on a Retina Display.   
On a lower res display,         

577
00:29:54,159 --> 00:29:57,027
maybe there's only one pixel    
per every point, and so         

578
00:29:57,095 --> 00:30:01,131
it's kind of more jaggy when    
you draw. But you don't draw    

579
00:30:01,199 --> 00:30:03,366
on pixel boundaries,            
you draw on point boundaries.   

580
00:30:03,435 --> 00:30:06,136
That way, even if you had       
a lot of pixels per point,      

581
00:30:06,205 --> 00:30:09,006
it looks the same size          
basically as on a lower         

582
00:30:09,074 --> 00:30:12,875
resolution device. Okay, it's   
not as smooth as on a high      

583
00:30:12,944 --> 00:30:16,412
resolution device but it's the  
same size cuz it's zoom point.  

584
00:30:16,481 --> 00:30:19,716
You can find out how many       
pixels per point your device    

585
00:30:19,784 --> 00:30:23,053
has by using UIView content     
scale.factor who turns          

586
00:30:23,122 --> 00:30:26,589
a float, it's currently         
gonna either be one, two, or    

587
00:30:26,658 --> 00:30:29,493
three. And it's gonna tell you  
how many pixels are are there   

588
00:30:29,561 --> 00:30:34,097
per point. All right,           

589
00:30:34,165 --> 00:30:38,434
the most important rectangle    
in all of UIView is bounds,     

590
00:30:38,503 --> 00:30:41,871
it's var on UIView to CGRect.   
It tells you the bounds,        

591
00:30:41,940 --> 00:30:44,941
the coordinates of your         
drawing system, the origin and  

592
00:30:45,010 --> 00:30:48,612
the width and height in your    
own drawing coordinate system.  

593
00:30:48,681 --> 00:30:50,447
And one thing you have          
to understand is,               

594
00:30:50,515 --> 00:30:53,883
different views have            
different coordinate systems.   

595
00:30:53,952 --> 00:30:56,619
Okay, they each have their      
own coordinate system,          

596
00:30:56,688 --> 00:30:59,789
this bounds is in yours.        
So when you're drawing,         

597
00:30:59,858 --> 00:31:03,226
you always use bounds. Now      
there are a couple of other     

598
00:31:03,294 --> 00:31:08,064
things like frame. Var frame,   
sounds a lot like bounds.       

599
00:31:08,133 --> 00:31:12,902
Frame has nothing to do         
with your drawing. Nothing,     

600
00:31:12,971 --> 00:31:15,472
it's a Rect, but has nothing    
to do with your drawing.        

601
00:31:15,540 --> 00:31:19,643
The frame is where you          
are in your superview.          

602
00:31:19,711 --> 00:31:21,811
So frame this not even in       
your coordinates system,        

603
00:31:21,880 --> 00:31:23,814
in it's your superview's        
coordinate system.              

604
00:31:23,883 --> 00:31:26,650
Says, where you are?            
Similar with center.            

605
00:31:26,718 --> 00:31:30,253
Center is not the center        
of your drawing area, it's      

606
00:31:30,321 --> 00:31:34,357
the center of view in your      
superview. So frame in center   

607
00:31:34,426 --> 00:31:39,362
are, where you are? Bounds      
is the place you're drawing.    

608
00:31:39,431 --> 00:31:42,332
Don't get these things          
confused. I have a slide down   

609
00:31:42,401 --> 00:31:44,400
here, go through it quick,      
we never use frame or           

610
00:31:44,469 --> 00:31:46,836
center to draw because it has   
nothing to do with drawing,     

611
00:31:46,905 --> 00:31:48,171
it has to do with positioning.  

612
00:31:48,240 --> 00:31:50,773
And you might think that        
the frame and the bounds        

613
00:31:50,842 --> 00:31:54,711
are gonna be the same size,     
but views can be rotated. And   

614
00:31:54,779 --> 00:31:57,747
if you imagine rotating your    
view, the bounds get rotated    

615
00:31:57,815 --> 00:32:01,651
with, okay, so they stay the    
same size, but the frame now    

616
00:32:01,719 --> 00:32:05,922
has to get bigger. To totally   
enclose this because it's       

617
00:32:05,991 --> 00:32:09,960
a diamond shaped, right, View   
B is a diamond shape. Okay, so  

618
00:32:10,028 --> 00:32:12,829
the frames' sized-out width     
and height are not the same     

619
00:32:12,897 --> 00:32:15,531
necessarily as the bounds'      
sized width and height.         

620
00:32:15,600 --> 00:32:17,433
Don't ever think of             
them as the same.               

621
00:32:17,502 --> 00:32:20,369
If you ever use your frame      
to draw in this class,          

622
00:32:20,438 --> 00:32:22,639
you'll get dinged,              
that is just wrong.             

623
00:32:25,677 --> 00:32:27,376
All right, so now we know       
the bounds of where we          

624
00:32:27,445 --> 00:32:29,412
are drawing. We know we have    
this coordinate system in       

625
00:32:29,481 --> 00:32:32,582
the upper left. How do we       
create one of these views?      

626
00:32:32,651 --> 00:32:33,850
Okay, we wanna create one.      
Well,                           

627
00:32:33,919 --> 00:32:36,987
I told you that you mostly do   
it in Interface Builder, but    

628
00:32:37,055 --> 00:32:39,890
if I have a custom view. Let's  
say I have a custom view,       

629
00:32:39,958 --> 00:32:42,024
draw something                  
special to just me.             

630
00:32:42,093 --> 00:32:45,295
How do I drag that out into     
Interface Builder? Right,       

631
00:32:45,363 --> 00:32:48,031
Interface Builder's got that    
nice list in the lower right    

632
00:32:48,099 --> 00:32:51,534
corner of UIButton, UILabel,    
all those cool things.          

633
00:32:51,603 --> 00:32:54,403
My view's not gonna be there,   
right?                          

634
00:32:54,472 --> 00:32:57,774
So how do I make one? Well,     
it turns out you drag out       

635
00:32:57,842 --> 00:33:01,078
a generic one. Currently,       
as of this my speaking,         

636
00:33:01,146 --> 00:33:04,213
it's the second from            
the bottom in that long list.   

637
00:33:04,282 --> 00:33:06,983
It's called UIView down there.  
You drag a generic one out and  

638
00:33:07,052 --> 00:33:09,319
then you're going to inspect    
it, but you're gonna use        

639
00:33:09,387 --> 00:33:11,654
a little different inspector    
in the upper right than you     

640
00:33:11,723 --> 00:33:13,857
usually do. It's not            
the Attributes Inspector,       

641
00:33:13,925 --> 00:33:16,225
it's the Identity Inspector.    
I think it's the tab,           

642
00:33:16,294 --> 00:33:18,828
just one to the left of         
the Attributes Inspector. And   

643
00:33:18,897 --> 00:33:20,697
in there,                       
the top thing is going          

644
00:33:20,765 --> 00:33:23,532
to be the class of the thing    
you're inspecting and           

645
00:33:23,601 --> 00:33:26,202
it's gonna be UIView when you   
first drag it out. And you're   

646
00:33:26,271 --> 00:33:29,906
just going to change the pull   
down there to pick your class.  

647
00:33:29,975 --> 00:33:32,575
So now you have a view there,   
but it's of your class.         

648
00:33:32,644 --> 00:33:37,247
That's how you're gonna create  
one of your custom views. Now,  

649
00:33:37,316 --> 00:33:39,516
the other way you can           
create views is in code.        

650
00:33:39,584 --> 00:33:42,051
And again, I'm gonna ask you    
to do this both ways in your    

651
00:33:42,120 --> 00:33:45,622
assignment three. And you do    
that just by calling the frame  

652
00:33:45,691 --> 00:33:49,826
UIView with frame initializer   
that we talked about before.    

653
00:33:49,895 --> 00:33:52,762
You can also set UIView         
open parenthesis, close         

654
00:33:52,831 --> 00:33:56,533
parenthesis, then your frame    
will be 0000, upper left,       

655
00:33:56,601 --> 00:33:59,769
no size. And you can then       
just set that frame var,        

656
00:33:59,837 --> 00:34:02,706
that I talked about a couple    
slides ago, to position and     

657
00:34:02,775 --> 00:34:06,075
size, this view in              
the super view. Okay,           

658
00:34:06,144 --> 00:34:07,744
just always remember            
the frame, though,              

659
00:34:07,813 --> 00:34:09,078
is in the super view's          
coordinate system,              

660
00:34:09,147 --> 00:34:10,713
it's saying where you are.      

661
00:34:10,782 --> 00:34:11,747
Nothing to do with              
your drawing,                   

662
00:34:11,816 --> 00:34:15,251
just where you are.             
Okay, so here's an example.     

663
00:34:15,320 --> 00:34:18,722
I'm gonna create a UILabel      
encode. Okay, UILabel, you      

664
00:34:18,790 --> 00:34:21,191
know what that is, right? It    
shows text, that's the thing    

665
00:34:21,259 --> 00:34:24,026
that said flipped colon 0,      
that was a UILabel. Of course,  

666
00:34:24,095 --> 00:34:26,062
UILabel inherits from UIView.   

667
00:34:26,130 --> 00:34:29,032
It's a rectangular area on      
screen. All rectangular areas   

668
00:34:29,101 --> 00:34:33,002
on screen are UIViews. So, I'm  
gonna create a rectangle to     

669
00:34:33,071 --> 00:34:35,539
say where it's gonna be.        
This rectangle is gonna be in   

670
00:34:35,607 --> 00:34:37,640
the super view's coordinate     
system. In this case,           

671
00:34:37,709 --> 00:34:39,475
I'm gonna put the label         
at the very top level.          

672
00:34:39,544 --> 00:34:42,912
In other words, the black view  
of Concentration, I'm putting   

673
00:34:42,981 --> 00:34:46,049
it right over that level. So    
this 20 across and 20 down and  

674
00:34:46,118 --> 00:34:49,686
a width of 100 and height of    
50, that's in the black views,  

675
00:34:49,754 --> 00:34:53,122
the top level views coordinate  
system. And then I created      

676
00:34:53,191 --> 00:34:57,426
a UILabel using that frame. I   
set the label's text to hello.  

677
00:34:57,495 --> 00:35:00,163
Nothing's happening on          
screen right there, yeah.       

678
00:35:00,231 --> 00:35:03,032
Now, I need to add it as a      
subview of that black view, so  

679
00:35:03,101 --> 00:35:05,835
I'm gonna assume this code      
is in a view controller and     

680
00:35:05,904 --> 00:35:08,104
I'm gonna use that              
very special var view.          

681
00:35:08,173 --> 00:35:12,708
And say, view, add subview      
this label. Now that            

682
00:35:12,777 --> 00:35:15,778
UI label gets added as a        
subview of the top level view,  

683
00:35:15,847 --> 00:35:17,146
the black view in               
concentration,                  

684
00:35:17,215 --> 00:35:19,582
it's white here, and            
it gets put at 20, 20,          

685
00:35:19,650 --> 00:35:24,988
150 in that top level views     
coordinate system. Remember,    

686
00:35:25,056 --> 00:35:28,591
upper left is 00. So, that      
means down from the upper left  

687
00:35:28,659 --> 00:35:32,695
corner. Everybody got that?     
So that's how you add view,     

688
00:35:32,764 --> 00:35:35,965
it's very easy just add         
subview. That's how you put     

689
00:35:36,033 --> 00:35:39,735
view on screen on code. All     
right, so when would I wanna    

690
00:35:39,804 --> 00:35:42,605
create my own UIView subclass   
versus just using UIButton or   

691
00:35:42,674 --> 00:35:44,841
UILabel?                        
Those are UIView subclasses.    

692
00:35:44,909 --> 00:35:47,477
Well, if I obviously want       
to do custom drawing or         

693
00:35:47,545 --> 00:35:49,913
if I want to handle some        
custom touch events,            

694
00:35:49,982 --> 00:35:51,714
pinches or                      
something like that.            

695
00:35:51,783 --> 00:35:55,085
I'll talk about handling touch  
events on Wednesday, but        

696
00:35:55,153 --> 00:35:58,321
today we're gonna focus on      
drawing. So we're going to do   

697
00:35:58,390 --> 00:36:02,859
all drawing today. So to draw,  
it could not be easier,         

698
00:36:02,927 --> 00:36:07,397
there's only one way to draw,   
okay, in all of iOS. Which      

699
00:36:07,466 --> 00:36:12,235
is you override this function   
in UIView and implement it.     

700
00:36:12,304 --> 00:36:15,872
That is the only way to draw.   
You can't call any functions    

701
00:36:15,941 --> 00:36:18,240
that draw or anything           
outside of this method,         

702
00:36:18,309 --> 00:36:21,477
it's the only way to draw.      
So that makes really simple,    

703
00:36:21,546 --> 00:36:23,246
you don't have to worry about   
any other mechanism cuz this    

704
00:36:23,315 --> 00:36:26,516
is the only one there is. And   
so inside this draw method,     

705
00:36:26,585 --> 00:36:28,884
you're going to draw            
in your bounds,                 

706
00:36:28,953 --> 00:36:31,721
whatever custom                 
drawing you do. Okay,           

707
00:36:31,790 --> 00:36:36,359
never call this method ever.    
This method,                    

708
00:36:36,428 --> 00:36:38,762
you override and                
implement your drawing,         

709
00:36:38,830 --> 00:36:42,432
you never call it. If you       
want your view to be redrawn,   

710
00:36:42,500 --> 00:36:45,167
because something about you     
has changed, you call one of    

711
00:36:45,236 --> 00:36:48,237
these two methods on yourself,  
setNeedsDisplay or              

712
00:36:48,306 --> 00:36:50,974
setNeedsDisplay with rect.      
Okay, and                       

713
00:36:51,042 --> 00:36:54,143
that tells the system, hey,     
my view needs to be redrawn,    

714
00:36:54,212 --> 00:36:58,014
please, redraw it.              
So, only the system, only iOS   

715
00:36:58,082 --> 00:37:01,083
calls your draw and you can     
make it call it, or tell it     

716
00:37:01,152 --> 00:37:04,954
you want it to call it anyway,  
by calling setNeedsDisplay.     

717
00:37:05,023 --> 00:37:08,023
Now notice this rect, see       
the draw rect. What is that     

718
00:37:08,092 --> 00:37:11,794
rect argument, both up on draw  
and down in set needs display.  

719
00:37:11,863 --> 00:37:15,898
That is purely an optimization  
rectangle, okay. That's if,     

720
00:37:15,967 --> 00:37:18,501
for example, you had another    
view on top of view and         

721
00:37:18,569 --> 00:37:21,271
it went away and it exposed     
a little rectangle of view,     

722
00:37:21,339 --> 00:37:24,240
the system would call your      
draw with just that rectangle.  

723
00:37:24,309 --> 00:37:27,443
But you are allowed to redraw   
your whole view if you want.    

724
00:37:27,512 --> 00:37:30,012
But if you can be efficient     
about only drawing              

725
00:37:30,081 --> 00:37:31,914
the rectangle                   
that was exposed,               

726
00:37:31,983 --> 00:37:35,051
then you can be efficient. So   
it's purely an optimization.    

727
00:37:35,119 --> 00:37:37,520
You can ignore it if you want,  
just draw your whole view.      

728
00:37:37,588 --> 00:37:40,256
So if you have a simple         
view that's easy to draw,       

729
00:37:40,325 --> 00:37:43,259
doesn't use a lot of resources  
and not 3D graphics or          

730
00:37:43,327 --> 00:37:48,731
something, then you can just    
ignore that rect. All right,    

731
00:37:48,800 --> 00:37:51,400
so how do I implement this      
draw rect? Okay, I overwrite    

732
00:37:51,469 --> 00:37:53,669
it now I want to draw.          
So how are we gonna do it?      

733
00:37:53,738 --> 00:37:56,005
We're gonna do it               
using core graphics,            

734
00:37:56,074 --> 00:37:59,242
this underlie drawing level     
layer. And the basic way        

735
00:37:59,310 --> 00:38:01,944
to do it is, you get what's     
called a drawing context and    

736
00:38:02,013 --> 00:38:04,914
you ask that context            
to draw lines and               

737
00:38:04,983 --> 00:38:08,317
stuff, okay. Now, there's also  
an objects orientated way to    

738
00:38:08,386 --> 00:38:10,353
draw with a class               
called UIBezierPath.            

739
00:38:10,422 --> 00:38:12,788
UIBezierPath, same concept.     

740
00:38:12,857 --> 00:38:15,425
It's just putting a little bit  
of an object or in the way you  

741
00:38:15,494 --> 00:38:17,693
can build an object that        
contains some drawing.          

742
00:38:17,762 --> 00:38:19,862
Which is nice if you wanna      
repeatedly draw that object,    

743
00:38:19,931 --> 00:38:23,199
maybe with different colors,    
whatever. So let's talk about   

744
00:38:23,267 --> 00:38:26,469
the fundamental core concept    
of drawing in core graphics,    

745
00:38:26,537 --> 00:38:27,737
how do we do it?                

746
00:38:27,806 --> 00:38:30,606
The number one thing about      
core graphics is that it's      

747
00:38:30,675 --> 00:38:33,709
context based, so you have to   
get a context. UIBezierPath     

748
00:38:33,778 --> 00:38:35,477
will automatically              
get the context for             

749
00:38:35,546 --> 00:38:37,414
you, but                        
if you don't use UIBezierPath,  

750
00:38:37,482 --> 00:38:39,815
you have to get a context.      
Now, in drawRect,               

751
00:38:39,884 --> 00:38:42,451
you can you use this            
Swift global function,          

752
00:38:42,520 --> 00:38:46,055
UIGraphicsGetCurrentContext     
and it will give you a context  

753
00:38:46,124 --> 00:38:49,992
to draw, okay. But there could  
be other contexts, printing or  

754
00:38:50,061 --> 00:38:51,961
drawing on and                  
off screen buffer,              

755
00:38:52,029 --> 00:38:54,898
I'm not gonna talk about        
those, but there are other      

756
00:38:54,966 --> 00:38:57,300
ways to get context as well.    
But when you're in drawRect,    

757
00:38:57,368 --> 00:38:59,468
it's easy. You just call        
this one global function,       

758
00:38:59,537 --> 00:39:03,005
it will give you the context    
you are currently drawing in.   

759
00:39:03,074 --> 00:39:04,474
Okay, once you                  
have the context,               

760
00:39:04,542 --> 00:39:08,777
now you use the context to      
create what are called paths.   

761
00:39:08,846 --> 00:39:11,981
Paths are just arcs and         
line to's and                   

762
00:39:12,050 --> 00:39:15,184
then move to's, which is        
like jump over a little bit.    

763
00:39:15,253 --> 00:39:19,121
It's just a combination of all  
those, that is what a path is.  

764
00:39:19,190 --> 00:39:21,023
So you're gonna                 
build some path.                

765
00:39:21,092 --> 00:39:24,994
Then, you're gonna set a bunch  
of drawing attributes,          

766
00:39:25,063 --> 00:39:28,931
like the color you want to      
draw in, any fonts, kind of.    

767
00:39:29,000 --> 00:39:31,801
That's a drawing attribute,     
we'll talk about fonts in       

768
00:39:31,870 --> 00:39:34,637
a bit, but line widths,         
textures, things like that.     

769
00:39:34,705 --> 00:39:37,006
You set all those things        
up and then you do one of       

770
00:39:37,075 --> 00:39:41,611
two things with your path, you  
stroke it or you fill it. So,   

771
00:39:41,680 --> 00:39:45,414
stroke it means draw a line     
along my path, you know,        

772
00:39:45,483 --> 00:39:49,519
with a certain line width and   
color, and fill means fill in   

773
00:39:49,587 --> 00:39:54,023
the area that my line           
encloses. Believe it or not,    

774
00:39:54,091 --> 00:39:58,895
this is the only way to draw,   
basically, in.                  

775
00:39:58,963 --> 00:40:01,764
Core graphics and you might     
like, wow, that seems really    

776
00:40:01,833 --> 00:40:04,266
limiting. All I can do is arcs  
and lines and fill them in and  

777
00:40:04,335 --> 00:40:06,902
stroke them, but it's amazing   
what you can do when you build  

778
00:40:06,971 --> 00:40:10,372
on top of that primitive        
powerful mechanisms, okay, and  

779
00:40:10,441 --> 00:40:13,709
we will talk about that.        
So UIBezierPath does the same   

780
00:40:13,778 --> 00:40:16,212
thing, it just does a lot of    
it under the covers but it has  

781
00:40:16,281 --> 00:40:20,083
methods for setting line with,  
and things like that.           

782
00:40:20,151 --> 00:40:22,819
It has method to stroke and     
a method to fill, and           

783
00:40:22,887 --> 00:40:26,923
a methods to do arc to and      
line to and all that thing. So  

784
00:40:26,991 --> 00:40:31,127
it's just a kind of arbitrated  
collecting bag of that. So      

785
00:40:31,196 --> 00:40:33,196
let's look what                 
the code looks like.            

786
00:40:33,265 --> 00:40:35,731
To draw a triangle              
using this mechanism.           

787
00:40:35,800 --> 00:40:39,168
So first time,I will do with    
UIBezierPath. I'm gonna create  

788
00:40:39,237 --> 00:40:41,470
UIBezierPath,it has a lot       
of initialization but           

789
00:40:41,539 --> 00:40:43,973
I'm gonna use the one that      
just create an empty path.      

790
00:40:44,042 --> 00:40:45,941
That create a new,              
there is nothing in it.         

791
00:40:46,010 --> 00:40:48,911
Now I am gonna move around,     
I am gonna start by moving to   

792
00:40:48,980 --> 00:40:51,714
a point you see that            
80 across and 50 down.          

793
00:40:51,783 --> 00:40:55,317
Let us assume that this screen  
is 160 points across and        

794
00:40:55,386 --> 00:40:59,022
you know 300 or 400 high. So    
I am moving halfway across and  

795
00:40:59,090 --> 00:41:02,725
50 points down from the top     
my margin is up on the left.    

796
00:41:02,794 --> 00:41:05,461
Now am gonna add a line         
down to 140 over,               

797
00:41:05,530 --> 00:41:08,364
almost to the edge of           
the screen up there, and        

798
00:41:08,433 --> 00:41:11,834
150 down then I'm gonna add     
another line. You see how       

799
00:41:11,903 --> 00:41:14,671
I'm just calling functions on   
my UIBezierPath to add lines,   

800
00:41:14,739 --> 00:41:17,573
right? So there is another      
one over here. Then I'm gonna   

801
00:41:17,642 --> 00:41:20,944
close my path so there is a     
method in UIBezierPath called   

802
00:41:21,012 --> 00:41:24,447
close which draws a line        
back to where you started,      

803
00:41:24,516 --> 00:41:27,183
whatever that was.              
So, I'm gonna close my path.    

804
00:41:27,251 --> 00:41:28,884
And there's a lot of tons of    
methods in UIbezierPath you     

805
00:41:28,953 --> 00:41:31,554
have to go look at              
the documentation. But here's   

806
00:41:31,623 --> 00:41:34,090
a simple, those are simple      
method usage, right? Now I      

807
00:41:34,158 --> 00:41:36,693
kind of been tricking you       
because you'd look at this and  

808
00:41:36,761 --> 00:41:39,562
it looks like as I called       
these, it draws on screen, but  

809
00:41:39,631 --> 00:41:42,831
no. I just wanted to kind of    
give you visualization what's   

810
00:41:42,900 --> 00:41:46,335
going on. In fact, when I did   
all that, nothing happened on   

811
00:41:46,404 --> 00:41:49,072
screen. There was absolutely    
nothing happening,              

812
00:41:49,140 --> 00:41:51,975
all I was doing was building    
this UIBezierPath object up.    

813
00:41:52,043 --> 00:41:55,010
If I wanna appear on scree      
I have to set my drawing        

814
00:41:55,079 --> 00:41:57,079
attributes and                  
tell it to stoke or fill. So    

815
00:41:57,148 --> 00:42:01,683
let's do that. Now we set our   
colors both our fill color and  

816
00:42:01,752 --> 00:42:06,756
stroking color using            
UIColor class. So               

817
00:42:06,825 --> 00:42:09,191
we don't set it on              
our UIBezierPath,               

818
00:42:09,260 --> 00:42:10,326
we actually use color and       

819
00:42:10,395 --> 00:42:13,095
we say things like              
UIColor.green.setFill.          

820
00:42:13,164 --> 00:42:18,067
Well, green is a static         
var on UIColor,                 

821
00:42:18,136 --> 00:42:20,269
meaning it's a class            
like a class color,             

822
00:42:20,338 --> 00:42:23,873
just like get unique            
identifier was in card. And     

823
00:42:23,941 --> 00:42:26,975
it just gets the green color    
and it has about 10 or          

824
00:42:27,044 --> 00:42:31,514
12 predefined colors, red,      
green, blue, magenta, cyan,     

825
00:42:31,583 --> 00:42:34,016
that kind of stuff.             
We could also make colors.      

826
00:42:34,084 --> 00:42:35,684
We could use a color            
literal there.                  

827
00:42:35,753 --> 00:42:38,454
Remember when we did the color  
literal? Perfectly legal to     

828
00:42:38,522 --> 00:42:42,692
say colorLiteral.setFill. So    
we're setting our fill color    

829
00:42:42,761 --> 00:42:44,794
and our stroke color. So        
we're gonna fill with green.    

830
00:42:44,863 --> 00:42:46,495
Our triangle is gonna be        
filled with green and           

831
00:42:46,564 --> 00:42:48,931
the line is gonna be            
drawn With red and              

832
00:42:49,000 --> 00:42:51,401
I'm also going back to          
the BezierPath and saying,      

833
00:42:51,469 --> 00:42:54,704
set the line with two three     
points wide on a high           

834
00:42:54,772 --> 00:42:58,774
resolutions play that will      
be nine pixels wide. So         

835
00:42:58,843 --> 00:43:01,978
it's a very thick line,         
not that thick that but, so     

836
00:43:02,046 --> 00:43:04,313
now that I have set these       
things up now I can stroke and  

837
00:43:04,382 --> 00:43:06,348
fill. So let us first fill And  

838
00:43:06,417 --> 00:43:08,884
when I feel I get this notice   
there's no line around          

839
00:43:08,953 --> 00:43:12,087
the edge I just get the fill    
of my path that I made.         

840
00:43:12,156 --> 00:43:15,591
And then when I stroke now I    
get the red 3 point wide line   

841
00:43:15,660 --> 00:43:19,162
around. Yeah?                   
>> Where this is                

842
00:43:19,230 --> 00:43:22,932
written?                        
>> Where this is written?       

843
00:43:23,001 --> 00:43:25,401
Like where you put this?        
In your draw rect.              

844
00:43:25,470 --> 00:43:28,337
In that draw method,            
that we override in UIView,     

845
00:43:28,405 --> 00:43:33,709
that's where this code goes.    
>> So, when I drag a UIView     

846
00:43:33,778 --> 00:43:37,046
out to the storyboard, do I     
have to make an outlet to,      

847
00:43:37,115 --> 00:43:38,748
like, have-                     
>> Okay, so the question is,    

848
00:43:38,817 --> 00:43:41,617
when I drag a UIView out        
into my storyboard and          

849
00:43:41,686 --> 00:43:43,118
I set it to my custom class,    

850
00:43:43,187 --> 00:43:46,455
do I have to like do an outlet  
or something? No, you just,     

851
00:43:46,524 --> 00:43:50,693
in your custom code, implement  
your draw with that kind of     

852
00:43:50,762 --> 00:43:54,263
optimization rect argument and  
put this code in there, and     

853
00:43:54,332 --> 00:43:58,100
every time the system has       
your view on screen it          

854
00:43:58,169 --> 00:44:00,602
will draw this. Now it's very   
efficient it's only gonna ask   

855
00:44:00,671 --> 00:44:03,806
you to draw once unless things  
change, but it's gonna draw it  

856
00:44:03,874 --> 00:44:07,075
for you. So all the whole,      
all the drawing is on demand,   

857
00:44:07,144 --> 00:44:10,446
right? The system asks you to   
draw, it calls your function,   

858
00:44:10,515 --> 00:44:11,914
you implement this code and     

859
00:44:11,983 --> 00:44:15,751
it draws on demand.             
You never force draw.           

860
00:44:15,820 --> 00:44:17,353
The only way you can            
kind of force drawing,          

861
00:44:17,422 --> 00:44:19,455
is that setNeedsDisplay.        
And even that's just telling    

862
00:44:19,523 --> 00:44:22,491
the system to please draw me    
as soon as possible, but not    

863
00:44:22,560 --> 00:44:26,362
instantly. It's all on demand   
drawing. So, this is how        

864
00:44:26,431 --> 00:44:29,431
you would implement. This code  
would be in your draw rect.     

865
00:44:29,500 --> 00:44:32,067
We call it dra_rect, it         
used to be called draw rect.    

866
00:44:32,136 --> 00:44:35,538
Now it's called draw under      
bar rect, but I suppose we      

867
00:44:35,606 --> 00:44:39,141
can call it the draw method,    
but we call it dra_rect,        

868
00:44:39,210 --> 00:44:43,045
it's got that rect argument,    
okay, that optimization.        

869
00:44:43,114 --> 00:44:46,748
All right, now you can use      
UIBezierPath also to create     

870
00:44:46,817 --> 00:44:51,120
some very common paths like a   
rounded rectangle which we'll   

871
00:44:51,188 --> 00:44:54,223
use in our demo cuz we're       
gonna do a playing card, which  

872
00:44:54,291 --> 00:44:57,793
has a rounded rectangle. You    
can also do circles, ovals,     

873
00:44:57,862 --> 00:45:02,098
things like that using other    
initializers of UIBenzierPath.  

874
00:45:02,167 --> 00:45:04,934
Note that you can use           
your BezierPath to clip         

875
00:45:05,002 --> 00:45:07,269
your drawing. You'll            
definitely want this for        

876
00:45:07,338 --> 00:45:09,538
your homework,                  
pay attention here. So          

877
00:45:09,607 --> 00:45:12,608
what that means is you draw     
some shape like your triangle.  

878
00:45:12,677 --> 00:45:15,344
And if you send add             
clip to your path,              

879
00:45:15,413 --> 00:45:18,781
now all future drawing will be  
inside that triangle. Even if   

880
00:45:18,850 --> 00:45:22,618
you draw outside, anything      
outside gets clipped off.       

881
00:45:22,687 --> 00:45:25,387
So that can be really           
convenient for your homework.   

882
00:45:25,456 --> 00:45:30,159
That's my hint for you.         
You can also do hit detection   

883
00:45:30,228 --> 00:45:33,162
like is this point in           
the triangle, right?            

884
00:45:33,231 --> 00:45:36,065
Using this contains             
point method and                

885
00:45:36,134 --> 00:45:38,133
a lots of other stuff.          
So check the documentation for  

886
00:45:38,202 --> 00:45:42,238
UIBezierPath of the things      
that you can do.                

887
00:45:42,306 --> 00:45:45,540
All right, let's go and talk    
about UIColor, right? Okay,     

888
00:45:45,609 --> 00:45:48,010
first setting the fill and      
stroke something like that.     

889
00:45:48,079 --> 00:45:51,314
We know a lot of ways to        
create colors. Color literals,  

890
00:45:51,382 --> 00:45:54,483
also the static function I      
mentioned. You can also create  

891
00:45:54,552 --> 00:45:56,718
them with initializer           
to take RGB values.             

892
00:45:56,787 --> 00:45:59,388
Or HSB which is hue             
saturation and brightness or    

893
00:45:59,457 --> 00:46:02,224
even a pattern. You can create  
a color that's actually         

894
00:46:02,293 --> 00:46:05,594
a pattern some image,           
just like repeated, right,      

895
00:46:05,663 --> 00:46:08,764
which is kinda cool. And        
we also know that views have    

896
00:46:08,832 --> 00:46:11,300
the background color, right?    
We set the background color     

897
00:46:11,368 --> 00:46:14,203
of our base view in             
Concentration be black.         

898
00:46:14,272 --> 00:46:16,672
We set the background color of  
our buttons to be orange, so    

899
00:46:16,740 --> 00:46:20,810
there's a var for that of       
course, in view. Colors also,   

900
00:46:20,879 --> 00:46:25,047
importantly, can be             
transparent. A transparent      

901
00:46:25,116 --> 00:46:27,549
color you can kind of see       
through it a little bit and     

902
00:46:27,618 --> 00:46:30,819
we specify transparency using   
something called alpha.         

903
00:46:30,888 --> 00:46:34,390
How many people have heard the  
term alpha drawing? Okay, so    

904
00:46:34,459 --> 00:46:37,559
most of you know this, great.   
So, we use alpha. Alpha of 0    

905
00:46:37,628 --> 00:46:40,563
means fully transparent, and    
alpha 1 means fully opaque and  

906
00:46:40,632 --> 00:46:43,098
we can have any number          
in between. The way get         

907
00:46:43,167 --> 00:46:46,234
a transparent color, is take a  
color you've got, like yellow   

908
00:46:46,303 --> 00:46:48,737
let's say right there, and      
you send it the message, or     

909
00:46:48,806 --> 00:46:50,706
the function,                   
withAlphaComponent. And         

910
00:46:50,774 --> 00:46:54,009
it will give you a new color    
that has that transparency.     

911
00:46:54,078 --> 00:46:56,712
Now you can draw with           
that transparency.              

912
00:46:56,780 --> 00:47:00,616
If you want to draw in you      
view with transparency,         

913
00:47:00,685 --> 00:47:03,853
though, be very careful.        
Because,                        

914
00:47:03,921 --> 00:47:07,255
the system assumes by           
default that your view only     

915
00:47:07,324 --> 00:47:11,594
draws opaque. It only draws     
with fully opaque colors.       

916
00:47:11,662 --> 00:47:14,997
If you actually draw            
with transparent colors,        

917
00:47:15,065 --> 00:47:19,601
you have to set a var on the    
view called opaque to false.    

918
00:47:19,670 --> 00:47:23,172
Now why does he do this? Well,  
imagine how much more CPU and   

919
00:47:23,241 --> 00:47:26,875
GPU intensive it is to draw     
with transparency because now   

920
00:47:26,944 --> 00:47:32,248
the views behind you have to    
be composited with your bits,   

921
00:47:32,316 --> 00:47:35,084
and you know the compositing    
not cheap, all right?           

922
00:47:35,153 --> 00:47:37,686
The GPU got a lot of            
work to do there, so            

923
00:47:37,755 --> 00:47:39,455
that's why it says to assume    
everything is opaque and        

924
00:47:39,524 --> 00:47:42,658
that everything overlapping     
doesn't have to be composited.  

925
00:47:42,726 --> 00:47:45,927
And, so if you wanna            
draw with transparency,         

926
00:47:45,996 --> 00:47:47,596
which is fine. It's legal.      

927
00:47:47,664 --> 00:47:49,731
It's not that expensive that    
you would never wanna do it.    

928
00:47:49,800 --> 00:47:51,400
But just make sure you          
set this opaque to false.       

929
00:47:51,469 --> 00:47:53,502
And you can do this             
in interface builder.           

930
00:47:53,571 --> 00:47:54,370
You can click on the view,      

931
00:47:54,439 --> 00:47:56,938
and one of the things in        
the inspector over there is     

932
00:47:57,007 --> 00:48:00,576
whether it's opaque and just    
turn that off. By the way,      

933
00:48:00,644 --> 00:48:03,678
you can make your entire view   
transparent, if you want,       

934
00:48:03,747 --> 00:48:04,847
by setting it alpha,            

935
00:48:04,915 --> 00:48:07,916
so views have alpha.            
That means all your drawing in  

936
00:48:07,985 --> 00:48:10,553
there will be                   
somewhat transparent.           

937
00:48:10,622 --> 00:48:15,290
That's kind of a cool feature.  
All right,                      

938
00:48:15,359 --> 00:48:21,663
brief mention about layers.     
So UIView's drawing mechanism,  

939
00:48:21,732 --> 00:48:24,566
is actually built on another    
whole system I'm not            

940
00:48:24,635 --> 00:48:28,437
gonna talk about, called Core   
Animation. And that's because   

941
00:48:28,506 --> 00:48:33,242
everything you do in a view     
can be animated. Views moving,  

942
00:48:33,311 --> 00:48:36,745
transparency happening, all     
this stuff can be animated and  

943
00:48:36,814 --> 00:48:39,147
there's a whole layer for       
doing that. And so,             

944
00:48:39,216 --> 00:48:42,184
the UIView, we see a top        
level API for it, but there's   

945
00:48:42,253 --> 00:48:45,453
actually a whole other API for  
drawing called the CALayer,     

946
00:48:45,522 --> 00:48:46,988
Core Animation Layer API.       

947
00:48:47,057 --> 00:48:49,624
And I actually mentioned this   
in the hints of Assignment 2,   

948
00:48:49,693 --> 00:48:53,095
you've already seen this.       
There's this var in UIView,     

949
00:48:53,164 --> 00:48:56,064
it's in button because          
button's a UIView,              

950
00:48:56,133 --> 00:49:00,335
called layer, which gives you   
the layer, the CALayer, that's  

951
00:49:00,404 --> 00:49:03,205
being used. Now I'm gonna       
talk all about animation,       

952
00:49:03,274 --> 00:49:05,541
hopefully next week,            
maybe the week after, and       

953
00:49:05,609 --> 00:49:08,611
we'll get into some of this     
stuff. But you already know     

954
00:49:08,679 --> 00:49:11,747
from Assignment 2 that there's  
a few really nice vars in       

955
00:49:11,815 --> 00:49:14,950
the CALayer like cornerRadius,  
if you wanna put a rounded      

956
00:49:15,019 --> 00:49:18,120
rect on your view, or the       
borderWidth and borderColor.    

957
00:49:18,189 --> 00:49:21,122
By the way, you notice that     
the borderColor there was       

958
00:49:21,191 --> 00:49:23,091
a CGColor, not a UIColor.       

959
00:49:23,160 --> 00:49:26,528
CGColor means it's a Core       
Graphics color, why is that?    

960
00:49:26,597 --> 00:49:29,365
Well, that's because this       
whole layer mechanism,          

961
00:49:29,434 --> 00:49:31,934
Core Animation,                 
is below the UI kit layer, and  

962
00:49:32,003 --> 00:49:34,569
it built on top of              
the Core Graphics layer. So     

963
00:49:34,638 --> 00:49:37,806
it can't really use             
the UIColor struct              

964
00:49:37,875 --> 00:49:41,277
because it's kind of above it   
in the hierarchy of frameworks  

965
00:49:41,345 --> 00:49:44,379
depending on each other,        
so use a C, CGColor.            

966
00:49:44,448 --> 00:49:48,584
Luckily, UIColor is also above  
Core Graphics. So it has a var  

967
00:49:48,652 --> 00:49:52,221
called CGColor, which gives     
you itself as a CGColor, and    

968
00:49:52,289 --> 00:49:54,956
I showed all that in            
the hints of your assignment,   

969
00:49:55,025 --> 00:49:59,161
right? Okay, so that's a layer  
thing, we'll talk about,        

970
00:49:59,230 --> 00:50:02,464
more about animation later.     
Let's talk a little bit about   

971
00:50:02,533 --> 00:50:05,334
the transparency and how that   
works, like which views are in  

972
00:50:05,403 --> 00:50:08,471
front of which other views,     
right? If I have a transparent  

973
00:50:08,539 --> 00:50:11,840
view, and it shows the one      
behind, which is behind?        

974
00:50:11,908 --> 00:50:15,110
That's all determined by the    
order of the subviews list.     

975
00:50:15,179 --> 00:50:19,715
Any view that has subviews      
has an array of them.           

976
00:50:19,784 --> 00:50:24,019
The first thing in that         
array is the back. And          

977
00:50:24,088 --> 00:50:26,989
everything else is              
one step in front,              

978
00:50:27,057 --> 00:50:28,791
the last thing is the one       
in the very front.              

979
00:50:28,859 --> 00:50:32,160
So if you have multiple         
subviews of your view and       

980
00:50:32,229 --> 00:50:35,430
they overlap, it's the one      
in back is the first one in     

981
00:50:35,499 --> 00:50:38,634
the subviews list. So you can   
reorder the subviews list and   

982
00:50:38,703 --> 00:50:41,836
move them. Move the one from    
the front to the back or        

983
00:50:41,905 --> 00:50:45,140
whatever, so you can control    
that transparency effect.       

984
00:50:45,209 --> 00:50:46,975
Also, even if there's           
no transparency,                

985
00:50:47,044 --> 00:50:48,677
if the views are on             
top of each other and           

986
00:50:48,746 --> 00:50:49,711
they happen to overlap.         

987
00:50:49,780 --> 00:50:51,347
A lot of times when we          
have multiple subviews,         

988
00:50:51,415 --> 00:50:53,215
they're are all side by side,   
they don't overlap,             

989
00:50:53,284 --> 00:50:56,585
but they could. Oops, they      
could overlap, and if they      

990
00:50:56,654 --> 00:51:00,055
did, then that subviews         
will tell you the order,        

991
00:51:00,124 --> 00:51:04,693
which ones are in the front.    
You can completely              

992
00:51:04,761 --> 00:51:08,096
hide a view without taking it   
out of the view hierarchy,      

993
00:51:08,165 --> 00:51:11,700
with isHidden. If you say to    
a view, this is a var on view,  

994
00:51:11,769 --> 00:51:14,436
if you say view isHidden        
equals yes, it will not appear  

995
00:51:14,505 --> 00:51:16,838
on screen. It'll still be       
in the view hierarchy,          

996
00:51:16,907 --> 00:51:19,541
still in the subviews list.     
It'll still have a superview,   

997
00:51:19,609 --> 00:51:21,843
but it won't there, and it      
won't get any gestures either.  

998
00:51:21,912 --> 00:51:23,011
So you won't see its drawing,   

999
00:51:23,080 --> 00:51:25,580
you won't get any gestures,     
it'll be hidden. And            

1000
00:51:25,649 --> 00:51:28,584
you'll be surprised how common  
it is to wanna do these.        

1001
00:51:28,653 --> 00:51:30,552
You put a view in the view      
hierarchy somewhere,            

1002
00:51:30,621 --> 00:51:34,323
you hide it, then when some     
condition is true, it appears,  

1003
00:51:34,391 --> 00:51:37,893
probably animated. Things       
appear, that's a common way to  

1004
00:51:37,961 --> 00:51:42,597
build an interactive UI.        
All right, so we know how       

1005
00:51:42,666 --> 00:51:45,567
to draw with these arcs.        
What about drawing text? Well,  

1006
00:51:45,635 --> 00:51:50,405
actually text is just some      
font designer, moveto, lineto,  

1007
00:51:50,474 --> 00:51:54,176
curveto, okay. That's all the   
character, every character in   

1008
00:51:54,245 --> 00:51:56,545
the text is just a bunch        
of little moveto, lineto's.     

1009
00:51:56,613 --> 00:52:00,182
Luckily, some font designer     
somewhere did those all for     

1010
00:52:00,250 --> 00:52:01,784
you, or that would be           
incredibly tedious for          

1011
00:52:01,852 --> 00:52:04,753
you now, wouldn't it? So we     
wanna be able to draw though    

1012
00:52:04,822 --> 00:52:09,158
using these wonderful moveto,   
linetos, which are the glyphs   

1013
00:52:09,226 --> 00:52:12,694
in a font. So how do we do      
that? Well, before I even dive  

1014
00:52:12,763 --> 00:52:16,531
into that, remember that        
UILabel draws text real well.   

1015
00:52:16,600 --> 00:52:19,535
And there's no reason you       
couldn't make a UILabel be      

1016
00:52:19,603 --> 00:52:23,438
a subview of your view, and     
thus draw the text that way.    

1017
00:52:23,507 --> 00:52:26,074
Okay, that's a great way to     
draw it, because UILabel's got  

1018
00:52:26,143 --> 00:52:29,544
all the incredible amount       
of center text alignment,       

1019
00:52:29,613 --> 00:52:30,812
and you can control the color,  

1020
00:52:30,881 --> 00:52:33,181
you can put an attributed       
string on that label.           

1021
00:52:33,250 --> 00:52:34,916
You've got complete             
control with that.              

1022
00:52:34,985 --> 00:52:38,988
The only thing is you have to   
make sure that you keep that    

1023
00:52:39,056 --> 00:52:43,458
UILabels frame in the right     
spot in your subview.           

1024
00:52:43,527 --> 00:52:45,994
You know, as, it's one of your  
subviews, so you've gotta make  

1025
00:52:46,063 --> 00:52:48,564
sure its frame is kept          
in the right space. But         

1026
00:52:48,632 --> 00:52:49,731
that's a great way              
to draw text, so                

1027
00:52:49,800 --> 00:52:52,968
don't forget that. But I will   
talk to you now about how to    

1028
00:52:53,036 --> 00:52:58,106
draw in your draw rect, and     
use attributed string. Okay,    

1029
00:52:58,175 --> 00:52:59,607
so you just create              
AttributedString,               

1030
00:52:59,676 --> 00:53:01,777
and you send it                 
the message draw, and           

1031
00:53:01,846 --> 00:53:06,448
it will draw at the point you   
say in your current context.    

1032
00:53:06,517 --> 00:53:07,850
So drawing text                 
could not be easier,            

1033
00:53:07,918 --> 00:53:09,818
you already know how to do      
an attributed string, so        

1034
00:53:09,887 --> 00:53:11,420
you just create                 
attributed string here.         

1035
00:53:11,488 --> 00:53:15,491
My attributed string doesn't    
have any attributes here for    

1036
00:53:15,559 --> 00:53:17,226
slide space issue. But          

1037
00:53:17,294 --> 00:53:18,626
you could put your attributes   
on it, whatever, and            

1038
00:53:18,695 --> 00:53:21,530
then do draw(at. You can also   
do draw(in), and it'll draw it  

1039
00:53:21,599 --> 00:53:24,667
in a rectangle in the upper     
left corner of the rectangle.   

1040
00:53:24,735 --> 00:53:27,603
And then you can also get       
the size of the text by         

1041
00:53:27,671 --> 00:53:31,340
just asking the attributed      
string, what is the width and   

1042
00:53:31,408 --> 00:53:35,243
height necessary to fit         
this attributed string. So      

1043
00:53:35,312 --> 00:53:38,146
super easy to draw              
text in your draw rect,         

1044
00:53:38,215 --> 00:53:41,750
you just use AttributedString.  
Now I wanted to take a little   

1045
00:53:41,819 --> 00:53:43,452
time here about                 
AttributedString and            

1046
00:53:43,520 --> 00:53:45,387
circle back to what I           
said about it before.           

1047
00:53:45,455 --> 00:53:48,323
Remember I talked about         
how NSAttributedString is       

1048
00:53:48,392 --> 00:53:51,526
an old objective thing, and     
it uses NSString and then,      

1049
00:53:51,595 --> 00:53:54,697
we're using String? And String  
uses kind of a different        

1050
00:53:54,765 --> 00:53:57,566
encoding for Unicode            
characters and sometimes        

1051
00:53:57,635 --> 00:54:00,369
mapping between NSString and    
String. The indexing is         

1052
00:54:00,438 --> 00:54:03,138
different because we got        
wacky characters like emoji,    

1053
00:54:03,207 --> 00:54:05,040
that are actually               
multiple Unicodes,              

1054
00:54:05,109 --> 00:54:07,342
ugh, that whole mess,           
you remember that? Well,        

1055
00:54:07,410 --> 00:54:09,545
I'm gonna tell you a little     
bit how to get around that.     

1056
00:54:09,613 --> 00:54:11,446
You don't need it, you didn't   
need it for Assignment 2,       

1057
00:54:11,514 --> 00:54:12,113
you won't need it for           

1058
00:54:12,182 --> 00:54:14,616
Assignment 3.                   
Maybe I'll ask you to do for    

1059
00:54:14,685 --> 00:54:18,253
Assignment 5. But if I do       
wanna set attributes just on    

1060
00:54:18,322 --> 00:54:21,089
certain characters in my        
AttributedString, and           

1061
00:54:21,158 --> 00:54:23,826
it's a String, not a NSString,  
how do I do it?                 

1062
00:54:23,894 --> 00:54:28,831
Well, the answer is, this       
class right here, NSRange. So   

1063
00:54:28,899 --> 00:54:32,600
NSRange is the way you specify  
a range into an NSString.       

1064
00:54:32,669 --> 00:54:35,904
Okay, so this is an old         
Objective-C way of doing        

1065
00:54:35,973 --> 00:54:41,209
a range. In our world,          
we do Range<String.Index>.      

1066
00:54:41,278 --> 00:54:43,045
That's how we index             
into a string, right,           

1067
00:54:43,113 --> 00:54:45,647
because we know the strings     
are indexed by String.Index     

1068
00:54:45,716 --> 00:54:48,783
not by init. So we have this    
totally different thing,        

1069
00:54:48,852 --> 00:54:52,421
Range<String.Index>. And here   
AttributedString wants to do    

1070
00:54:52,489 --> 00:54:56,091
an NSRange of init because      
NSString was indexed by init.   

1071
00:54:56,160 --> 00:54:59,661
Okay, so how do we get from     
range of String.Index to        

1072
00:54:59,730 --> 00:55:03,064
NSRange of an init              
that matches, okay, so          

1073
00:55:03,133 --> 00:55:05,667
that the NSAttributedString     
matches our string. Well,       

1074
00:55:05,736 --> 00:55:11,240
we do it with NSRange,          
we do it with this right here.  

1075
00:55:11,309 --> 00:55:13,342
This is NSRange initializer,    
you see it,                     

1076
00:55:13,410 --> 00:55:17,379
NSRange initializer.            
It takes this firstWordRange,   

1077
00:55:17,447 --> 00:55:21,883
which is an Swift range of      
string.index. You see it goes   

1078
00:55:21,952 --> 00:55:25,420
from startIndex here over to    
indexOf, so it's a range. It's  

1079
00:55:25,488 --> 00:55:30,925
got the little ..< which is     
our nice range syntax there.    

1080
00:55:30,994 --> 00:55:33,995
So it takes a range and it      
converts it into an NSRange,    

1081
00:55:34,064 --> 00:55:36,798
but it needs to know            
the string that that string,    

1082
00:55:36,867 --> 00:55:39,268
those string.indexes are into,  
right?                          

1083
00:55:39,336 --> 00:55:41,403
So the combination of           
knowing the string and          

1084
00:55:41,472 --> 00:55:44,673
the string.index range. It can  
crunch on that and change it    

1085
00:55:44,741 --> 00:55:48,109
into an NSRange that will work  
in an NSAttributedString.       

1086
00:55:48,178 --> 00:55:49,778
So that's the magic. NSRange,   

1087
00:55:49,847 --> 00:55:53,381
use the initializer that takes  
a range of string.index and     

1088
00:55:53,450 --> 00:55:55,984
a string.                       
It'll give you back NSRange.    

1089
00:55:56,052 --> 00:55:59,655
Now you can call methods        
like in AttributedString,       

1090
00:55:59,723 --> 00:56:02,524
like addAttribute, which        
adds a single attribute at      

1091
00:56:02,593 --> 00:56:05,593
a certain range of characters.  
Look at the argument, range,    

1092
00:56:05,662 --> 00:56:12,534
nsrange, now you have an        
nsrange to give it. All right,  

1093
00:56:12,602 --> 00:56:17,372
fonts. Okay, fonts incredibly   
important in iOS. I cannot      

1094
00:56:17,440 --> 00:56:20,375
overstate how important         
fonts are to the look and       

1095
00:56:20,443 --> 00:56:23,345
feel of iOS. These are, I       
think are iOS 10 screenshots,   

1096
00:56:23,414 --> 00:56:26,281
and iOS 11 things have changed  
slightly, but not too much.     

1097
00:56:26,349 --> 00:56:29,584
But even in these screenshots   
you can see how important       

1098
00:56:29,653 --> 00:56:32,921
fonts is. They really make      
a difference to how your UI     

1099
00:56:32,990 --> 00:56:35,390
looks. So you have to           
pick the right font.            

1100
00:56:35,459 --> 00:56:38,794
So how do we pick fonts?        
Well, in iOS,                   

1101
00:56:38,862 --> 00:56:43,966
the most important concept      
with font is preferred fonts.   

1102
00:56:44,034 --> 00:56:48,003
There are about ten categories  
of fonts like body fonts,       

1103
00:56:48,072 --> 00:56:51,740
headline fonts, caption fonts,  
footnote fonts.                 

1104
00:56:51,809 --> 00:56:53,942
So there's these                
kinds of fonts, and             

1105
00:56:54,010 --> 00:56:56,678
you need to pick one of         
those preferred fonts for       

1106
00:56:56,747 --> 00:57:00,015
whatever environment you're     
text is in. If you're showing   

1107
00:57:00,083 --> 00:57:02,450
main information then it's      
probably the body font.         

1108
00:57:02,519 --> 00:57:06,355
If it's a little caption of     
an image, you're gonna use to   

1109
00:57:06,423 --> 00:57:09,491
caption font. Okay, so you got  
to pick the right font and      

1110
00:57:09,559 --> 00:57:12,527
use it. Now this is really      
easy to do Interface Builder.   

1111
00:57:12,596 --> 00:57:15,364
You just pick your label, or    
button, or text field, or       

1112
00:57:15,432 --> 00:57:18,166
whatever you're doing, and      
you go to inspector, and        

1113
00:57:18,235 --> 00:57:21,169
where it says font, instead of  
using system font, which is     

1114
00:57:21,238 --> 00:57:24,072
what we've always chosen,       
because I haven't talked to     

1115
00:57:24,141 --> 00:57:27,109
you about preferred font, you   
choose one of these things,     

1116
00:57:27,177 --> 00:57:29,678
body font, caption font,        
footnote font, etc.             

1117
00:57:29,746 --> 00:57:33,382
In your code you could          
do the same thing, and          

1118
00:57:33,450 --> 00:57:38,520
you do that using this          
static i.e class type method    

1119
00:57:38,589 --> 00:57:42,458
in UI font, called preferred    
font for text style, and        

1120
00:57:42,526 --> 00:57:45,026
that text style is headline,    
body, footnote,                 

1121
00:57:45,095 --> 00:57:47,829
whatever. This will give        
you back a UI font that you     

1122
00:57:47,898 --> 00:57:51,433
can put in your NS attributed   
string dictionary.              

1123
00:57:51,502 --> 00:57:54,168
One of the keys in there is     
the font, and you can use this  

1124
00:57:54,237 --> 00:57:58,272
as the font, when you're        
drawing text in your drawRect.  

1125
00:57:58,341 --> 00:58:02,511
Now one thing to be concerned   
about here is that the size of  

1126
00:58:02,579 --> 00:58:07,249
this font is variable.          
But you get old people like,    

1127
00:58:07,317 --> 00:58:10,686
okay, we're starting to         
hold our phones like this,      

1128
00:58:10,754 --> 00:58:13,455
as the years go by,             
cuz our eyes are giving up, so  

1129
00:58:13,524 --> 00:58:16,191
we like the fonts big. Then     
we can hold it all closer and   

1130
00:58:16,259 --> 00:58:18,993
see our fonts. Well, the way    
we do that is we go into our    

1131
00:58:19,062 --> 00:58:22,297
settings on our phone, and one  
of the settings under general   

1132
00:58:22,365 --> 00:58:25,433
there is accessibility, and     
we can say larger text, and     

1133
00:58:25,502 --> 00:58:27,102
we move the little slider, and  

1134
00:58:27,170 --> 00:58:29,705
now all the fonts get           
bigger in all the apps, but     

1135
00:58:29,773 --> 00:58:32,074
only the apps that play         
this game right, and            

1136
00:58:32,142 --> 00:58:35,143
use preferred fonts. So you     
wanna be one of those apps,     

1137
00:58:35,212 --> 00:58:37,846
otherwise, you're gonna         
lose the older folk from        

1138
00:58:37,915 --> 00:58:39,314
your demographic,               

1139
00:58:39,382 --> 00:58:43,084
of your people buying your      
app. So it's important to make  

1140
00:58:43,153 --> 00:58:46,054
sure that your UI also works    
when fonts get bigger and       

1141
00:58:46,122 --> 00:58:50,592
smaller, and the number one     
way to do that, auto layout.    

1142
00:58:50,661 --> 00:58:52,494
You know that auto layout       
where you put constraints,      

1143
00:58:52,563 --> 00:58:55,697
pin things to the edges. You    
wanna use good auto layout so   

1144
00:58:55,766 --> 00:58:58,800
as fonts get bigger, and the    
text field gets bigger, other   

1145
00:58:58,869 --> 00:59:01,836
things push out of the way and  
it uses the screen real estate  

1146
00:59:01,905 --> 00:59:03,805
properly. So you've only seen   
a little bit of auto layout.    

1147
00:59:03,874 --> 00:59:06,608
I'm gonna show you more auto    
layout at start of Wednesday's  

1148
00:59:06,676 --> 00:59:07,942
lecture.                        
You're gonna see more and       

1149
00:59:08,011 --> 00:59:09,444
more as the quarter goes by,    
but                             

1150
00:59:09,512 --> 00:59:13,047
that's a good way to make       
it work. Now what if you        

1151
00:59:13,116 --> 00:59:17,418
either wanna use some other     
font, some special font that's  

1152
00:59:17,487 --> 00:59:22,057
something that's maybe part of  
your marketing or whatever, or  

1153
00:59:22,126 --> 00:59:25,293
you want it to be bigger,       
or smaller I guess,             

1154
00:59:25,362 --> 00:59:29,064
than the standard size font     
that comes with a certain       

1155
00:59:29,133 --> 00:59:32,467
prefered font. Okay, well,      
UIFont does have a way to       

1156
00:59:32,536 --> 00:59:35,837
create a font by name like if   
you want Helvetica 36 point,    

1157
00:59:35,906 --> 00:59:39,841
you can say UIFont(name:        
"Helvetica", size: 36.0), and   

1158
00:59:39,909 --> 00:59:42,711
there's also a class            
called UIFontDescriptor.        

1159
00:59:42,780 --> 00:59:44,579
Has a lot of cool ways where    
you can take a font and         

1160
00:59:44,648 --> 00:59:46,380
say give me the Bold            
version of this,                

1161
00:59:46,449 --> 00:59:49,084
give me the Italic version,     
okay all of that stuff. So      

1162
00:59:49,152 --> 00:59:51,787
you can get your font this      
way. But if you do your fonts   

1163
00:59:51,855 --> 00:59:55,190
this way, you still want,       
when I go into my setting and   

1164
00:59:55,259 --> 00:59:58,427
make my font bigger, you want   
your font to get bigger, and    

1165
00:59:58,495 --> 01:00:02,330
look what font size this is,    
36. It's fixed.                 

1166
01:00:02,399 --> 01:00:04,899
So I need to somehow            
scale this font up              

1167
01:00:04,968 --> 01:00:08,069
if the user has put their       
slider to bigger, and           

1168
01:00:08,137 --> 01:00:11,540
the way you do that is with     
UIFontMetrics. So you create    

1169
01:00:11,608 --> 01:00:15,710
a UIFontMetrics object for      
the text style body, footnote,  

1170
01:00:15,779 --> 01:00:19,080
caption, whatever, and then it  
has very cool method called     

1171
01:00:19,149 --> 01:00:22,283
scaledFont, and you give it     
a font, like Helvetica 36,      

1172
01:00:22,352 --> 01:00:27,121
and it will give you back a     
new font, Helvetica 42, maybe.  

1173
01:00:27,190 --> 01:00:31,492
It's scaled based on what the   
user said. Okay, don't skip     

1174
01:00:31,561 --> 01:00:34,528
this step, otherwise,           
if you use a custom font,       

1175
01:00:34,597 --> 01:00:38,333
when people move that slider,   
your app's not gonna work, and  

1176
01:00:38,402 --> 01:00:40,935
people are gonna be like,       
I hate that app.                

1177
01:00:41,004 --> 01:00:45,373
I can't see any of the text     
and it's too small.             

1178
01:00:45,442 --> 01:00:48,776
There are also system fonts.    
We use those so far in our      

1179
01:00:48,845 --> 01:00:51,780
concentration demo. That's      
only for things like button     

1180
01:00:51,848 --> 01:00:54,616
titles, and stuff like that,    
that's not for user content,    

1181
01:00:54,685 --> 01:00:57,118
stuff that the user has         
generated, or requested, or     

1182
01:00:57,187 --> 01:00:59,454
something like that.            
Thos are preferred fonts.       

1183
01:00:59,523 --> 01:01:03,491
System fonts are just like      
buttons, things like that.      

1184
01:01:03,560 --> 01:01:05,826
What about images? We know      
how to draw lines and arcs.     

1185
01:01:05,895 --> 01:01:06,928
We know how to draw text.       

1186
01:01:06,997 --> 01:01:11,032
What about drawing images?      
Just like UILabel for text,     

1187
01:01:11,101 --> 01:01:13,868
there's another one             
called UIImageView,             

1188
01:01:13,937 --> 01:01:17,839
which lets you add an image as  
a subview. So you could use     

1189
01:01:17,907 --> 01:01:20,474
that to draw an image in        
your view if you want it,       

1190
01:01:20,543 --> 01:01:23,711
just do it as a subview.        
But if you wanna draw an image  

1191
01:01:23,780 --> 01:01:26,481
in your drawRect,               
you can do that too.            

1192
01:01:26,549 --> 01:01:29,784
You need a UIImage object.      
A UIImage represents an image,  

1193
01:01:29,852 --> 01:01:33,287
jpg, gif, whatever kind of      
image, it represents an image.  

1194
01:01:33,356 --> 01:01:36,457
Now, how do you get an image?   
There's a bunch of ways to do   

1195
01:01:36,526 --> 01:01:40,562
it. One way is to drag the jpg  
file, or whatever, into that    

1196
01:01:40,630 --> 01:01:44,132
Assets.xcassets file. Remember  
when we're doing our demo,      

1197
01:01:44,201 --> 01:01:46,300
and I put some things           
off in supporting files?        

1198
01:01:46,369 --> 01:01:48,937
One of the things I threw in    
there was the place where       

1199
01:01:49,006 --> 01:01:51,539
the app icon was. Well,         
you can drag other images in    

1200
01:01:51,607 --> 01:01:54,308
there, and along the left hand  
side will be all the names      

1201
01:01:54,377 --> 01:01:57,012
of them, and then you can       
call this method right here,    

1202
01:01:57,080 --> 01:01:59,881
UIImage named whatever, and     
it'll go look in that assets    

1203
01:01:59,950 --> 01:02:01,950
thing, and                      
find an image with that name.   

1204
01:02:02,019 --> 01:02:04,386
Now, this is a failable         
initializer.                    

1205
01:02:04,454 --> 01:02:08,089
It can return nil, and that's   
because it might not find       

1206
01:02:08,157 --> 01:02:11,927
that particular image in        
there. So you have to say       

1207
01:02:11,995 --> 01:02:15,497
usually if let to do that.      
How else can you get an image?  

1208
01:02:15,565 --> 01:02:16,965
Well, you can get one           
from the file system.           

1209
01:02:17,034 --> 01:02:18,633
You've got a jpg in             
the file system.                

1210
01:02:18,701 --> 01:02:20,568
I hadn't told you how to        
access the file system, so      

1211
01:02:20,637 --> 01:02:22,670
you're not gonna be doing       
that. I'll show you later.      

1212
01:02:22,739 --> 01:02:25,306
You can also get it if you      
have a bag of bits that you     

1213
01:02:25,375 --> 01:02:28,409
got over the Internet. The      
data that has a bags of bits    

1214
01:02:28,478 --> 01:02:31,312
with jpg data in there.         
UIImage knows how to look in    

1215
01:02:31,381 --> 01:02:33,648
that bag of bits and            
figure out if it's an image.    

1216
01:02:33,717 --> 01:02:36,585
You can even use this           
global function,                

1217
01:02:36,653 --> 01:02:40,121
UIGraphicsBeginImageContext,    
and then draw arcs and          

1218
01:02:40,190 --> 01:02:42,791
lines, and it'll capture        
it as an image. So              

1219
01:02:42,859 --> 01:02:46,127
you can even draw a custom      
image if you want. So anyway,   

1220
01:02:46,196 --> 01:02:47,161
you do one of these things,     
and                             

1221
01:02:47,230 --> 01:02:49,897
now you have a UIImage in your  
hand that represents the image  

1222
01:02:49,966 --> 01:02:51,967
you wanna draw.                 
How do you draw it?             

1223
01:02:52,035 --> 01:02:55,069
Exactly the same as NS          
attributed string, you just     

1224
01:02:55,138 --> 01:02:58,839
use draw(at), which will draw   
the image with its upper-left   

1225
01:02:58,908 --> 01:03:02,510
corner at that point, but you   
also can do draw(in rect, and   

1226
01:03:02,579 --> 01:03:05,146
it'll scale the image           
to fit in that rect.            

1227
01:03:05,215 --> 01:03:08,049
So that's a cool way to scale   
your image up and down, and     

1228
01:03:08,118 --> 01:03:10,585
you can do drawAsPattern        
which will tally your image     

1229
01:03:10,653 --> 01:03:14,089
repeatedly, repeat you image    
to fill the rectangle.          

1230
01:03:15,892 --> 01:03:19,227
Super easy to draw              
images as well.                 

1231
01:03:19,295 --> 01:03:21,796
All right, let's talk about     
your bounds changing.           

1232
01:03:21,865 --> 01:03:25,767
I've got my draw rect. It draw  
beautifully, but now my bounds  

1233
01:03:25,836 --> 01:03:30,571
changed, and when will this     
happen? Well, number one way,   

1234
01:03:30,640 --> 01:03:33,808
your device got rotated.        
They were looking at you in     

1235
01:03:33,877 --> 01:03:37,345
portrait, they rotate you. Now  
you also went from this tall,   

1236
01:03:37,414 --> 01:03:40,915
thin view, now you're this      
wide, very short view, okay,    

1237
01:03:40,984 --> 01:03:43,051
your bounds have                
completely changed.             

1238
01:03:43,120 --> 01:03:47,088
You went from a width of maybe  
200 to a width of maybe 700,    

1239
01:03:47,156 --> 01:03:50,925
and from a height of maybe 3    
or 400 to a height of 150 or    

1240
01:03:50,994 --> 01:03:53,327
200, so that's a major change.  

1241
01:03:53,396 --> 01:03:56,263
You're gonna have to really     
redraw all of your stuff,       

1242
01:03:56,332 --> 01:04:00,401
usually. Unfortunately, that's  
not the default. In iOS,        

1243
01:04:00,470 --> 01:04:03,705
when you're bounds change like  
that, it does not redraw you,   

1244
01:04:03,773 --> 01:04:08,843
believe or not. It takes all    
your bits And squishes them.    

1245
01:04:08,912 --> 01:04:11,312
So looks absolutely             
terrible most of the time.      

1246
01:04:11,381 --> 01:04:13,781
To smashes a bit,               
squishes them down,             

1247
01:04:13,850 --> 01:04:17,351
stretches them out to           
fit your new bounds.            

1248
01:04:17,420 --> 01:04:20,588
Which you almost never want     
that. So how is that control?   

1249
01:04:20,657 --> 01:04:23,825
That's control with a var in    
UIView called contentMode.      

1250
01:04:23,893 --> 01:04:25,493
Okay, and the contentMode's     
just basically saying,          

1251
01:04:25,562 --> 01:04:27,362
what kind of content do I       
have? Do I have the kind of     

1252
01:04:27,430 --> 01:04:30,231
content that can be squished    
and scrunched like that, and    

1253
01:04:30,300 --> 01:04:32,367
still look good? Or do I have   
the kind of content where I     

1254
01:04:32,435 --> 01:04:34,502
have to be redrawn when         
my balance changes?             

1255
01:04:34,571 --> 01:04:38,005
So, the three different         
categories of contentModes.     

1256
01:04:38,074 --> 01:04:41,776
One is, keep my bits, okay,     
don't redraw me, but just move  

1257
01:04:41,845 --> 01:04:46,281
my bits, unscaled, to a new     
position, upper left, top,      

1258
01:04:46,350 --> 01:04:48,616
lower right, keep it in         
the center, whatever.           

1259
01:04:48,684 --> 01:04:51,486
This one not almost never get   
used. Then they're scaling      

1260
01:04:51,555 --> 01:04:54,589
the bits which is scaleToFill   
as the default where it just    

1261
01:04:54,658 --> 01:04:57,958
scrunches the bits to fit in    
the new space. It doesn't even  

1262
01:04:58,027 --> 01:05:01,395
respect the aspect ratio. But   
you could set the contentMode   

1263
01:05:01,464 --> 01:05:04,532
to scores the bit but keep the  
aspect ratio the same size so   

1264
01:05:04,600 --> 01:05:07,635
that a face doesn't go from,    
you know, an over as way to     

1265
01:05:07,704 --> 01:05:11,906
a tall over or whatever.        
But the one you guys probably   

1266
01:05:11,975 --> 01:05:15,643
are gonna want most of the      
time is ContentMode redraw.     

1267
01:05:15,712 --> 01:05:18,613
And what that means is,         
when my bounds change,          

1268
01:05:18,682 --> 01:05:22,183
call my draw Rect and           
let me draw myself again, and   

1269
01:05:22,252 --> 01:05:24,552
that's probably what you want.  

1270
01:05:24,620 --> 01:05:26,754
Could you draw rect knows       
what your bounds are and        

1271
01:05:26,823 --> 01:05:29,023
when it gets called, it can     
draw something appropriate for  

1272
01:05:29,092 --> 01:05:32,293
the bounds you read. So like    
in your homework, for example,  

1273
01:05:32,361 --> 01:05:34,895
well maybe your homework is     
not a great example because     

1274
01:05:34,964 --> 01:05:37,231
probably, the big views         
that are changing bound         

1275
01:05:37,300 --> 01:05:39,800
it's your subviews that you     
are gonna want to lay out,      

1276
01:05:39,869 --> 01:05:42,270
which I will talk about again.  
But if you did have a thing     

1277
01:05:42,339 --> 01:05:43,905
where you are drawing           
something in a view,            

1278
01:05:43,973 --> 01:05:46,374
like maybe we are doing our     
cards and concentration. And    

1279
01:05:46,442 --> 01:05:48,910
we always want them,            
to be a certain aspect ratio,   

1280
01:05:48,978 --> 01:05:52,781
whatever, we could redraw,      
in our draw Rect or whatever,   

1281
01:05:52,849 --> 01:05:54,783
it's probably not               
a great example.                

1282
01:05:54,851 --> 01:05:56,651
In fact, let's go on to         
the next example which is,      

1283
01:05:56,720 --> 01:05:58,319
what happens if I               
have subviews and               

1284
01:05:58,388 --> 01:06:00,955
my bounds change? Cuz this is   
gonna happen in your homework.  

1285
01:06:01,024 --> 01:06:03,024
You're gonna have some views,   
you're just gonna have          

1286
01:06:03,093 --> 01:06:06,460
a subview which is a lot of     
cards, your set cards. Because  

1287
01:06:06,529 --> 01:06:09,130
in assignment three, now        
there's no limit on the number  

1288
01:06:09,199 --> 01:06:11,432
of cards that can appear        
on screen, right?               

1289
01:06:11,501 --> 01:06:14,635
In assignment two, we limited   
to like 24 cards as the most.   

1290
01:06:14,704 --> 01:06:17,271
Now no limit, so you're         
always adding more cards. So,   

1291
01:06:17,340 --> 01:06:20,241
you're gonna have to use, put   
them as subviews of some view.  

1292
01:06:20,310 --> 01:06:22,744
You can't stack view anymore,   
in other words.                 

1293
01:06:22,813 --> 01:06:24,345
So what happens when            
your bounds change there?       

1294
01:06:24,414 --> 01:06:25,980
Well, when your bounds change,  

1295
01:06:26,048 --> 01:06:28,682
you're gonna get sent this      
message layoutSubviews.         

1296
01:06:28,751 --> 01:06:32,486
And that's an opportunity for   
you to go reset the frames by   

1297
01:06:32,555 --> 01:06:36,390
just changing the frame var on  
all of your subviews, okay.     

1298
01:06:36,459 --> 01:06:38,225
So, you're all,                 
if you have subviews,           

1299
01:06:38,294 --> 01:06:40,561
you're almost always gonna      
implement this method.          

1300
01:06:40,630 --> 01:06:43,931
And don't forget to call super  
to do it. Now, what's the one   

1301
01:06:44,000 --> 01:06:46,067
time when you're not gonna      
implement this method?          

1302
01:06:46,135 --> 01:06:49,137
Is if you have subviews and     
you have autolayout on those    

1303
01:06:49,205 --> 01:06:52,974
subviews, okay. If you have     
autolayout on your subviews,    

1304
01:06:53,042 --> 01:06:55,676
then the Autolayout constrains  
will determine where            

1305
01:06:55,745 --> 01:06:59,013
the new frames are, okay.       
So this would only be for       

1306
01:06:59,082 --> 01:07:01,483
views where you're              
not using autolayout.           

1307
01:07:03,186 --> 01:07:05,386
that might be true of           
your assignment three,          

1308
01:07:05,454 --> 01:07:08,322
whatever view contains your     
card, probably not gonna use    

1309
01:07:08,391 --> 01:07:11,025
autolayout. It will be          
almost impossible to write      

1310
01:07:11,094 --> 01:07:12,726
constraints that                
would work for                  

1311
01:07:12,795 --> 01:07:15,964
laying out an arbitrary number  
of cards in arbitrary bounds,   

1312
01:07:16,032 --> 01:07:19,433
okay. You're probably gonna     
wanna do that in code. Okay,    

1313
01:07:19,502 --> 01:07:21,268
so when your bounds change,     
you've got two different        

1314
01:07:21,337 --> 01:07:23,504
things to think about.          
If you have any subviews,       

1315
01:07:23,572 --> 01:07:26,540
layout subviews or autolayout.  
And if you draw something,      

1316
01:07:26,609 --> 01:07:28,342
then you've gotta think about   
your content mode on whether    

1317
01:07:28,411 --> 01:07:33,081
you wanna be asked to redraw.   
Okay, so that's it for          

1318
01:07:33,149 --> 01:07:36,184
the slides today,               
I'm gonna into demo here.       

1319
01:07:36,252 --> 01:07:39,320
The demo I'm gonna do is a      
playing card. So this is gonna  

1320
01:07:39,389 --> 01:07:41,655
be a new app, and it's just     
gonna draw a playing card,      

1321
01:07:41,724 --> 01:07:44,158
you know, like jack of clubs,   
six of hearts, whatever,        

1322
01:07:44,226 --> 01:07:46,928
it's gonna draw that card.      
We're gonna draw that custom,   

1323
01:07:46,996 --> 01:07:49,864
by ourselves. And today, all    
I am gonna do in the demo is    

1324
01:07:49,932 --> 01:07:53,067
the model of that MVC that      
draws the playing card, which   

1325
01:07:53,136 --> 01:07:55,936
is gonna be a playing card and  
a deck of playing cards.        

1326
01:07:56,005 --> 01:07:58,673
And the reason I'm gonna do     
that is I wanna show you enum.  

1327
01:07:58,741 --> 01:08:01,709
You haven't grab a chance       
to see me demo enum. So         

1328
01:08:01,777 --> 01:08:05,413
we're gonna use enums in our    
implementation of our model.    

1329
01:08:05,482 --> 01:08:08,316
On Wednesday, I'll continue     
with the drawing part of this   

1330
01:08:08,385 --> 01:08:10,451
demo or I'm gonna draw          
this playing card.              

1331
01:08:10,520 --> 01:08:12,619
And then I'll do some           
slides on multitouch and        

1332
01:08:12,688 --> 01:08:15,589
then we'll add some multitouch  
to the playing cards, swiping   

1333
01:08:15,658 --> 01:08:18,259
to go to the next card, we'll   
do tapping the flip the card    

1334
01:08:18,328 --> 01:08:21,162
over, that kind of stuff.       
Okay, your assignment two       

1335
01:08:21,231 --> 01:08:22,930
of course is due on             
Wednesday as you know.          

1336
01:08:22,999 --> 01:08:25,533
Assignment three will be        
assigned on Wednesday.          

1337
01:08:25,601 --> 01:08:29,002
It's just to make your set      
game custom cards, okay,        

1338
01:08:29,071 --> 01:08:30,204
drawn with a custom view,       

1339
01:08:30,272 --> 01:08:33,140
that's what assignment three    
is basically about. We don't    

1340
01:08:33,209 --> 01:08:35,576
have a Friday section again     
this week, unfortunately,       

1341
01:08:35,645 --> 01:08:37,244
due to some scheduling          
conflicts, but                  

1342
01:08:37,313 --> 01:08:39,847
next Friday we will and it'll   
be on source code management.   

1343
01:08:39,916 --> 01:08:44,886
Okay, let's go create           
a new app here.                 

1344
01:08:46,689 --> 01:08:49,623
Okay, so I'm just gonna go      
over here, use this same        

1345
01:08:49,692 --> 01:08:52,894
splash screen but I gonna say   
create a new Xcode project,     

1346
01:08:52,963 --> 01:08:55,930
this has nothing to do          
with concentration here.        

1347
01:08:55,998 --> 01:08:57,631
As always with                  
the single view app,            

1348
01:08:57,700 --> 01:08:59,934
I'm gonna call this             
app PlayingCard.                

1349
01:09:00,003 --> 01:09:01,369
That's what it does to          
show it's a PlayingCard.        

1350
01:09:01,438 --> 01:09:04,571
We're not doing any database,   
we're not doing testing yet.    

1351
01:09:04,640 --> 01:09:07,175
We're gonna put in the same     
place I put concentration,      

1352
01:09:07,244 --> 01:09:09,143
we're not doing source          
code control yet,               

1353
01:09:09,212 --> 01:09:11,011
although like I'm               
saying next Friday,             

1354
01:09:11,080 --> 01:09:14,381
we'll learn about that.         
Here's my project,              

1355
01:09:14,450 --> 01:09:16,784
now this time I'm gonna         
keep my xcassets,               

1356
01:09:16,853 --> 01:09:19,887
right, here's my xcassets       
where my AppIcon is here.       

1357
01:09:19,956 --> 01:09:22,090
I'm gonna keep that because     
I'm gonna use some images for   

1358
01:09:22,158 --> 01:09:25,259
the face cards. So you can      
see how to draw images there.   

1359
01:09:25,328 --> 01:09:27,428
But I'm not gonna use           
my launch screen or             

1360
01:09:27,496 --> 01:09:29,930
my app delegate here. So I'm    
just gonna put them again in    

1361
01:09:29,999 --> 01:09:33,401
supporting files. I just like   
to get them out of the way so   

1362
01:09:33,470 --> 01:09:36,971
they don't really kind          
of demand my attention.         

1363
01:09:37,040 --> 01:09:42,543
Now, before I even go here and  
build my UI for                 

1364
01:09:42,611 --> 01:09:45,779
my playing card thing, we're    
gonna go do our model first.    

1365
01:09:45,848 --> 01:09:47,181
So we're not gonna              
do any UI to start,             

1366
01:09:47,250 --> 01:09:49,783
we're gonna do model first. So  
how do we create model files?   

1367
01:09:49,852 --> 01:09:53,154
Remember, File > New > File,    
and we pick this one right      

1368
01:09:53,223 --> 01:09:56,123
here, Swift File which          
is a non-UI, right, a UI        

1369
01:09:56,192 --> 01:09:59,527
independent thing. And when we  
do that, we ask for the name,   

1370
01:09:59,596 --> 01:10:02,996
so let's first start by doing   
a playing card. Okay, now on    

1371
01:10:03,065 --> 01:10:05,266
my model, it's just gonna       
be a deck of playing cards.     

1372
01:10:05,335 --> 01:10:08,035
So these are gonna be UI        
independent representations     

1373
01:10:08,104 --> 01:10:10,338
of playing cards,               
a deck of that. So              

1374
01:10:10,406 --> 01:10:12,240
we'll start with the playing    
cards itself and                

1375
01:10:12,308 --> 01:10:14,575
then we'll do the deck.         
So here it is right here,       

1376
01:10:14,644 --> 01:10:17,144
import Foundation, I'm just     
gonna have it via struct,       

1377
01:10:17,213 --> 01:10:20,214
there's really no reason for    
it to be a reference type. And  

1378
01:10:20,283 --> 01:10:22,149
it's going to be                
a playing card. Now,            

1379
01:10:22,218 --> 01:10:26,119
a playing card is made of       
what? Well, it's got a suit,    

1380
01:10:26,188 --> 01:10:30,290
which I'm gonna have some type  
for that, and it's got a rank.  

1381
01:10:30,359 --> 01:10:35,063
Right, that's all there is in   
a playing card, suit and rank.  

1382
01:10:35,131 --> 01:10:37,765
So how are we gonna             
represent suit and rank?        

1383
01:10:37,833 --> 01:10:39,967
Well, of course, because I      
wanted to show you enum,        

1384
01:10:40,036 --> 01:10:43,537
l'm gonna do it with an enum.   
So, let's create an enum for    

1385
01:10:43,606 --> 01:10:47,408
the Suit. And then we're also   
gonna create another enum for   

1386
01:10:47,477 --> 01:10:51,412
the Rank. Now let's talk        
about how we would do this.     

1387
01:10:51,480 --> 01:10:54,815
Now, Suit is probably the       
world's simplest enum, right?   

1388
01:10:54,884 --> 01:10:58,853
It's the case, it could be      
spades, or it's hearts, or      

1389
01:10:58,922 --> 01:11:03,590
it's diamonds, or               
it's clubs, that's it.          

1390
01:11:03,659 --> 01:11:06,427
This is probably enough right   
here. That's really all         

1391
01:11:06,496 --> 01:11:09,496
we need to do for an enum. I'm  
gonna take this opportunity     

1392
01:11:09,565 --> 01:11:11,398
to teach you a little           
bit about enum that             

1393
01:11:11,467 --> 01:11:13,234
I didn't mention                
even in the slides.             

1394
01:11:13,303 --> 01:11:17,071
But it was in your homework     
reading, so hopefully you got   

1395
01:11:17,139 --> 01:11:20,508
this which is raw values. What  
are raw values in an enum?      

1396
01:11:20,576 --> 01:11:25,046
Well, it turns out that         
you can associate a fixed       

1397
01:11:25,115 --> 01:11:30,117
constant raw value for          
every one of your cases.        

1398
01:11:30,186 --> 01:11:32,653
Okay, now, Swift will even do   
some of this automatically.     

1399
01:11:32,722 --> 01:11:36,256
For example, if I make my raw   
value type which I specify by   

1400
01:11:36,325 --> 01:11:40,294
just saying, colon type, after  
enum, by making being int then  

1401
01:11:40,363 --> 01:11:43,831
it will automatically make      
this one's raw value be 0.      

1402
01:11:43,899 --> 01:11:47,168
And it's gonna make this        
one's raw value be 1, etc.      

1403
01:11:47,237 --> 01:11:50,838
Okay, 1, 2, 3, 4, 5.            
So, it just goes in order,      

1404
01:11:50,907 --> 01:11:54,375
the lexical order which         
appears in the file. You can    

1405
01:11:54,443 --> 01:11:57,411
also make your raw value        
be a string, for example.       

1406
01:11:57,480 --> 01:12:00,447
And if I do that, Swift will    
automatically make this one be  

1407
01:12:00,516 --> 01:12:03,684
spades, this one will be        
hearts, this will be diamonds.  

1408
01:12:03,753 --> 01:12:06,753
Another words, it makes the     
raw value be A string version   

1409
01:12:06,822 --> 01:12:10,090
of the case. Now, why would     
you ever want raw values?       

1410
01:12:10,159 --> 01:12:13,461
Well, to be honest, I think a   
lot of the raw values support   

1411
01:12:13,530 --> 01:12:16,730
backwards compatibility         
because in Objective-C enums    

1412
01:12:16,799 --> 01:12:19,600
were essentially ints, right?   
Zero, one, two, three, four,    

1413
01:12:19,669 --> 01:12:22,636
five. So raw values it's        
like raw value int. But         

1414
01:12:22,705 --> 01:12:25,740
you could imagine, it might be  
interesting if there is some    

1415
01:12:25,808 --> 01:12:28,776
piece of data that it makes     
sense to associate with all     

1416
01:12:28,845 --> 01:12:32,279
the cases. And again it has to  
be fixed, and constant, and     

1417
01:12:32,348 --> 01:12:35,249
unique. For all the cases but   
still you could imagine that.   

1418
01:12:35,317 --> 01:12:42,089
For example, I kinda saw        
that maybe this suit raw,       

1419
01:12:42,158 --> 01:12:45,660
this might be a good one. If I  
made the raw value be string,   

1420
01:12:45,728 --> 01:12:48,262
maybe having the Unicode        
character that represents       

1421
01:12:48,331 --> 01:12:51,699
the suit. Kind of be            
associated with every case,     

1422
01:12:51,767 --> 01:12:54,602
might be valuable. Now,         
how can you use raw value?      

1423
01:12:54,671 --> 01:12:57,971
Two ways, one, you can create   
a suit by providing the raw     

1424
01:12:58,040 --> 01:13:01,308
value. And it looks just like   
an initializer on suits,        

1425
01:13:01,377 --> 01:13:04,678
suit open parenthesis raw       
value, that's how you do it.    

1426
01:13:04,747 --> 01:13:07,381
And you give it like a heart    
symbol there, and it will give  

1427
01:13:07,450 --> 01:13:09,983
it back. Now that's a failable  
initializer cuz you might give  

1428
01:13:10,052 --> 01:13:14,254
it a string like x, that's not  
one of these four strings. And  

1429
01:13:14,323 --> 01:13:15,990
you can go the other            
way as well.                    

1430
01:13:16,059 --> 01:13:18,992
You can, if you have a suit,    
like suit.spades, you can say,  

1431
01:13:19,061 --> 01:13:20,461
what is the raw value? And      

1432
01:13:20,530 --> 01:13:23,530
you can get this string so      
that might be useful too.       

1433
01:13:23,599 --> 01:13:26,067
We don't really care about      
that in this demo but           

1434
01:13:26,135 --> 01:13:28,936
I just wanted to show you       
about this raw value business.  

1435
01:13:29,005 --> 01:13:31,639
All right, let's go down        
to Rank. Now, honestly,         

1436
01:13:31,707 --> 01:13:34,876
if I were doing Rank, it would  
look like this, case ace,       

1437
01:13:34,944 --> 01:13:39,447
case two, case three,           
all the way up to case jack,    

1438
01:13:39,516 --> 01:13:43,350
case queen, case king.          
This is what now,               

1439
01:13:43,419 --> 01:13:45,753
all the ones in between.        
That's what I would do.         

1440
01:13:45,821 --> 01:13:47,655
But I'm not gonna do it         
this way cuz I wanna            

1441
01:13:47,724 --> 01:13:51,392
show you associated data. This  
is mostly for demo purposes,    

1442
01:13:51,461 --> 01:13:53,494
I would probably just do        
it as these 13 things.          

1443
01:13:53,562 --> 01:13:56,764
That was probably the best      
representation for a rank. But  

1444
01:13:56,833 --> 01:13:59,700
instead, I'm gonna do it        
with associated data and so     

1445
01:13:59,769 --> 01:14:01,936
I'm gonna have case ace,        
then I'm also                   

1446
01:14:02,005 --> 01:14:04,438
gonna have a case face,         
which is a face card.           

1447
01:14:04,507 --> 01:14:06,974
And it's gonna have             
an associated value,            

1448
01:14:07,043 --> 01:14:10,778
which is a string, which is     
either J, Q, or K. So there's   

1449
01:14:10,846 --> 01:14:13,881
gonna be a face card that's     
either jack, queen or king.     

1450
01:14:13,950 --> 01:14:15,349
Terrible representation,        

1451
01:14:15,418 --> 01:14:18,151
at the very least this          
should be another enum,         

1452
01:14:18,220 --> 01:14:20,754
not a string which can be       
anything. It's kinda silly,     

1453
01:14:20,823 --> 01:14:24,525
but anyway. And then I'm also   
gonna have case numeric, okay,  

1454
01:14:24,594 --> 01:14:28,162
for 2, 3, 4, 5, 6, 7, 8, 9,     
10. And it's gonna have,        

1455
01:14:28,230 --> 01:14:30,931
of course, associated data      
int. Now, I could put in        

1456
01:14:30,999 --> 01:14:34,868
here like pips count, a pip     
by the way is one of these,     

1457
01:14:34,937 --> 01:14:38,238
a pip on a card is just one     
of these things. So a numeric   

1458
01:14:38,307 --> 01:14:42,576
card has 2 pips on it, 2 has 2  
pips, 3 has 3 pips and so on.   

1459
01:14:42,645 --> 01:14:45,479
So I could put pipsCount here   
as documentation. But you know  

1460
01:14:45,547 --> 01:14:48,115
what, you actually don't wanna  
do that if it's completely      

1461
01:14:48,183 --> 01:14:51,752
obvious what this would be.     
And if I had a numeric rank,    

1462
01:14:51,820 --> 01:14:54,521
it's completely obvious that    
this is the number, so I do     

1463
01:14:54,590 --> 01:14:57,624
not need that. Now, it's not    
very obvious what this is but   

1464
01:14:57,693 --> 01:15:00,193
as I already told you, this is  
a bad representation anyway.    

1465
01:15:00,262 --> 01:15:01,562
But I just wanna show you       
what it looks like to           

1466
01:15:01,631 --> 01:15:04,164
get the associated data out     
of here and use it, etc.        

1467
01:15:04,233 --> 01:15:07,667
For example, rank is an enum,   
it can have funcs,              

1468
01:15:07,736 --> 01:15:11,872
I could have funcs and vars on  
here. So I'm gonna have a var   

1469
01:15:11,940 --> 01:15:16,210
called order which is an int,   
which is gonna return the,      

1470
01:15:16,278 --> 01:15:19,780
which position the rank         
is in the order. So             

1471
01:15:19,848 --> 01:15:24,518
I'm gonna switch on myself and  
if I am an ace, I'm gonna       

1472
01:15:24,587 --> 01:15:27,655
return 1 cuz that's the first,  
that's card number 1,           

1473
01:15:27,723 --> 01:15:32,960
right? If I am a numeric,       
then I'm going to get my        

1474
01:15:33,028 --> 01:15:37,831
number of pips. And I'm gonna   
return the number of pips.      

1475
01:15:37,900 --> 01:15:40,467
Cuz if I'm an numeric card,     
then however many pips I have,  

1476
01:15:40,536 --> 01:15:43,904
that's my number.               
And then for face,              

1477
01:15:43,973 --> 01:15:47,775
I'm gonna say case .face,       
and I'm gonna, whoops,          

1478
01:15:47,843 --> 01:15:53,113
get the kind, Q or J, or K.     
Now, I'v got the kind,          

1479
01:15:53,182 --> 01:15:57,952
I guess I could say, I'm        
gonna go to the next line and   

1480
01:15:58,021 --> 01:16:02,556
say, if the kind equals J,      
then return 11. And             

1481
01:16:02,624 --> 01:16:06,359
then I guess I could go else    
if the kind. Okay, but I'm,     

1482
01:16:06,428 --> 01:16:09,362
this is getting terrible. This  
is gonna be ugly, awful code.   

1483
01:16:09,431 --> 01:16:12,332
But turns out there's a lot     
better way to do all this       

1484
01:16:12,401 --> 01:16:16,770
which is to go here and say.    
If it's face where I get        

1485
01:16:16,839 --> 01:16:23,677
the kind where kind equals J,   
then return 11.                 

1486
01:16:23,745 --> 01:16:26,613
So this stuff with switch is    
actually a pattern matching     

1487
01:16:26,682 --> 01:16:29,416
language, which you can go and  
learn about.                    

1488
01:16:29,485 --> 01:16:32,219
But one of the things           
it's able to do is where.       

1489
01:16:32,288 --> 01:16:35,055
Where it can kind of narrow     
this down a little bit.         

1490
01:16:35,124 --> 01:16:39,794
So now I could do that for      
all three here, the Q and       

1491
01:16:39,862 --> 01:16:43,264
the king, and return.           
That's why you can see          

1492
01:16:43,332 --> 01:16:45,900
why I use this terrible         
string representations, so      

1493
01:16:45,968 --> 01:16:48,969
I can show you where.           
Now, notice when I do this,     

1494
01:16:49,038 --> 01:16:52,105
I still get this complaint,     
switch must be exhaustive.      

1495
01:16:52,174 --> 01:16:54,341
And it's like, what?            
Look I do ace, I do numeric,    

1496
01:16:54,410 --> 01:16:56,643
I do face,                      
how come it's not exhaustive?   

1497
01:16:56,712 --> 01:16:58,545
Well, because                   
where makes it so               

1498
01:16:58,614 --> 01:17:02,649
these are not counting every    
possible combination of where.  

1499
01:17:02,718 --> 01:17:05,719
It could be, the kind could be  
something else. So, of course,  

1500
01:17:05,788 --> 01:17:08,121
I have to add here              
a default break, or             

1501
01:17:08,190 --> 01:17:10,624
actually I have to return       
something, so I'll return 0.    

1502
01:17:10,693 --> 01:17:13,994
This is also bad design. This   
probably wants to return nil,   

1503
01:17:14,063 --> 01:17:16,697
and this wants to be an         
optional. That would be better  

1504
01:17:16,766 --> 01:17:19,233
design, I'm not gonna do        
it that way. But just so        

1505
01:17:19,302 --> 01:17:23,170
you know, that's bad. I could   
also have static vars here,     

1506
01:17:23,239 --> 01:17:26,740
maybe I have a static var,      
which is all the ranks which    

1507
01:17:26,809 --> 01:17:30,510
returns an array of every       
single possible rank.           

1508
01:17:30,579 --> 01:17:33,047
And I'm gonna have to kind of   
build that up cuz I have all    

1509
01:17:33,115 --> 01:17:35,883
these weird data structure      
here. So I'll create something  

1510
01:17:35,952 --> 01:17:40,955
called allRanks which could     
be a type array of ranks. And   

1511
01:17:41,023 --> 01:17:44,825
let's start it out with and     
ace, notice here by the way     

1512
01:17:44,893 --> 01:17:49,629
that I have to type this        
side here. It can't really      

1513
01:17:49,698 --> 01:17:52,633
deduce this. If I took this     
away right here, let's get      

1514
01:17:52,701 --> 01:17:55,869
these other warnings off here,  
I'll return them allRanks.      

1515
01:17:55,938 --> 01:17:59,039
If I took this typing right     
here, this static typing away,  

1516
01:17:59,108 --> 01:18:01,975
I'm gonna get an error that     
it can't infer this type.       

1517
01:18:02,044 --> 01:18:05,012
And that's because there might  
be another enum that has        

1518
01:18:05,081 --> 01:18:07,381
a case of .ace.                 
So how does it know the,        

1519
01:18:07,450 --> 01:18:10,584
which array of enums this is?   
That's why it's saying type     

1520
01:18:10,653 --> 01:18:13,187
expression is ambiguous         
without more context. So        

1521
01:18:13,255 --> 01:18:15,055
I can add more context          
by putting that type.           

1522
01:18:15,124 --> 01:18:19,160
I could also say rank.ace,      
that would add more context.    

1523
01:18:19,228 --> 01:18:22,730
And now it knows it's           
an array of ranks. So           

1524
01:18:22,798 --> 01:18:27,234
now let's also do for pips in   
2...10, remember dot, dot,      

1525
01:18:27,303 --> 01:18:31,105
dot without the less than       
means including the 10. And     

1526
01:18:31,173 --> 01:18:35,976
now I can say,                  
allRanks.append, Rank.numeric   

1527
01:18:36,045 --> 01:18:40,748
with that pips. So now I've     
added all my numeric ones, and  

1528
01:18:40,817 --> 01:18:43,784
then maybe for the thing,       
face card ones I'll             

1529
01:18:43,853 --> 01:18:47,822
just say allRanks plus equals   
an array that has rank.face,    

1530
01:18:47,890 --> 01:18:53,627
where the kind is a J.          
And then I'll just copy and     

1531
01:18:53,696 --> 01:18:58,999
paste, copy, oops,              
paste, copy, paste and          

1532
01:18:59,068 --> 01:19:03,536
we'll do the Q and the king.    
By the way, if I do this,       

1533
01:19:03,605 --> 01:19:06,440
I only really need to put this  
Rank dot on the first one and   

1534
01:19:06,509 --> 01:19:10,478
it can infer the rest of them.  

1535
01:19:12,047 --> 01:19:16,049
Dots though means dots. So      
I don't need rank dot, because  

1536
01:19:16,118 --> 01:19:18,852
it figured out pretty quick     
this is an array of ranks.      

1537
01:19:18,920 --> 01:19:23,590
These are all ranks, so it      
works. I could do the same all  

1538
01:19:23,659 --> 01:19:26,693
thing up here by the way, too.  
I could have a static var all.  

1539
01:19:26,762 --> 01:19:29,163
I make it static because I'm    
getting all of them here.       

1540
01:19:29,232 --> 01:19:30,764
I'm not talking about           
a specific one so               

1541
01:19:30,832 --> 01:19:32,900
I want them all.                
So this would be,               

1542
01:19:32,969 --> 01:19:37,037
we'll do the same thing here.   
A rank of suit.spades,          

1543
01:19:37,106 --> 01:19:42,042
.hearts, .diamonds,             
and .clubs,                     

1544
01:19:42,110 --> 01:19:46,646
oops, hello .clubs. So          
this is kind of nice to have    

1545
01:19:46,715 --> 01:19:49,416
this static bar which gives me  
all the suits, all the ranks.   

1546
01:19:49,484 --> 01:19:52,586
That's gonna make it a lot      
easier actually to create our   

1547
01:19:52,655 --> 01:19:55,989
playing card deck so let's do   
that. So we've got this nice    

1548
01:19:56,058 --> 01:19:58,492
representation, not so          
nice, but somewhat nice,        

1549
01:19:58,561 --> 01:20:01,361
representation of a playing     
card. Let's go ahead and        

1550
01:20:01,430 --> 01:20:06,099
make a deck, so I'm gonna       
make a New File. A new thing    

1551
01:20:06,168 --> 01:20:10,737
here it's gonna be              
a PlayingCardDeck.              

1552
01:20:10,806 --> 01:20:15,075
Here it is, struct also         
no reason for not to be         

1553
01:20:15,143 --> 01:20:19,713
PlayingCardDeck. And, what do   
I wanna playing card deck.      

1554
01:20:19,782 --> 01:20:21,982
Well, of course I'm gonna       
need a var which is             

1555
01:20:22,051 --> 01:20:24,818
the cards in the deck.          
Right, so                       

1556
01:20:24,887 --> 01:20:28,322
I'm just gonna make that V      
an array of playing card,       

1557
01:20:29,791 --> 01:20:35,062
probably want this to           
be private set. Okay,           

1558
01:20:35,130 --> 01:20:37,931
where I control the cards       
because it's gonna be start up  

1559
01:20:38,000 --> 01:20:41,168
being a full deck. And then I   
probably want some function,    

1560
01:20:41,237 --> 01:20:45,271
like draw which grabs           
a PlayingCard out of there. So  

1561
01:20:45,340 --> 01:20:48,341
that's how you take a playing   
card out of the deck. So        

1562
01:20:48,410 --> 01:20:51,712
how would I implement drawing   
the card out of there? Well,    

1563
01:20:51,781 --> 01:20:54,548
I'm just gonna say,             
let's see what I remember,      

1564
01:20:54,616 --> 01:20:58,252
I think I used something from   
Concentration to do this.       

1565
01:20:58,321 --> 01:21:00,420
Check I did. Yeah, I did.       
Okay, so here,                  

1566
01:21:00,489 --> 01:21:04,024
I'm just gonna see              
if I have any cards.            

1567
01:21:04,093 --> 01:21:09,029
Then I'm going to return        
cards.remove at: hover many     

1568
01:21:09,097 --> 01:21:13,667
cards I have                    
.count.arc4random. So,          

1569
01:21:13,736 --> 01:21:18,939
I need to go over               
to Concentration.               

1570
01:21:19,007 --> 01:21:21,342
Here's concentration            
down at the bottom here.        

1571
01:21:21,410 --> 01:21:23,944
We have arc4random. So          
I'm just gonna grab that out    

1572
01:21:24,013 --> 01:21:28,648
of here. Put that in here, so   
I can use arc4random there,     

1573
01:21:28,717 --> 01:21:33,286
if I don't have any cards left  
then I'm gonna return nil, so   

1574
01:21:33,355 --> 01:21:36,056
I better make this draw our     
return an optional playing      

1575
01:21:36,124 --> 01:21:39,426
card. Okay, so                  
that way people can't add more  

1576
01:21:39,495 --> 01:21:41,795
cards to my deck I just         
start out with a full deck.     

1577
01:21:41,864 --> 01:21:44,031
Okay, I get start out           
with a full deck so             

1578
01:21:44,099 --> 01:21:47,200
I better have an init that      
does that, init is really easy  

1579
01:21:47,269 --> 01:21:50,604
to write given our nice         
plain card structure, sorry,    

1580
01:21:50,673 --> 01:21:54,041
this warning here, cannot use   
mutating member on immutable    

1581
01:21:54,110 --> 01:21:57,377
thing, everybody knows why      
that is. This is a struct,      

1582
01:21:57,446 --> 01:22:00,780
it's a value type, this         
mutated by removing a card,     

1583
01:22:00,849 --> 01:22:03,817
so we have to say this          
is a mutating mark,             

1584
01:22:03,886 --> 01:22:07,187
another good example            
doing that. All right, so       

1585
01:22:07,256 --> 01:22:10,991
here I'm just gonna go          
through all my suits for        

1586
01:22:11,059 --> 01:22:15,462
suit in Suit.all, and for       
rank in Rank.all, okay,         

1587
01:22:15,531 --> 01:22:19,833
then now all these alls that    
we did, but of course look      

1588
01:22:19,902 --> 01:22:24,505
where I put suit, if you look   
at PlayingCard over here, I     

1589
01:22:24,573 --> 01:22:28,508
put suit inside Playingcards.   
See I declared it inside,       

1590
01:22:28,577 --> 01:22:32,379
so Swift allows you to nest     
types, put types in other       

1591
01:22:32,447 --> 01:22:35,048
side. Which makes perfect       
sense here, because Suit        

1592
01:22:35,117 --> 01:22:37,884
only makes sense in the         
context of the PlayingCards,    

1593
01:22:37,953 --> 01:22:41,187
it just makes perfect sense.    
But it does change the name of  

1594
01:22:41,256 --> 01:22:44,324
the Suit,                       
it's no longer called suit,     

1595
01:22:44,393 --> 01:22:49,563
it's called PlayingCard.Suit.   
Playing Card.Suit and           

1596
01:22:49,631 --> 01:22:55,668
this is PlayingCard.Rank,       
PlayingCard.Rank.               

1597
01:22:55,737 --> 01:22:57,838
So nesting just changes         
the names of things and         

1598
01:22:57,907 --> 01:22:59,572
the accessibility               
can do private and              

1599
01:22:59,641 --> 01:23:02,742
stuff like that you might not   
be able to see it. So now that  

1600
01:23:02,811 --> 01:23:07,214
I have that I can just have my  
cards append a playing card,    

1601
01:23:07,283 --> 01:23:10,617
now PlayingCard since it is     
a struct is going to get this   

1602
01:23:10,686 --> 01:23:13,820
automatic initializer,          
you see it right there, so      

1603
01:23:13,889 --> 01:23:16,823
I'll double click on            
this to get that. And           

1604
01:23:16,892 --> 01:23:20,460
the Suit is just gonna be the   
Suit that I'm for in-ing and    

1605
01:23:20,529 --> 01:23:22,196
the rank is the rank I'm for    
in-ing.                         

1606
01:23:22,264 --> 01:23:25,732
So now you can also see         
the nice context here and       

1607
01:23:25,800 --> 01:23:27,167
the nice syntax of for          

1608
01:23:27,235 --> 01:23:30,904
in when this is an array.       
These are arrays.               

1609
01:23:30,973 --> 01:23:33,206
We're just going through each   
element of the array, right.    

1610
01:23:33,275 --> 01:23:35,041
Remember that these             
are arrays right here? See,     

1611
01:23:35,110 --> 01:23:39,646
this is an array for Suits.     
This is an array that we made   

1612
01:23:39,715 --> 01:23:44,218
for Ranks. All right. So        
that's it. Now, last thing I'm  

1613
01:23:44,286 --> 01:23:46,953
gonna do here is just print     
out some cards in my deck to    

1614
01:23:47,022 --> 01:23:50,057
make sure it's working. Kind    
of a cool place to put testing  

1615
01:23:50,125 --> 01:23:52,759
code is back in your View       
Controller. Okay, if you look   

1616
01:23:52,827 --> 01:23:54,828
at your View Controller you     
got this two frame methods.     

1617
01:23:54,897 --> 01:23:55,662
I'm gonna get rid of that one.  

1618
01:23:55,730 --> 01:23:58,031
But I'm gonna keep this one     
which was mentioned in your     

1619
01:23:58,100 --> 01:24:01,468
homework. This is, viewDidLoad  
is a great place to like        

1620
01:24:01,537 --> 01:24:02,869
initialize your                 
View Controller. And            

1621
01:24:02,938 --> 01:24:05,906
also just put like debugging    
code, checking things out,      

1622
01:24:05,974 --> 01:24:08,341
things like that. So,           
here I could do for example,    

1623
01:24:08,410 --> 01:24:10,810
let's just print out 10 random  
cards. I'm gonna say for        

1624
01:24:10,879 --> 01:24:13,313
under bar, cuz I really         
didn't care about the index,    

1625
01:24:13,381 --> 01:24:19,152
in 1...10 cuz I want 10 cards.  
I'm just going to let card      

1626
01:24:19,221 --> 01:24:23,290
equal a playing card deck, so   
I need a playing card deck,     

1627
01:24:23,359 --> 01:24:27,861
var deck = PlayingCardDeck.     
So I'm just                     

1628
01:24:27,930 --> 01:24:33,233
gonna let the card              
= deck.draw.                    

1629
01:24:34,703 --> 01:24:38,271
Now, this is going to be        
an optional playing card right  

1630
01:24:38,340 --> 01:24:40,840
here, right? Optional playing   
card because the deck might be  

1631
01:24:40,909 --> 01:24:43,643
empty, so let's go and say if   
let, although I probably could  

1632
01:24:43,712 --> 01:24:45,912
put exclamation point cuz       
I'm only grabbing 10 cards.     

1633
01:24:45,981 --> 01:24:48,982
I know there's 52 cards in      
a deck, but we'll do if. And    

1634
01:24:49,051 --> 01:24:52,219
now I'm just gonna print        
this card out. And              

1635
01:24:52,287 --> 01:24:56,089
I can print a card by using     
this backslash parenthesis.     

1636
01:24:56,158 --> 01:25:00,093
Swift knows how to print        
out things that have,           

1637
01:25:00,162 --> 01:25:02,128
we'll see what it tries         
to print out when we,           

1638
01:25:02,197 --> 01:25:05,666
when we do this here. So let's  
try that and see what happens.  

1639
01:25:05,734 --> 01:25:08,301
So I have no UI's, so           
this could be a blank UI but    

1640
01:25:08,370 --> 01:25:11,371
it's gonna print this stuff     
out on my console so I really   

1641
01:25:11,440 --> 01:25:16,276
only need to just look at       
my console here, Right, so      

1642
01:25:16,344 --> 01:25:20,580
there's my thing here, so       
here it is printing it out,and  

1643
01:25:20,649 --> 01:25:25,452
it prints out 10 random cards,  
kind, ugly looking right here,  

1644
01:25:25,521 --> 01:25:29,223
it prints out all the vars and  
etc. One thing that's really    

1645
01:25:29,291 --> 01:25:32,358
cool that I don't have time     
to show unfortunately,          

1646
01:25:32,427 --> 01:25:35,662
cuz we've already gone over     
but I'll just mention it,       

1647
01:25:35,731 --> 01:25:38,632
is that you can make it so      
that something prints out       

1648
01:25:38,700 --> 01:25:41,401
really nice when it's           
got that parenthesis,           

1649
01:25:41,469 --> 01:25:44,937
backslash parenthesis, by       
making it implement the custom  

1650
01:25:45,006 --> 01:25:48,741
string convertible protocol.    
So if we made playing card      

1651
01:25:48,810 --> 01:25:51,478
implement custom                
string protocol,                

1652
01:25:51,547 --> 01:25:54,848
the only thing that's in        
that if we do fix it,           

1653
01:25:54,916 --> 01:25:58,585
we'll see what it is,           
is this var description and     

1654
01:25:58,654 --> 01:26:02,489
you can return, like here       
I could return for example      

1655
01:26:02,558 --> 01:26:06,559
a combination of the Rank and   
the Suit, and then I can go     

1656
01:26:06,628 --> 01:26:11,231
make custom string convertible  
for Rank and Suit down here.    

1657
01:26:12,734 --> 01:26:18,104
Comma CustomStringConvertible.  
Implement the description in    

1658
01:26:18,173 --> 01:26:23,309
there as well. Okay,            
which I'm trying to do, so      

1659
01:26:23,378 --> 01:26:27,447
we will go here, we will put    
description, we will go here,   

1660
01:26:27,515 --> 01:26:31,518
we will put the description,    
and we would implement these    

1661
01:26:31,586 --> 01:26:35,989
two vars, and then when we      
print out, it would print this  

1662
01:26:36,057 --> 01:26:39,392
nice string with two            
nice strings with that.         

1663
01:26:39,461 --> 01:26:42,128
Now, we wouldn't get all that   
really verbose printing out.    

1664
01:26:42,197 --> 01:26:45,398
So CustomStringConvertible is   
a nice protocol to implement    

1665
01:26:45,467 --> 01:26:49,902
if you want things to print     
nice in the console. Okay, so   

1666
01:26:49,971 --> 01:26:52,105
that's it.                      
I will see you on Wednesday.    

1667
01:26:52,173 --> 01:26:56,009
We will dive into doing         
the M or the V and C part,      

1668
01:26:56,078 --> 01:26:57,311
which is to draw                
a playing card.                 

1669
01:26:57,379 --> 01:26:58,678
And we'll learn all of          
that custom views and           

1670
01:26:58,747 --> 01:27:01,881
all that, I know there is       
more to touch after that.       

1671
01:27:01,950 --> 01:27:03,616
See you then.                   
>> For                          

1672
01:27:03,685 --> 01:27:13,092
more, please visit              
us at stanford.edu.             
