en/subtitles/10. Multithreading and Autolayout.srt

﻿1
00:00:00,401 --> 00:00:04,703
[MUSIC]                         

2
00:00:04,772 --> 00:00:09,475
Stanford University.            
>> All right, well,             

3
00:00:09,543 --> 00:00:13,578
welcome to Stanford CS193P,     
this is Fall of 2017,           

4
00:00:13,647 --> 00:00:17,249
I think this is lecture number  
10. And we have two very        

5
00:00:17,317 --> 00:00:21,453
important topics today. The     
first is multithreading and     

6
00:00:21,522 --> 00:00:25,457
the second is autolayout size   
classes. So let's talk about    

7
00:00:25,525 --> 00:00:29,161
multithreading first.           
Multithreading is all about,    

8
00:00:29,230 --> 00:00:32,197
for the purposes of this        
lecture anyway, keeping long    

9
00:00:32,266 --> 00:00:36,034
running things off of the main  
queue where the UI runs. And    

10
00:00:36,103 --> 00:00:38,703
that's because we want the UI   
to be incredibly responsive.    

11
00:00:38,772 --> 00:00:41,639
When someone touches down,      
we wanna immediately respond    

12
00:00:41,708 --> 00:00:45,277
to their touch and              
not be having our app freeze.   

13
00:00:45,346 --> 00:00:48,613
It's just death to have your    
app freeze, even for one        

14
00:00:48,682 --> 00:00:51,416
second is an eternity for your  
app to just be not responding   

15
00:00:51,484 --> 00:00:54,953
at all. So multithreading       
is a much bigger topic.         

16
00:00:55,021 --> 00:00:56,688
You can do a lot of other       
stuff with multithreading. But  

17
00:00:56,756 --> 00:00:59,558
we're gonna focus on trying     
to get long running things.     

18
00:00:59,627 --> 00:01:03,828
Things that might block off     
onto other threads. Now,        

19
00:01:03,897 --> 00:01:09,167
the way that multithreading     
works in iOS is using queues.   

20
00:01:09,236 --> 00:01:11,836
So I'm using queue              
in the sense of like            

21
00:01:11,905 --> 00:01:13,504
you go to the movies and        
you stand in line,              

22
00:01:13,573 --> 00:01:15,240
that's a queue, right? And      

23
00:01:15,308 --> 00:01:19,278
what's in the queues in iOS     
multithreading is blocks of     

24
00:01:19,346 --> 00:01:23,147
code, almost always closures    
that you put in this queue.     

25
00:01:23,216 --> 00:01:25,750
And so you got these queues,    
there's multiple different      

26
00:01:25,819 --> 00:01:29,188
kinds of queues. And the        
system then comes along and     

27
00:01:29,256 --> 00:01:32,958
it has threads. Threads         
are threads of execution.       

28
00:01:33,027 --> 00:01:36,027
They're essentially             
opportunities to run code.      

29
00:01:36,096 --> 00:01:40,131
And it can run them kind of     
in parallel. I actually guess   

30
00:01:40,200 --> 00:01:43,235
if you had a multiprocessor,    
or a multi-core processor,      

31
00:01:43,304 --> 00:01:45,971
it could actually run           
things in parallel. But         

32
00:01:46,039 --> 00:01:48,540
even if you had a single-core,  
single thread of execution      

33
00:01:48,608 --> 00:01:51,109
processor, the operating        
system knows how to share       

34
00:01:51,177 --> 00:01:54,346
that time up in tiny little     
increments between all          

35
00:01:54,414 --> 00:01:59,084
of these threads of execution.  
So the OS comes along and       

36
00:01:59,153 --> 00:02:01,719
takes things off the queue,     
the next person in line,        

37
00:02:01,788 --> 00:02:05,123
the next closure in line,       
takes it off and it runs it.    

38
00:02:05,192 --> 00:02:07,659
So that's how we do queues.     
And there's two kinds of        

39
00:02:07,727 --> 00:02:12,196
queues. We have serial queues,  
which is iOS comes along,       

40
00:02:12,265 --> 00:02:14,933
takes something off the queue   
and then as soon as that        

41
00:02:15,001 --> 00:02:17,436
thing has run to completion     
then it goes back and           

42
00:02:17,504 --> 00:02:20,172
gets another one off that       
queue, that's called a serial   

43
00:02:20,240 --> 00:02:22,707
queue. Then there's             
also concurrent queues.         

44
00:02:22,776 --> 00:02:25,177
Where iOS comes along and it    
grabs something off the queue   

45
00:02:25,245 --> 00:02:27,578
and it starts it running and    
maybe it has another thread     

46
00:02:27,647 --> 00:02:28,813
that it can use and             
it goes and                     

47
00:02:28,882 --> 00:02:31,383
grabs another thing before the  
other one is even finished,     

48
00:02:31,451 --> 00:02:33,952
and maybe another. And so       
it might have two or three or   

49
00:02:34,021 --> 00:02:36,455
four or ten things running      
off of the same queue all       

50
00:02:36,523 --> 00:02:39,391
at the same time. That's        
called a concurrent queue.      

51
00:02:39,459 --> 00:02:41,893
So we're gonna talk about both  
of those kinds of queues.       

52
00:02:41,962 --> 00:02:43,895
Cuz we're gonna use both        
of those kinds of queues        

53
00:02:43,964 --> 00:02:46,998
to accomplish what we want.     
And what we want is for         

54
00:02:47,067 --> 00:02:48,834
the UI to be unblocked.         

55
00:02:48,903 --> 00:02:53,671
And the UI runs on              
a single serial queue,          

56
00:02:53,740 --> 00:02:57,976
called the main queue. And not  
only does the UI run on this,   

57
00:02:58,045 --> 00:03:02,080
it's the only queue that can    
have blocks of code put on it   

58
00:03:02,148 --> 00:03:06,418
that do UI things. So we keep   
all of our UI stuff here.       

59
00:03:06,486 --> 00:03:08,787
That way we don't have to       
worry about multithreaded UI,   

60
00:03:08,856 --> 00:03:11,422
where we got two different      
threads of execution both       

61
00:03:11,491 --> 00:03:13,358
trying to draw into             
the same space or whatever.     

62
00:03:13,427 --> 00:03:15,226
We never have to worry          
about that in iOS because       

63
00:03:15,295 --> 00:03:19,765
all drawing, all UI activity    
happens on this one queue.      

64
00:03:19,833 --> 00:03:22,968
And since it's a serial queue,  
it all happens on a single      

65
00:03:23,036 --> 00:03:26,505
thread. So you never have to    
worry about multithreaded UI    

66
00:03:26,573 --> 00:03:30,509
activity going on. Now, the     
way they make queue works is    

67
00:03:30,577 --> 00:03:33,278
it mostly sits there waiting    
for a touch event to happen.    

68
00:03:33,346 --> 00:03:35,513
And when the touch event        
happens, it processes it,       

69
00:03:35,582 --> 00:03:38,049
figures out what code to run,   
runs your code, and then goes   

70
00:03:38,118 --> 00:03:40,785
back into this quiet state,     
waiting for another touch.      

71
00:03:40,854 --> 00:03:43,354
Well, when it's in the quiet    
state, it could also pull       

72
00:03:43,423 --> 00:03:46,358
something off the main queue    
and run it. So you can put      

73
00:03:46,426 --> 00:03:49,961
things onto the main queue,     
blocks of code, and it will     

74
00:03:50,029 --> 00:03:54,132
run in the UI thread, the main  
queue, the main thread. So      

75
00:03:54,201 --> 00:03:57,502
our goal is to get everything   
else off the main queue.        

76
00:03:57,571 --> 00:03:59,971
And anything else is            
gonna take a long time or       

77
00:04:00,040 --> 00:04:01,473
certainly is gonna              
block waiting for               

78
00:04:01,541 --> 00:04:02,740
the network or                  
something like that,            

79
00:04:02,809 --> 00:04:05,943
we definitely want that off     
the main queue. So where do we  

80
00:04:06,012 --> 00:04:09,414
put those things? Well,         
we put those in global queues.  

81
00:04:09,483 --> 00:04:11,983
Now, there's actually you can   
create your own queue to do     

82
00:04:12,052 --> 00:04:15,319
that, but we're gonna use one   
of these four global queues.    

83
00:04:15,388 --> 00:04:18,122
And these are concurrent        
queues that you can throw your  

84
00:04:18,191 --> 00:04:21,593
code on and the system will     
just come along and run them.   

85
00:04:21,661 --> 00:04:24,196
And there's really no           
restriction there about what    

86
00:04:24,264 --> 00:04:27,131
you can put in there. It's      
just, it can't be UI code. But  

87
00:04:27,200 --> 00:04:29,333
you can do other stuff          
all you want. So                

88
00:04:29,402 --> 00:04:31,870
let's talk about those queues.  
How do you get the main queue?  

89
00:04:31,938 --> 00:04:33,538
How do you get a hold of it?    
Well,                           

90
00:04:33,607 --> 00:04:36,974
there is a struct or class      
called DispatchQueue and it     

91
00:04:37,043 --> 00:04:40,878
has a static var called main,   
that gives you the main queue.  

92
00:04:40,947 --> 00:04:42,180
So now you have                 
the main queue,                 

93
00:04:42,248 --> 00:04:44,583
you're ready to go, and I'm     
gonna talk to you soon about    

94
00:04:44,651 --> 00:04:46,718
how you put a block of code     
into the queue, right?          

95
00:04:46,787 --> 00:04:50,154
Put it at the end of the line,  
waiting to run.                 

96
00:04:50,223 --> 00:04:53,725
The global queues               
are a little more expressive.   

97
00:04:53,794 --> 00:04:56,027
There's not just one of them,   
there's four different          

98
00:04:56,096 --> 00:04:59,230
kinds here that we're going to  
talk about. And the four of     

99
00:04:59,299 --> 00:05:03,068
them are different based on     
their quality of service.       

100
00:05:03,136 --> 00:05:06,070
That's what this QOS that       
you see referenced here.        

101
00:05:06,139 --> 00:05:09,106
The quality of service tells    
you what kind of thing,         

102
00:05:09,175 --> 00:05:12,277
what kind of activity the       
blocks that you're gonna put    

103
00:05:12,345 --> 00:05:15,079
on there are doing. So let's    
look at the four. The first     

104
00:05:15,148 --> 00:05:18,950
one is userInteractive. This    
is a very rare one to use.      

105
00:05:19,019 --> 00:05:22,987
This means that the user is in  
the middle of like dragging or  

106
00:05:23,056 --> 00:05:25,757
pinching or something and       
you wanna do something          

107
00:05:25,826 --> 00:05:27,859
off the main queue              
that has to happen so           

108
00:05:27,927 --> 00:05:30,929
fast that it can get back to    
the main queue in the middle    

109
00:05:30,997 --> 00:05:33,698
of that drag. So we're talking  
about highly interactive,       

110
00:05:33,767 --> 00:05:36,233
tiny little pieces of           
work that you might wanna       

111
00:05:36,302 --> 00:05:37,201
throw off the main queue.       

112
00:05:37,270 --> 00:05:40,972
The reason this is unusual to   
use is because it's really so   

113
00:05:41,041 --> 00:05:42,607
tiny and executes so quickly,   

114
00:05:42,675 --> 00:05:45,644
you could probably do           
it on the main queue.           

115
00:05:45,712 --> 00:05:48,313
You're probably waiting for     
it anyway on the main queue.    

116
00:05:48,381 --> 00:05:51,249
So user interactive             
much more readily used.         

117
00:05:51,318 --> 00:05:55,019
The most common one to use is   
the next one, userInitiated.    

118
00:05:55,088 --> 00:05:57,989
So now this is something that   
might take a very long time or  

119
00:05:58,057 --> 00:05:59,224
it might take couple            
of seconds, or                  

120
00:05:59,292 --> 00:06:01,325
it maybe take a few             
milliseconds, you don't know.   

121
00:06:01,394 --> 00:06:04,129
But the point about it is       
the user has asked for          

122
00:06:04,198 --> 00:06:06,598
it right now.                   
They touched on a button.       

123
00:06:06,667 --> 00:06:08,699
They swiped somewhere and       
they are asking for             

124
00:06:08,768 --> 00:06:11,803
something to happen. So         
it was initiated by the user.   

125
00:06:11,872 --> 00:06:15,406
So they expect you to be        
done as soon as possible. So    

126
00:06:15,475 --> 00:06:17,575
you are running this            
in the background.              

127
00:06:17,644 --> 00:06:19,076
It's not happening              
in the main thread,             

128
00:06:19,145 --> 00:06:20,811
but you're trying to do         
it as soon as possible.         

129
00:06:20,880 --> 00:06:24,215
So this is a very               
high priority queue.            

130
00:06:24,284 --> 00:06:26,751
iOS is going to be pulling      
things off that queue and       

131
00:06:26,820 --> 00:06:29,387
running them in threads that    
have very high priority         

132
00:06:29,456 --> 00:06:31,622
because the user's asked for    
it right now.                   

133
00:06:31,691 --> 00:06:34,626
The other two, background and   
utility. So background things   

134
00:06:34,694 --> 00:06:38,129
are things the user hasn't      
asked for right away but        

135
00:06:38,198 --> 00:06:41,232
they're kinda things that they  
expect to be done fairly soon   

136
00:06:41,301 --> 00:06:44,302
or when you have time           
kind of a thing.                

137
00:06:44,371 --> 00:06:46,237
And then utility ones           
are even lower priority,        

138
00:06:46,305 --> 00:06:49,807
those are things that your app  
wants to do as part of its      

139
00:06:49,876 --> 00:06:52,143
architecture. For example,      
you have a big database and     

140
00:06:52,212 --> 00:06:55,213
maybe every week or so or       
every certain amount of data    

141
00:06:55,282 --> 00:06:58,316
in the database, you wanna go   
clean it up to remove though    

142
00:06:58,384 --> 00:07:00,651
out the database. So that's     
just utility operations, so     

143
00:07:00,720 --> 00:07:03,154
that will run at very           
low priority. So                

144
00:07:03,223 --> 00:07:06,924
you pick the global key you     
want based on the quality       

145
00:07:06,993 --> 00:07:10,094
of service you want             
that queue to receive.          

146
00:07:10,163 --> 00:07:11,863
So you have a queue now.        

147
00:07:11,932 --> 00:07:14,399
Either the main queue or one    
of these background concurrent  

148
00:07:14,468 --> 00:07:16,034
queues with a certain           
quality of service.             

149
00:07:16,103 --> 00:07:19,271
How do you put a block          
of code onto that queue?        

150
00:07:19,339 --> 00:07:22,974
Put it in line to, to get       
run at some point. Well,        

151
00:07:23,043 --> 00:07:27,111
you do it with one of these     
two functions, async or sync.   

152
00:07:27,180 --> 00:07:28,813
Each of them take               
one argument.                   

153
00:07:28,881 --> 00:07:32,017
That argument is a block,       
a closure. Takes no arguments,  

154
00:07:32,085 --> 00:07:34,819
return no arguments.            
It returns no values. So        

155
00:07:34,888 --> 00:07:37,489
it's just as basic              
a block as you can be.          

156
00:07:37,557 --> 00:07:40,224
And what it does is it puts     
that block on the queue that    

157
00:07:40,293 --> 00:07:43,462
you're sending it to. Now, the  
difference between async and    

158
00:07:43,530 --> 00:07:45,496
sync is that async puts         
it on the queue and             

159
00:07:45,565 --> 00:07:48,432
returns immediately, and then   
just goes on to the next line   

160
00:07:48,501 --> 00:07:51,802
of code you have. So now it's   
in the queue and someone        

161
00:07:51,871 --> 00:07:53,971
eventually will go pull it      
off the queue and run it but    

162
00:07:54,040 --> 00:07:57,041
you return immediately. Sync,   
it puts it on the queue and     

163
00:07:57,110 --> 00:08:01,045
blocks. Waiting for someone     
to take it off a queue and      

164
00:08:01,114 --> 00:08:03,047
run it and for it to complete.  

165
00:08:03,116 --> 00:08:07,385
So you would never do sync      
on the main queue, right?       

166
00:08:07,453 --> 00:08:09,554
Cuz we never wanna block        
the main queue. But             

167
00:08:09,623 --> 00:08:12,624
you might do sync on            
a non-main queue, in fact,      

168
00:08:12,692 --> 00:08:15,327
you might do sync waiting for   
the main queue                  

169
00:08:15,395 --> 00:08:19,263
to finish something,            
when you're on another queue.   

170
00:08:19,332 --> 00:08:22,099
But mostly we're using async    
here cuz we don't really care.  

171
00:08:22,168 --> 00:08:23,601
async is short for              
asynchronous.                   

172
00:08:23,669 --> 00:08:25,102
We don't really                 
care when it runs,              

173
00:08:25,171 --> 00:08:26,738
we just want it to run          
whenever it can run.            

174
00:08:26,807 --> 00:08:29,340
So that's it. So                
that's really all there is to   

175
00:08:29,409 --> 00:08:31,642
multithreading, believe it or   
not. It just leads to           

176
00:08:31,711 --> 00:08:34,612
a little bit of interesting     
programming, which you're       

177
00:08:34,681 --> 00:08:37,482
gonna see here, and the things  
you have to be careful with.    

178
00:08:37,551 --> 00:08:39,984
Now I'm not gonna talk about    
this, but you can create your   

179
00:08:40,053 --> 00:08:42,953
own queues by just calling      
DispatchQueue's initializer,    

180
00:08:43,022 --> 00:08:46,257
which has this label argument.  
That label just shows up        

181
00:08:46,326 --> 00:08:49,461
in the debugger so you can      
see which queue you're on.      

182
00:08:49,530 --> 00:08:51,262
The debugger's full             
support for queues,             

183
00:08:51,331 --> 00:08:55,867
it'll show you what thread      
everything is on. And           

184
00:08:55,936 --> 00:08:59,937
you can also do a lot of other  
things with multithreading,     

185
00:09:00,006 --> 00:09:03,808
like protecting critical        
sections in your code or        

186
00:09:03,877 --> 00:09:06,644
doing synchronous dispatch or   
locking between things.         

187
00:09:06,713 --> 00:09:08,379
You can do all that stuff, I'm  
not gonna talk about any of     

188
00:09:08,447 --> 00:09:10,114
that. I'm just gonna talk       
about how we're gonna use that  

189
00:09:10,183 --> 00:09:12,583
main queue and those            
background queues to keep       

190
00:09:12,652 --> 00:09:16,754
things off the main queue.      
There's a whole other API to    

191
00:09:16,823 --> 00:09:19,958
this besides the DispatchQueue  
API I'm gonna show you.         

192
00:09:20,026 --> 00:09:23,194
OperationQueue and Operation    
are the two classes involved    

193
00:09:23,263 --> 00:09:26,030
there. And those would          
be used if you're doing         

194
00:09:26,099 --> 00:09:28,733
some huge                       
mathematical equation           

195
00:09:28,801 --> 00:09:31,435
that has a lot of parallel      
processing that you could do.   

196
00:09:31,504 --> 00:09:34,205
But a lot of the parallel       
pieces depend on each other.    

197
00:09:34,274 --> 00:09:37,074
Because Operation allows        
you to set up dependencies.     

198
00:09:37,143 --> 00:09:39,510
This little block code depends  
on this one running first. But  

199
00:09:39,579 --> 00:09:42,413
I'm gonna start these all off   
and just wait until the ones    

200
00:09:42,482 --> 00:09:44,382
that depend get finished.       
Do you see what I'm saying?     

201
00:09:44,451 --> 00:09:45,550
All this dependency             
management.                     

202
00:09:45,618 --> 00:09:47,284
I'm not gonna talk about        
any of that either.             

203
00:09:47,353 --> 00:09:51,222
But you get that by using the   
object-oriented OperationQueue  

204
00:09:51,290 --> 00:09:54,091
and Operation APIs.             
In this class we're just gonna  

205
00:09:54,160 --> 00:09:57,395
use DispatchQueue, okay.        
DispatchQueue is part of what   

206
00:09:57,463 --> 00:10:01,165
we call grand central dispatch  
because we're dispatching       

207
00:10:01,234 --> 00:10:04,836
these blocks of code onto       
these queues. All right, so     

208
00:10:04,904 --> 00:10:08,139
where else are you gonna        
encounter multithreading?       

209
00:10:08,207 --> 00:10:10,875
In addition to do your old      
multithreading like you'll see  

210
00:10:10,943 --> 00:10:13,478
in the demo that I'm gonna do   
today, you also might have      

211
00:10:13,547 --> 00:10:17,615
iOS API that takes blocks       
as arguments. And when it       

212
00:10:17,684 --> 00:10:20,451
runs those blocks, like when    
it finishes doing something or  

213
00:10:20,519 --> 00:10:23,821
it encounters an error, it      
runs those blocks off the main  

214
00:10:23,890 --> 00:10:26,825
queue. And when you call that   
API in iOS, you've gotta        

215
00:10:26,893 --> 00:10:31,162
really be careful that in       
the blocks you give to iOS for  

216
00:10:31,231 --> 00:10:33,765
it to run when it's done,       
don't have any UI in there.     

217
00:10:33,833 --> 00:10:36,468
Or if you do have UI, dispatch  
it back to the main queue.      

218
00:10:38,004 --> 00:10:40,838
Because you can only do UI      
stuff on the main queue. So     

219
00:10:40,907 --> 00:10:43,374
let's see what it looks         
like to call an iOS API,        

220
00:10:43,443 --> 00:10:45,343
like this that takes a block.   

221
00:10:45,411 --> 00:10:50,648
So here is an iOS API called    
URLSession. This is used for    

222
00:10:50,717 --> 00:10:54,051
fetching stuff from             
URLs over the network.          

223
00:10:54,120 --> 00:10:57,222
We already saw in our demo on   
Monday how we did that with     

224
00:10:57,290 --> 00:11:00,658
the data object. But that was   
kind of a dumb thing, you       

225
00:11:00,726 --> 00:11:04,795
can't get any HTTP response     
out of it. The errors,          

226
00:11:04,864 --> 00:11:08,032
you have to handle them kinda   
funny. This is much more        

227
00:11:08,101 --> 00:11:10,735
sophisticated way to request    
something on the network,       

228
00:11:10,803 --> 00:11:15,039
URLSession. As a very           
simple API, you just create     

229
00:11:15,108 --> 00:11:18,242
a URLSession with a certain     
configuration. The great thing  

230
00:11:18,311 --> 00:11:21,079
about URLSession is you can do  
things like I want my timeout   

231
00:11:21,147 --> 00:11:24,048
to be five seconds, for         
example. You can't do that      

232
00:11:24,117 --> 00:11:26,016
with the data thing,            
it's got some built-in time.    

233
00:11:26,085 --> 00:11:28,819
Out here you can specify how    
long you wanna wait before      

234
00:11:28,888 --> 00:11:30,755
you time out on the network or  
whatever. So                    

235
00:11:30,824 --> 00:11:32,757
you create your session         
with some configuration,        

236
00:11:32,825 --> 00:11:34,592
usually the default             
configuration.                  

237
00:11:34,661 --> 00:11:37,294
Now all you need to do to       
make it go fetch something      

238
00:11:37,363 --> 00:11:38,763
is create a URL and             

239
00:11:38,832 --> 00:11:42,266
call the function on the        
session called dataTask with    

240
00:11:42,335 --> 00:11:46,104
URL. A dataTask with URL        
creates what's called a data    

241
00:11:46,172 --> 00:11:48,406
task, a task to                 
go get some data.               

242
00:11:48,475 --> 00:11:51,342
And it starts out paused,       
and then you're gonna say,      

243
00:11:51,411 --> 00:11:54,245
the very next line you almost   
always say resume, and          

244
00:11:54,313 --> 00:11:57,882
that starts it going. Now       
notice that dataTask with URL   

245
00:11:57,950 --> 00:12:00,818
function takes another          
argument. I'm using trailing    

246
00:12:00,887 --> 00:12:02,987
closure notation to put it      
outside the parentheses, but    

247
00:12:03,056 --> 00:12:05,656
it's just an argument           
to dataTask there.              

248
00:12:05,725 --> 00:12:09,727
And that argument is a closure  
that this URL thing is gonna    

249
00:12:09,796 --> 00:12:13,564
call, URLSession is gonna       
call when it gets the data.     

250
00:12:13,632 --> 00:12:16,066
And you can see the closure     
actually takes the data that    

251
00:12:16,135 --> 00:12:19,537
it gets as an argument, which   
makes sense. Also response and  

252
00:12:19,606 --> 00:12:23,241
error which is HTTP response    
and any error that might come   

253
00:12:23,309 --> 00:12:26,077
along in there, okay. So don't  
worry too much about that.      

254
00:12:26,145 --> 00:12:28,246
But the bottom line is          
you give it a closure.          

255
00:12:28,315 --> 00:12:31,749
Now the interesting thing       
about this closure is it's      

256
00:12:31,817 --> 00:12:36,653
executed off the main queue.    
So if you wanna do UI things    

257
00:12:36,722 --> 00:12:39,057
in there, which you might well  
wanna do because you wanna do   

258
00:12:39,125 --> 00:12:41,625
something with the data you     
got back, put it in the UI.     

259
00:12:41,694 --> 00:12:44,295
Can you do it in there? And     
the answer is, no, you cannot,  

260
00:12:44,364 --> 00:12:49,967
because you cannot do UI        
stuff off the main queue. But   

261
00:12:50,036 --> 00:12:52,770
what if I need to do UI stuff?  
How do I do it?                 

262
00:12:52,839 --> 00:12:56,207
Well, you're just going to      
dispatch back to the main       

263
00:12:56,276 --> 00:12:59,410
queue in there.                 
DispatchQueue.main,             

264
00:12:59,479 --> 00:13:03,714
get the main queue, async, put  
a closure on that queue, and    

265
00:13:03,783 --> 00:13:08,085
you do your UI stuff in there.  
Now this all it looks almost    

266
00:13:08,154 --> 00:13:10,587
too good to be true it's so     
easy, right? But there's        

267
00:13:10,656 --> 00:13:13,624
a little bit to think it about  
here in terms of timing.        

268
00:13:13,693 --> 00:13:15,559
So I'm gonna walk you through   
the timing of this code.        

269
00:13:15,628 --> 00:13:18,095
This is the exact same code     
with just some labels on        

270
00:13:18,164 --> 00:13:19,096
the lines here. And             

271
00:13:19,165 --> 00:13:21,466
we're gonna go through this     
step by step how this happens.  

272
00:13:21,534 --> 00:13:25,336
First, line a executes., of     
course, we're starting to do    

273
00:13:25,405 --> 00:13:29,607
this URLSession request. Then   
line b where we create this     

274
00:13:29,676 --> 00:13:32,876
dataTask, this line b           
returns immediately.            

275
00:13:32,945 --> 00:13:35,313
It immediately creates          
the dataTask and                

276
00:13:35,382 --> 00:13:37,148
grabs that closure and          
hold on to it for               

277
00:13:37,216 --> 00:13:40,317
a second and starts the task    
paused. So that's the second    

278
00:13:40,386 --> 00:13:45,155
line that executes. Then line   
g. Because of the fact line b   

279
00:13:45,224 --> 00:13:48,393
returned immediately of course  
line g executes next, and you   

280
00:13:48,461 --> 00:13:52,263
say, resume. That starts that   
task fetching the URL over      

281
00:13:52,331 --> 00:13:56,600
the network in the background,  
not in the main queue. So       

282
00:13:56,669 --> 00:14:01,738
the next line that              
executes is line h.             

283
00:14:01,807 --> 00:14:05,242
Because resume just instantly   
starts in the background, but   

284
00:14:05,311 --> 00:14:07,378
line h continues in             
the foreground and              

285
00:14:07,446 --> 00:14:11,882
runs. What do you think the     
next line that executes is?     

286
00:14:11,951 --> 00:14:15,653
Well, about five seconds or     
five hours or five minutes or   

287
00:14:15,722 --> 00:14:18,455
whatever later,                 
line c will execute.            

288
00:14:18,524 --> 00:14:23,026
This happens when the data      
comes back from the URL. So     

289
00:14:23,095 --> 00:14:24,395
now I'm doing something         
with the data,                  

290
00:14:24,464 --> 00:14:27,798
processing it, looking at it,   
we're doing whatever I want.    

291
00:14:27,867 --> 00:14:31,001
Then line d executes because    
I need to do some UI work.      

292
00:14:31,070 --> 00:14:35,139
So I dispatch a closure that    
says do UI stuff here onto      

293
00:14:35,208 --> 00:14:37,842
the main queue, and it gets in  
line to run on the main queue.  

294
00:14:37,910 --> 00:14:39,009
But the main queue              
might be busy or                

295
00:14:39,078 --> 00:14:41,713
there might be other things on  
the main queue ahead of this    

296
00:14:41,781 --> 00:14:44,415
closure. So this is not         
gonna execute immediately.      

297
00:14:44,483 --> 00:14:47,885
Instead, line f will execute    
immediately. So notice that     

298
00:14:47,954 --> 00:14:53,357
line e has still not run, but   
line f has. What happens next?  

299
00:14:53,426 --> 00:14:57,928
Finally, line e runs whenever   
the main queue is quiet and     

300
00:14:57,997 --> 00:15:00,698
ready to do it. And all the     
other closures that were ahead  

301
00:15:00,767 --> 00:15:03,801
of it in line run.              
Then e runs, okay.              

302
00:15:03,870 --> 00:15:07,071
So do you see how what's        
happening with what runs when?  

303
00:15:07,139 --> 00:15:09,773
So the code makes it look like  
the stuff will run top to       

304
00:15:09,842 --> 00:15:12,309
bottom, but it doesn't.         
It runs a little out of order   

305
00:15:12,378 --> 00:15:16,113
there because it's happening    
in a background thread.         

306
00:15:16,182 --> 00:15:19,983
All right, so the summary is    
that it goes a b g h c d f e,   

307
00:15:20,052 --> 00:15:24,288
but this is only                
the most likely order           

308
00:15:24,357 --> 00:15:25,823
because this is threads.        

309
00:15:25,892 --> 00:15:27,558
Things are happening            
simultaneously.                 

310
00:15:27,627 --> 00:15:30,494
It is possible, believe it or   
not, that line e,               

311
00:15:30,563 --> 00:15:34,165
the UI stuff, could             
actually run before line f.     

312
00:15:34,234 --> 00:15:36,234
It's possible that it           
dispatches to the main queue,   

313
00:15:36,303 --> 00:15:37,635
and the main queue              
immediately grabs it.           

314
00:15:37,703 --> 00:15:39,103
The main queue is a very        
high priority queue.            

315
00:15:39,172 --> 00:15:40,805
Maybe it immediately            
grabs it and                    

316
00:15:40,874 --> 00:15:43,440
starts running it before f      
has a chance to even run.       

317
00:15:43,509 --> 00:15:45,009
And if you have                 
a single processor,             

318
00:15:45,078 --> 00:15:49,346
that would definitely be        
possible. So that's the most    

319
00:15:49,415 --> 00:15:51,882
important thing to understand   
about multithreading is its     

320
00:15:51,951 --> 00:15:53,350
kind of asynchronous nature,    
and                             

321
00:15:53,419 --> 00:15:55,520
that will take some getting     
used to, believe me.            

322
00:15:55,588 --> 00:15:58,055
All right, so the demo I'm      
gonna do of multithreading is   

323
00:15:58,123 --> 00:16:00,725
we're gonna take Cassini and    
we're gonna enhance its user    

324
00:16:00,793 --> 00:16:05,263
interface a little bit.         
And then we are going to,       

325
00:16:05,331 --> 00:16:08,966
where is Cassini? Do I have     
Cassini up here? Yeah, I do.    

326
00:16:09,034 --> 00:16:11,602
Let's just hide that.           
Whoops, not mess with that.     

327
00:16:11,670 --> 00:16:16,441
Let's just go like this. All    
right, so here's Cassini. So    

328
00:16:16,509 --> 00:16:19,109
right now, Cassini just         
displays this image,            

329
00:16:19,178 --> 00:16:23,380
this demo URL that we made      
right here. So I'm going to     

330
00:16:23,449 --> 00:16:26,550
comment that out and            
instead, I'm going to build     

331
00:16:26,619 --> 00:16:29,120
some UI to use my               
ImageViewController as          

332
00:16:29,189 --> 00:16:30,988
a generic image viewing MVC.    

333
00:16:31,057 --> 00:16:33,890
I'm gonna add another MVC       
similar to like we did with     

334
00:16:33,959 --> 00:16:38,195
the themes, when we chose the   
themes. This MVC is gonna pick  

335
00:16:38,264 --> 00:16:41,265
which Cassini image I           
wanna look at. I have some      

336
00:16:41,334 --> 00:16:44,668
Cassini images which I'll show  
you the URLs for in a second,   

337
00:16:44,737 --> 00:16:49,172
that were taken related to the  
Cassini probe to Saturn. And I  

338
00:16:49,241 --> 00:16:53,510
want to look at them onscreen.  
So let's start by doing our UI  

339
00:16:53,579 --> 00:16:57,281
first. So let's just go all     
UI here. So here's our UI,      

340
00:16:57,350 --> 00:17:01,918
our existing, kinda             
generic image-viewing MVC.      

341
00:17:01,987 --> 00:17:05,122
And I'm gonna go down here and  
create a new view controller.   

342
00:17:05,191 --> 00:17:08,726
Just drag it out here. Course,  
view controllers all need to    

343
00:17:08,795 --> 00:17:13,464
have their own subclass. So     
I will create a new subclass.   

344
00:17:13,533 --> 00:17:18,302
I'm going to call this my       
CassiniViewController.          

345
00:17:18,370 --> 00:17:20,804
I'm going to make sure I        
put it in the right place,      

346
00:17:20,873 --> 00:17:24,175
not at the project level.       
All right,                      

347
00:17:24,244 --> 00:17:26,877
so here it is.                  
I'm going to select it and      

348
00:17:26,946 --> 00:17:30,214
make sure I go to my identity   
inspector over here and         

349
00:17:30,283 --> 00:17:33,951
change its identity to          
be ImageViewController.         

350
00:17:34,020 --> 00:17:36,320
I'm going to have it            
be the place I enter.           

351
00:17:37,524 --> 00:17:38,422
Let's actually go ahead and     

352
00:17:38,490 --> 00:17:41,358
build our whole UI. In fact,    
let's make this both on iPad    

353
00:17:41,427 --> 00:17:43,727
and on iPhone. So               
I'm going to take this guy and  

354
00:17:43,796 --> 00:17:46,097
I'm going to embed it in        
a navigation controller.        

355
00:17:46,165 --> 00:17:47,932
I'm going to take this view     
controller right here.          

356
00:17:48,001 --> 00:17:51,102
Embed it, Embed in              
Navigation Controller.          

357
00:17:51,170 --> 00:17:54,605
And then I'm going to take      
this whole thing, right here,   

358
00:17:54,674 --> 00:17:57,341
and make this be the master     
of a split view. And            

359
00:17:57,410 --> 00:18:00,644
this is going to be my detail.  
So let's zoom way out here and  

360
00:18:00,713 --> 00:18:06,183
grab a Split View Controller.   
This out, as usual, our         

361
00:18:06,251 --> 00:18:09,286
Split View Controller brings    
out the document outline and    

362
00:18:09,355 --> 00:18:13,424
has all this extra stuff here.  
Whoops, we don't need any of    

363
00:18:13,492 --> 00:18:16,460
this extra stuff, so            
let's delete that. Then we'll   

364
00:18:16,528 --> 00:18:21,832
zoom back in. Grab our          
Split View Controller here.     

365
00:18:21,900 --> 00:18:25,536
Let's make the Split View       
Controller be where we enter.   

366
00:18:25,605 --> 00:18:30,574
All right, let's make this be   
our master. Let's grab this     

367
00:18:30,643 --> 00:18:36,047
and bring it down here and      
make it be our detail. So       

368
00:18:36,115 --> 00:18:38,282
we've set this up. Hopefully,   
you're used to doing this.      

369
00:18:38,351 --> 00:18:39,650
You're doing this               
in your homework,               

370
00:18:39,719 --> 00:18:43,320
pretty straightforward. So now  
we got a UI that will pretty    

371
00:18:43,389 --> 00:18:45,623
much work on both devices.      

372
00:18:45,692 --> 00:18:48,459
Both Split View on iPad and     

373
00:18:48,528 --> 00:18:52,363
then also it will               
work on an iPhone.              

374
00:18:52,431 --> 00:18:56,400
So we need to prepare this      
imagery controller right here.  

375
00:18:56,469 --> 00:18:58,969
And we need to have or sorry,   
prepare this one. Then we need  

376
00:18:59,038 --> 00:19:01,905
some UI in this one to          
choose the Cassini image.       

377
00:19:01,974 --> 00:19:05,075
So I'm gonna do the same kind   
of silly thing I did before,    

378
00:19:05,144 --> 00:19:08,946
but not quite as silly as it    
was the last time. Which is to  

379
00:19:09,015 --> 00:19:12,082
put three buttons in here. So   
I have three Cassini images,    

380
00:19:12,151 --> 00:19:13,884
so I'm gonna have               
three buttons.                  

381
00:19:13,953 --> 00:19:17,888
Let's go ahead and              
make them big font here.        

382
00:19:17,957 --> 00:19:21,291
40 points seems to be my        
favorite size font. And         

383
00:19:21,360 --> 00:19:25,329
the three images I have         
a image of Cassini itself, and  

384
00:19:25,397 --> 00:19:29,566
then I have an image of Earth,  
and                             

385
00:19:29,635 --> 00:19:34,505
then I have an image            
of Saturn. Okay.                

386
00:19:34,574 --> 00:19:38,476
Oops, not Satrun, Saturn. Okay  
cuz Cassini is a probe going    

387
00:19:38,544 --> 00:19:41,879
from Earth to Saturn.           
And I'll do a little review.    

388
00:19:41,948 --> 00:19:45,616
We're gonna to embed this in    
the stack view. I'm gonna make  

389
00:19:45,684 --> 00:19:49,420
it fill, I'm going to make      
them be the same size buttons.  

390
00:19:49,489 --> 00:19:52,622
I'm gonna set the standard      
spacing here.                   

391
00:19:52,691 --> 00:19:56,160
Let's go ahead and put this in  
the middle. I'll go ahead and   

392
00:19:56,228 --> 00:19:59,696
control+drag to make this       
always be centered vertically   

393
00:19:59,765 --> 00:20:03,500
and horizontally. You can see   
it's a little off-center from   

394
00:20:03,569 --> 00:20:05,603
there. So I'm gonna go over     
to my document outline,         

395
00:20:05,671 --> 00:20:09,139
which is where we resolve       
all auto layout issues,         

396
00:20:09,208 --> 00:20:11,542
with this button up here.       
I'll click on that.             

397
00:20:11,611 --> 00:20:13,877
Here's all my problems.         
It's just this one problem.     

398
00:20:13,946 --> 00:20:16,513
This thing's not positioned     
where it should be.             

399
00:20:16,582 --> 00:20:18,749
I'm gonna click the little      
triangle and fix it,            

400
00:20:18,817 --> 00:20:21,218
either by updating my frames    
or updating my constraints.     

401
00:20:21,287 --> 00:20:23,387
In this case,                   
my constraints are right but    

402
00:20:23,455 --> 00:20:25,756
the frame is wrong, so          
I will fix the misplacement.    

403
00:20:25,825 --> 00:20:28,425
It moved it,                    
no more auto layout issues.     

404
00:20:28,494 --> 00:20:32,562
We have a great UI there. It's  
a quick review of auto layout.  

405
00:20:32,631 --> 00:20:35,066
I'm gonna try and review auto   
layout as much as I can,        

406
00:20:35,134 --> 00:20:37,868
because there's a lot to        
auto layout. All right, so      

407
00:20:37,937 --> 00:20:41,772
now we're going to set up some  
segues from our master here to  

408
00:20:41,841 --> 00:20:46,143
our detail and I'm gonna do     
this one a little differently.  

409
00:20:46,212 --> 00:20:48,579
Before, remember before,        
I had one kind of segue,        

410
00:20:48,647 --> 00:20:51,749
one identifier and then I       
looked back the button title.   

411
00:20:51,817 --> 00:20:53,651
And I said,                     
that's kinda bad code,          

412
00:20:53,719 --> 00:20:56,153
because what if those button    
titles were in French?          

413
00:20:56,221 --> 00:20:57,354
And then it's like so           

414
00:20:57,423 --> 00:20:59,456
I'm gonna do this a little bit  
different way. The real way     

415
00:20:59,525 --> 00:21:02,092
I would do this probably        
is I'd use a table view.        

416
00:21:02,160 --> 00:21:06,129
Which is this extensible table  
list of things. And then I      

417
00:21:06,198 --> 00:21:09,433
could both add more things and  
also, I could easily find out   

418
00:21:09,502 --> 00:21:11,969
which one was picked by its     
index into the role of table,   

419
00:21:12,038 --> 00:21:14,071
but I haven't taught            
you table view yet. So          

420
00:21:14,139 --> 00:21:17,408
that's why we're using these    
button solutions. All right,    

421
00:21:17,476 --> 00:21:20,377
so I'm going to create a segue  
from Cassini down to here.      

422
00:21:20,446 --> 00:21:21,745
It's going to show detail       

423
00:21:21,814 --> 00:21:24,548
because we're in a split view.  
Same thing with Earth.          

424
00:21:24,617 --> 00:21:27,918
Show detail. And                
with Saturn, show detail.       

425
00:21:27,986 --> 00:21:30,954
But instead of having them      
all have the same identifier,   

426
00:21:31,023 --> 00:21:33,357
I'm gonna give them each        
a different identifier,         

427
00:21:33,425 --> 00:21:36,894
which is which image to open.   
That way if I change            

428
00:21:36,963 --> 00:21:39,797
the language here, they'll all  
still open the proper image.    

429
00:21:39,866 --> 00:21:42,265
So here, this one is            
the Cassini one, right? So      

430
00:21:42,334 --> 00:21:45,936
I'm gonna have its identifier   
just be Cassini. And then this  

431
00:21:46,005 --> 00:21:49,840
one is the Earth one, so we'll  
have its identifier be Earth.   

432
00:21:49,909 --> 00:21:53,743
And this one is Saturn, so      
we'll have this be Saturn.      

433
00:21:53,812 --> 00:21:55,746
So I am just setting the        
identifier of these segues, so  

434
00:21:55,815 --> 00:21:59,650
I know which one to show.       
A little bit better,            

435
00:21:59,718 --> 00:22:05,355
more kind of accurate way to    
do that. But now, of course,    

436
00:22:05,424 --> 00:22:08,626
we need to prepare our generic  
Image View Controller,          

437
00:22:08,694 --> 00:22:12,062
set its model, its public       
model which is that image URL.  

438
00:22:12,130 --> 00:22:14,565
So let's go look at our         
CassiniViewController code      

439
00:22:14,633 --> 00:22:17,801
right here. We'll clean out     
all the junk. These are view    

440
00:22:17,870 --> 00:22:19,736
controller lifecycle methods,   
hopefully you recognize.        

441
00:22:19,805 --> 00:22:23,507
We'll get rid of those. Let's   
uncomment out our navigation    

442
00:22:24,643 --> 00:22:27,478
stuff here and                  
do our prepare for              

443
00:22:27,547 --> 00:22:29,846
segue. So how am I gonna        
prepare for the segue?          

444
00:22:29,915 --> 00:22:32,750
Well, I need to look at the     
identifier to see which image   

445
00:22:32,818 --> 00:22:36,486
I'm gonna show. So let's say,   
if we can let identifier =      

446
00:22:36,555 --> 00:22:40,558
the segue's identifier,         
in other words, it's not nil.   

447
00:22:40,626 --> 00:22:43,127
Then I'm just gonna see         
if I can get a URL.             

448
00:22:43,196 --> 00:22:45,896
Here's my demo URLs.            
I showed you this before,       

449
00:22:45,964 --> 00:22:49,432
but let's show it again. See I  
have this dictionary here,      

450
00:22:49,501 --> 00:22:52,770
this NASA dictionary that       
has strings as the keys and     

451
00:22:52,838 --> 00:22:56,107
URLs as the values.             
And so for each one, Cassini,   

452
00:22:56,175 --> 00:22:58,641
I have a little URL.            
For Earth, I have a URL.        

453
00:22:58,710 --> 00:22:59,710
For Saturn, I have a URL.       

454
00:22:59,778 --> 00:23:03,080
So I'm just gonna look up in    
this dictionary to see if I     

455
00:23:03,148 --> 00:23:06,716
can find the name of            
the identifier. And if I can,   

456
00:23:06,785 --> 00:23:11,054
then I know I have an image     
to show. So let's do that.      

457
00:23:11,123 --> 00:23:15,092
I'm just going to say,          
oops, not identifer,            

458
00:23:15,161 --> 00:23:19,596
identifier, fier,               
fier. Fier! Okay.               

459
00:23:19,665 --> 00:23:24,701
So here I'm going to say, if I  
can let the URL equal my demo   

460
00:23:24,770 --> 00:23:30,607
URLs.NASA sub the identifier.   
Okay so                         

461
00:23:30,676 --> 00:23:33,711
if that comes back true, I was  
able to get an image and so     

462
00:23:33,779 --> 00:23:36,847
now I can do a segue to a       
image showing view controller,  

463
00:23:36,916 --> 00:23:39,783
which is my Image View          
Controller I built in the last  

464
00:23:39,852 --> 00:23:44,154
lecture. So I'm gonna           
say if can let imageVC =        

465
00:23:44,223 --> 00:23:49,159
segue.destination as? An        
ImageViewController then I can  

466
00:23:49,228 --> 00:23:52,763
set the ImageViewController's   
public API.                     

467
00:23:52,832 --> 00:23:54,464
Let's remind ourselves          
what that is.                   

468
00:23:54,533 --> 00:23:57,167
Here's the ImageVewController   
that we worked on last time.    

469
00:23:57,235 --> 00:24:01,004
Its public API was this.        
ImageURL sets the URL you       

470
00:24:01,073 --> 00:24:05,842
want, so we're gonna set that.  
Public API imageURL equal to    

471
00:24:05,911 --> 00:24:09,947
the URL. I'm also going to      
set the title of this thing.    

472
00:24:10,015 --> 00:24:12,483
And here I am going to          
use the Button title.           

473
00:24:12,552 --> 00:24:16,086
Sender as UI button.            
If it's in fact a button,       

474
00:24:16,155 --> 00:24:20,190
get its current title. Now      
is this bad? This was not so    

475
00:24:20,259 --> 00:24:23,527
bad because here I'm setting    
the title of that destination   

476
00:24:23,595 --> 00:24:25,862
image view controller to be     
the same as the title of the    

477
00:24:25,931 --> 00:24:28,531
button. Well then presumably    
the button is localized to the  

478
00:24:28,600 --> 00:24:32,102
local language, so I'm putting  
button title now in the title.  

479
00:24:32,171 --> 00:24:36,674
It's not so bad. This one's     
not bad because we're talking   

480
00:24:36,742 --> 00:24:39,142
about UI elements that have     
been localized in both cases    

481
00:24:39,211 --> 00:24:43,547
right there. So that's all we   
really need to do to prepare,   

482
00:24:43,615 --> 00:24:45,449
let's go ahead and run and      
see if this works.              

483
00:24:45,517 --> 00:24:49,686
We'll run this on the iPhone    
here, and hopefully when we     

484
00:24:49,755 --> 00:24:53,023
click on one of those           
buttons it will go out and      

485
00:24:53,092 --> 00:24:57,061
hopefully the network will      
work today and it will fetch    

486
00:24:57,129 --> 00:25:00,430
those images. Now those         
images are quite large, so      

487
00:25:00,499 --> 00:25:06,569
it might take a while to do.    
Right, so here we go. It comes  

488
00:25:06,638 --> 00:25:09,306
up showing the detail, right,   
we didn't put the little split  

489
00:25:09,374 --> 00:25:11,274
view trick in there to make     
it collapse the thing.          

490
00:25:11,343 --> 00:25:14,178
So let's go back here, here we  
go, here's our UI, Cassini,     

491
00:25:14,246 --> 00:25:19,416
Earth and Saturn. Let's try     
Cassini. It didn't work. So     

492
00:25:19,484 --> 00:25:21,017
why did this not work?          

493
00:25:21,086 --> 00:25:28,058
Let's go                        
>> [INAUDIBLE]                  

494
00:25:28,127 --> 00:25:28,826
>> Sorry I missed,              

495
00:25:28,894 --> 00:25:31,495
did something in the story      
board let's go back and look.   

496
00:25:31,564 --> 00:25:33,463
I love it when the students     
are on top of it.               

497
00:25:33,532 --> 00:25:37,500
So what did I do here?          
>> [INAUDIBLE]                  

498
00:25:37,569 --> 00:25:39,603
>> This one right here? Yeah,   

499
00:25:39,671 --> 00:25:43,941
that's interesting, yeah.       
So when I set the identity of   

500
00:25:44,010 --> 00:25:47,044
this right here,                
I accidentally set it to image  

501
00:25:47,112 --> 00:25:50,046
view controller, it should be   
a Cassini view controller.      

502
00:25:50,115 --> 00:25:51,715
Where is my Cassini view        
controller, there it is.        

503
00:25:51,784 --> 00:25:52,849
Good catch right there. Could,  

504
00:25:52,918 --> 00:25:55,385
probably could have looked      
at that for five minutes.       

505
00:25:55,454 --> 00:25:58,455
All right, so yeah. So I        
accidentally, after I made it,  

506
00:25:58,524 --> 00:26:00,757
I picked the wrong one,         
so here we go. And              

507
00:26:00,826 --> 00:26:02,225
that's a common thing           
to do actually,                 

508
00:26:02,294 --> 00:26:05,095
to either forget to set this    
guy's identity or to set it to  

509
00:26:05,164 --> 00:26:08,198
something wrong. So why did     
that make this not work?        

510
00:26:08,267 --> 00:26:11,668
Well, because this prepare      
right here was not getting      

511
00:26:11,736 --> 00:26:14,571
called because that was not     
a CassiniViewController but     

512
00:26:14,640 --> 00:26:23,280
now it is, so let's try it      
again. Okay so here we go,      

513
00:26:23,349 --> 00:26:27,284
go back, let's try. Cassini.    
Hopefully, it doesn't seem to   

514
00:26:27,352 --> 00:26:32,822
be working. No! It crashed.     
Okay now, it crashes.           

515
00:26:32,891 --> 00:26:35,458
We hate crashes but hopefully   
we're getting comfortable with  

516
00:26:35,527 --> 00:26:38,661
looking at why crashes happen   
especially looking here at our  

517
00:26:38,730 --> 00:26:41,064
back trace. So let's look and   
see what happened here.         

518
00:26:41,132 --> 00:26:44,267
Why did this crash? Well we're  
crashing in our image view      

519
00:26:44,336 --> 00:26:46,470
controller right, there's       
our image view controller.      

520
00:26:46,538 --> 00:26:49,506
Where we set the image. This    
is where we set the image to    

521
00:26:49,574 --> 00:26:52,876
something, we size to fit, and  
then we adjust the content      

522
00:26:52,945 --> 00:26:57,247
area of our scrollView, right?  
But no, something's nil,        

523
00:26:57,316 --> 00:27:00,617
here. Well we know the          
imageView can't be nil because  

524
00:27:00,686 --> 00:27:03,420
we set it right off the bat     
to be in imageView,             

525
00:27:03,489 --> 00:27:05,088
so it must be that              
this scrollView is nil.         

526
00:27:05,157 --> 00:27:08,892
Let's see. Self, here's         
my self down here. Yeah,        

527
00:27:08,961 --> 00:27:12,095
sure enough self                
scrollView is nil. Well,        

528
00:27:12,163 --> 00:27:15,732
let's go back up the trace      
here and see what's happening.  

529
00:27:15,801 --> 00:27:18,202
This is happening because       
someone set our public API,     

530
00:27:18,270 --> 00:27:21,104
that makes sense. And we're     
setting the image to nil to     

531
00:27:21,173 --> 00:27:24,975
clear out any old image. And    
then where was that call from?  

532
00:27:25,043 --> 00:27:29,312
Prepare for segue, yeah. Okay   
any time you have a crash,      

533
00:27:29,381 --> 00:27:31,481
something's nil, and            
you were in your prepare for    

534
00:27:31,550 --> 00:27:35,351
segue you're gonna go, oops.    
I have an outlet and            

535
00:27:35,420 --> 00:27:37,421
it was not set because          
that's what happens right?      

536
00:27:37,489 --> 00:27:40,056
Prepare happens before your     
outlets are set and so          

537
00:27:40,125 --> 00:27:42,893
when we look up here, this      
is an outlet. Scroll view is    

538
00:27:42,961 --> 00:27:45,962
an outlet, right here, and      
it's not yet been set because   

539
00:27:46,031 --> 00:27:48,298
we're preparing.                
So what's a good fix for this?  

540
00:27:48,366 --> 00:27:51,902
How about we just optional      
chain. That makes it so         

541
00:27:51,970 --> 00:27:54,504
that this line will be ignored  
if scroll view is nil, and      

542
00:27:54,573 --> 00:27:57,040
that's okay because all that's  
happening here is that we're    

543
00:27:57,109 --> 00:27:59,342
trying to set the image         
to new anyway. But              

544
00:27:59,411 --> 00:28:02,345
since we're just preparing,     
it's going to start out nil so  

545
00:28:02,414 --> 00:28:04,614
it won't hurt anything          
to do that. So                  

546
00:28:04,683 --> 00:28:09,253
here's what we want to do       
that. Simple fix to it. So      

547
00:28:09,321 --> 00:28:11,855
I obviously left that in        
there again so we could do      

548
00:28:11,924 --> 00:28:15,692
this again because I know you   
guys run into this crash and    

549
00:28:15,760 --> 00:28:20,730
you want to make sure you're    
comfortable with diagnosing     

550
00:28:20,799 --> 00:28:23,200
it. So lets go back,            
lets try again now. Cassini,    

551
00:28:24,737 --> 00:28:28,504
it doesn't seem like it works.  
Wait, it did work. So           

552
00:28:28,573 --> 00:28:32,109
what happened there. So let's   
see, is this my Cassini image?  

553
00:28:32,178 --> 00:28:33,843
Yeah, look at that.             
There's the Cassini probe,      

554
00:28:33,912 --> 00:28:35,579
right there.                    
So let's try another one.       

555
00:28:35,647 --> 00:28:39,616
Let's go try Earth. No, it      
didn't work. Well, let's go to  

556
00:28:39,685 --> 00:28:42,585
landscape. How come it's not    
going to landscape here?        

557
00:28:42,654 --> 00:28:45,689
Forget it, let's go back. But   
the back button doesn't work,   

558
00:28:45,758 --> 00:28:49,893
what's going on here? So you    
see how my UI was stuck there.  

559
00:28:49,962 --> 00:28:52,762
I was trying to do back,        
I was trying to rotate.         

560
00:28:52,831 --> 00:28:55,898
My UI was just blank,           
not doing anything.             

561
00:28:55,967 --> 00:28:59,002
My UI is completely and         
utterly stuck.                  

562
00:28:59,071 --> 00:29:02,372
No matter where I touch. Even   
if I rotate, nothing happened.  

563
00:29:02,441 --> 00:29:04,708
Well this is a horrendous       
experience for                  

564
00:29:04,777 --> 00:29:07,143
your user. This is the kind     
of experience that will cause   

565
00:29:07,212 --> 00:29:10,180
your user to go and             
delete app.                     

566
00:29:10,248 --> 00:29:14,017
Because you cannot have your    
UI freezing up like that, so    

567
00:29:14,085 --> 00:29:15,718
that's why we have              
multi-threaded,                 

568
00:29:15,787 --> 00:29:18,388
that's such an important piece  
of the kind of app development  

569
00:29:18,457 --> 00:29:24,461
we do in IOS. So let's go       
in here and see if we can       

570
00:29:24,530 --> 00:29:27,297
fix this with multithreading.   
So how are we gonna do that?    

571
00:29:27,366 --> 00:29:30,266
We're gonna go back to my       
image view controller,          

572
00:29:30,335 --> 00:29:32,903
this is the thing that's        
hanging. In fact,               

573
00:29:32,971 --> 00:29:38,075
it's this line of code right    
here that is hanging my app,    

574
00:29:38,143 --> 00:29:41,144
right? This is why I'm trying   
to go out on the Internet,      

575
00:29:41,213 --> 00:29:43,747
get that Cassini or             
Earth URL and it's big and      

576
00:29:43,816 --> 00:29:46,783
even on our fast Stanford       
network it's taking a long      

577
00:29:46,851 --> 00:29:50,487
time to come over. So the line  
of code is not returning.       

578
00:29:50,555 --> 00:29:53,123
So I cannot have this line of   
code executing on the main      

579
00:29:53,192 --> 00:29:56,025
queue, which is where all my    
code pretty much runs unless I  

580
00:29:56,094 --> 00:29:57,894
specifically put it             
somewhere else or               

581
00:29:57,963 --> 00:30:01,264
unless I use some iOS API       
that puts it somewhere else.    

582
00:30:01,332 --> 00:30:04,634
All right, so how do I get      
this off the main queue? Well,  

583
00:30:04,703 --> 00:30:08,605
I just use this dispatch        
Queue, main queue and           

584
00:30:08,673 --> 00:30:13,276
then use the async func to      
put a closure onto the queue.   

585
00:30:13,344 --> 00:30:15,078
So this is gonna                
take this code and              

586
00:30:15,147 --> 00:30:17,080
run it,                         
run it on a different queue.    

587
00:30:17,149 --> 00:30:19,348
Now, I don't wanna run this     
on the main queue though,       

588
00:30:19,417 --> 00:30:22,085
I wanna run it on one of those  
quality of service queues. So   

589
00:30:22,154 --> 00:30:27,524
how do I do that? I'm gonna go  
global queue, and the argument  

590
00:30:27,592 --> 00:30:32,162
I want to it is quality of      
service. Not q, q, o,s,         

591
00:30:32,231 --> 00:30:36,199
quality of service. And the     
one I want is user initiated.   

592
00:30:36,268 --> 00:30:41,138
Because the user did just ask   
me to do something, right? So   

593
00:30:41,206 --> 00:30:43,940
I'm going to put it on the      
queue that gives me that good   

594
00:30:44,009 --> 00:30:46,810
quality of service that I want  
from something initiated. And   

595
00:30:46,879 --> 00:30:47,644
what am I gonna do here?        

596
00:30:47,713 --> 00:30:50,080
Well, I'm just gonna do this,   
right here. And                 

597
00:30:50,149 --> 00:30:53,283
I'm just gonna put this         
right there, go do that. And    

598
00:30:53,352 --> 00:30:56,586
this will immediately stop my   
app from blocking like that,    

599
00:30:56,654 --> 00:30:59,790
because it's going to be doing  
this network fetch on some      

600
00:30:59,858 --> 00:31:03,093
other queue. Now see,           
it's complaining here,          

601
00:31:03,161 --> 00:31:06,896
cuz of course this is now       
inside of a closure. So         

602
00:31:06,965 --> 00:31:10,467
I have to do self like that.    
Now every time I do this,       

603
00:31:10,535 --> 00:31:13,036
what did I tell you to do?      
Check to see if you have        

604
00:31:13,105 --> 00:31:16,573
a memory cycle, right?          
And we don't have one here      

605
00:31:16,642 --> 00:31:20,343
because self does not have      
a pointer to this closure.      

606
00:31:20,412 --> 00:31:22,979
There's no pointer inside self  
that points to this closure,    

607
00:31:23,048 --> 00:31:27,384
so there's no cycle. However,   
with multithreading, when you   

608
00:31:27,452 --> 00:31:29,820
do the self., you have to       
think of another thing.         

609
00:31:31,323 --> 00:31:35,325
Which is, what happens if the   
code before this line that has  

610
00:31:35,394 --> 00:31:38,595
this elf takes a long           
time to execute? So             

611
00:31:38,664 --> 00:31:41,831
long that this view controller  
doesn't even wanna be           

612
00:31:41,900 --> 00:31:45,435
here anymore? Can't you         
imagine that easily happening?  

613
00:31:45,504 --> 00:31:48,405
Someone clicks to go get        
an image, the image is taking   

614
00:31:48,474 --> 00:31:50,273
five minutes to come along,     
they're like, forget it,        

615
00:31:50,342 --> 00:31:54,578
and they click somewhere else.  
Go back, or something.          

616
00:31:54,646 --> 00:31:57,446
Now that view controller, that  
requested that image? It's      

617
00:31:57,515 --> 00:32:00,850
meaningless. It has no value.   
It should not be in the heap.   

618
00:32:00,919 --> 00:32:06,189
But if being kept in the heap   
by this closure. Do you see?    

619
00:32:06,257 --> 00:32:08,691
Because I have a reference      
to self in this closure,        

620
00:32:08,760 --> 00:32:10,760
this view controller,           
my image view controller,       

621
00:32:10,829 --> 00:32:13,863
is being kept in the heap for   
as long as that                 

622
00:32:13,932 --> 00:32:17,134
image request is outstanding.   
So, this is a case where        

623
00:32:17,202 --> 00:32:21,004
I want to do weak self here,    
okay.                           

624
00:32:21,073 --> 00:32:24,574
Not having anything to do       
with memory cycles but          

625
00:32:24,643 --> 00:32:28,044
having to do with the fact      
that I don't want self held     

626
00:32:28,113 --> 00:32:30,781
in the heap by this closure     
if this closure takes so        

627
00:32:30,849 --> 00:32:33,417
long to run, that the user      
doesn't care about self         

628
00:32:33,485 --> 00:32:36,219
anymore, then I don't care      
about self anymore. So,         

629
00:32:36,288 --> 00:32:40,423
by definition I want it to      
be weak. Any question about     

630
00:32:40,492 --> 00:32:43,260
that? So, that's just another   
thing you need to do when you   

631
00:32:43,328 --> 00:32:47,730
type that self dot because,     
so after I warned you about     

632
00:32:47,799 --> 00:32:50,533
this inside enclosure, if       
you're doing multi threaded,    

633
00:32:50,602 --> 00:32:53,569
think about whether things      
wanna be weak here or           

634
00:32:53,638 --> 00:32:58,642
whether you really wanna hold   
things in the heap. All right,  

635
00:32:58,710 --> 00:33:01,444
so this is good, but            
this is not gonna work either.  

636
00:33:01,513 --> 00:33:03,546
While this will stop            
my UI from blocking,            

637
00:33:03,615 --> 00:33:06,816
it will probably screw up       
my UI. Probably cause my UI     

638
00:33:06,884 --> 00:33:09,719
to draw all funny, or get       
completely wedged. And why is   

639
00:33:09,788 --> 00:33:14,157
that? Because of this line of   
code. Here I'm setting image,   

640
00:33:14,225 --> 00:33:17,494
which is this thing right       
here. And if you look at        

641
00:33:17,563 --> 00:33:21,197
the setting of image,           
it sets a UIImageView's image,  

642
00:33:21,266 --> 00:33:25,068
that's a UI think. It sized to  
fit that UIImageView thing,     

643
00:33:25,137 --> 00:33:27,971
that's a UI thing.              
It sets a scrollView's content  

644
00:33:28,040 --> 00:33:30,306
area to a certain size,         
that's a UI thing.              

645
00:33:30,375 --> 00:33:33,543
I'm doing all kinds of Ui       
stuff when I set this image.    

646
00:33:33,611 --> 00:33:38,047
So, I can't do this on the      
queue that I put this code on.  

647
00:33:38,116 --> 00:33:41,984
This global queue is not a UI   
queue, I can't do it there.     

648
00:33:42,053 --> 00:33:45,555
So, what I have                 
to do here is to                

649
00:33:45,623 --> 00:33:50,459
DispatchQueue.main.async this   
code                            

650
00:33:50,528 --> 00:33:55,665
back to the main queue. Now,    
it's gonna get in line and      

651
00:33:55,733 --> 00:33:58,000
run on the main queue when      
the main queue is quiet.        

652
00:33:58,069 --> 00:34:03,406
See that, so                    
this is cool this railway,      

653
00:34:03,474 --> 00:34:04,874
they can see this               
code is awesome,                

654
00:34:04,943 --> 00:34:06,710
this is like the easiest        
multi threading code you can    

655
00:34:06,778 --> 00:34:10,113
possibly write. But you do      
understand that this stuff is   

656
00:34:10,181 --> 00:34:15,151
happening perhaps a minute      
after this line of code right?  

657
00:34:15,220 --> 00:34:16,986
Okay because we're putting      
on another queue it might be    

658
00:34:17,055 --> 00:34:20,423
blocking on the network. Now,   
that leads us to another one    

659
00:34:20,492 --> 00:34:24,026
last thing we need to do here   
which is what happens if we     

660
00:34:24,095 --> 00:34:28,031
request this thing?             
And not through our UI, but     

661
00:34:28,099 --> 00:34:32,335
some UI someone calls this      
image URL and sets it to        

662
00:34:32,404 --> 00:34:38,007
something else. They set        
this image URL to something     

663
00:34:38,076 --> 00:34:41,644
else, and we go to fetch that   
image. What happens when this   

664
00:34:41,713 --> 00:34:45,782
image comes back? We don't      
care about it. We're off on,    

665
00:34:45,850 --> 00:34:48,151
we're working on a new image.   
So,                             

666
00:34:48,220 --> 00:34:51,955
when this comes back,           
we need to check to make sure   

667
00:34:52,023 --> 00:34:56,259
that our current image URL is   
the URL we requested here.      

668
00:34:56,328 --> 00:35:01,397
And we can easily do that by    
just saying URL equals our      

669
00:35:01,466 --> 00:35:06,035
image URL.                      
This is week so we got. So,     

670
00:35:06,104 --> 00:35:09,372
here I'm just checking after    
this maybe takes five minutes   

671
00:35:09,440 --> 00:35:13,042
I'm checking to see if that     
URL is the one I asked for.     

672
00:35:13,111 --> 00:35:15,244
Because if it's not I don't     
care about it anymore in this   

673
00:35:15,313 --> 00:35:18,882
class. Do you see? So, this is  
what I'm talking about where    

674
00:35:18,950 --> 00:35:20,317
when you're doing               
multithreading you have to      

675
00:35:20,385 --> 00:35:21,685
think about                     
the timing of things,           

676
00:35:21,753 --> 00:35:23,586
things might take a while and   
they come back                  

677
00:35:23,655 --> 00:35:26,789
things might be different than  
they were when you left. So     

678
00:35:26,858 --> 00:35:29,925
this is a great little piece    
of code to really understand,   

679
00:35:29,994 --> 00:35:32,795
cuz it covers a lot of ground,  
from the weak self, and         

680
00:35:32,864 --> 00:35:35,865
checking this, and dispatching  
back to the main queue,         

681
00:35:35,934 --> 00:35:38,101
getting one of these            
background queues.              

682
00:35:38,170 --> 00:35:39,936
Really make sure                
you understand                  

683
00:35:40,005 --> 00:35:42,538
this little piece of code       
right here. All right, so       

684
00:35:42,607 --> 00:35:48,378
let's run and see if this has   
indeed fixed our nice UI to be  

685
00:35:48,447 --> 00:35:52,449
responsive. Here we go let's    
try it again. Let's go Earth.   

686
00:35:52,517 --> 00:35:54,950
And can we go back? Woo hoo,    
look at that! I can go back,    

687
00:35:55,019 --> 00:35:59,789
and now I want Cassini. Here    
comes Cassini and Earth is      

688
00:35:59,858 --> 00:36:03,025
still probably being requested  
and here comes Earth. Ugh, and  

689
00:36:03,094 --> 00:36:05,127
it didn't do anything. That's   
great, it just dropped it on    

690
00:36:05,196 --> 00:36:06,829
the ground because we don't     
care about Earth anymore.       

691
00:36:06,898 --> 00:36:10,399
I changed my mind. So here's    
Cassini, that's great, right?   

692
00:36:10,468 --> 00:36:14,603
I can rotate, we can go back.   
Let's pick Earth.               

693
00:36:14,672 --> 00:36:17,707
Now while I'm waiting for       
Earth, I could rotate. My UI    

694
00:36:17,776 --> 00:36:19,742
is completely responsive.       
I could go back and             

695
00:36:19,811 --> 00:36:20,910
choose something else.          
Let's go ahead and              

696
00:36:20,979 --> 00:36:25,915
let Earth arrive, so Earth      
is a big image. There it is.    

697
00:36:25,984 --> 00:36:31,387
Earth seems to be a picture     
of people, somehow, maybe       

698
00:36:31,456 --> 00:36:35,925
we'll zoom out a little bit,    
it's the Earth. So this is      

699
00:36:35,994 --> 00:36:38,528
a picture of Earth made up of   
a lot of little people looking  

700
00:36:38,597 --> 00:36:41,231
up and saying hello to Cassini  
and that's what this one is.    

701
00:36:41,299 --> 00:36:43,332
And, similarly they             
have a similar                  

702
00:36:43,401 --> 00:36:46,569
kind of construction            
with Saturn here. But           

703
00:36:46,637 --> 00:36:50,106
you can see that our UI's       
just dramatically improved by   

704
00:36:50,175 --> 00:36:53,143
putting that stuff on           
the other thread there.         

705
00:36:56,981 --> 00:37:01,651
All right? But                  
our UI's still not that great   

706
00:37:01,720 --> 00:37:05,488
because watch.                  
What's happening right now?     

707
00:37:05,557 --> 00:37:09,191
The user has no idea. They      
wanted the Earth Image and      

708
00:37:09,260 --> 00:37:11,861
it's not here. They're like, I  
guess there's no Earth image,   

709
00:37:11,930 --> 00:37:15,098
you know? They click back.      
We need to give them some       

710
00:37:15,166 --> 00:37:18,834
feedback that we are off        
getting their Earth thing.      

711
00:37:18,903 --> 00:37:22,872
We need something to let them   
know, yeah, I'm working on it.  

712
00:37:22,941 --> 00:37:24,040
Even though you can hit back,   

713
00:37:24,108 --> 00:37:26,476
you can stay here and you can   
see your Earth image. So,       

714
00:37:26,544 --> 00:37:27,843
how are we gonna do that?       
We're gonna do that with        

715
00:37:27,912 --> 00:37:30,513
a little spinner.               
Called an activity indicator.   

716
00:37:30,582 --> 00:37:33,349
It's just a little              
spinning view. And              

717
00:37:33,418 --> 00:37:35,718
this is a good one to show      
you for another reason too.     

718
00:37:35,787 --> 00:37:38,121
Which is that it can sometimes  
get a little crowded trying to  

719
00:37:38,190 --> 00:37:40,523
build the UI you want,          
especially when things go all   

720
00:37:40,592 --> 00:37:43,226
the way to the edges            
like this scroll view. So       

721
00:37:43,295 --> 00:37:47,030
this spinner, you can search    
for it, activity, it's called   

722
00:37:47,099 --> 00:37:49,232
UI Activity Indicator View.     
See it right here?              

723
00:37:49,300 --> 00:37:54,003
I'm gonna drag this out and     
try to put in the centre of     

724
00:37:54,071 --> 00:37:58,340
my image view right here. Now,  
this did a very bad thing,      

725
00:37:58,409 --> 00:38:01,444
okay. You can't tell, it looks  
like it's just fine, but        

726
00:38:01,513 --> 00:38:03,813
it's bad. But                   
the way you can find out and    

727
00:38:03,881 --> 00:38:06,449
see the badness is going        
to your document outline.       

728
00:38:06,518 --> 00:38:09,452
If we go to document outline    
and try to find this indicator  

729
00:38:09,520 --> 00:38:12,722
right here, you see it?         
Look what happened to it,       

730
00:38:12,791 --> 00:38:15,792
it was made a sub view          
of the scroll view.             

731
00:38:15,860 --> 00:38:17,894
Okay any time you drag          
a view in it gets made          

732
00:38:17,963 --> 00:38:20,596
a sub view of the thing you     
drop it on. And we don't want   

733
00:38:20,665 --> 00:38:23,465
that, cuz we don't want this    
scroll view scrolling thing to  

734
00:38:23,534 --> 00:38:26,836
be in the content area of the   
scroll view. That's what a sub  

735
00:38:26,905 --> 00:38:28,871
view of a scroll view means     
interface builder the content   

736
00:38:28,940 --> 00:38:32,008
area. We want it to kinda       
sit on top and luckily it's     

737
00:38:32,076 --> 00:38:35,278
super easy to pull it out on    
top in the document outline.    

738
00:38:35,347 --> 00:38:37,547
It's very difficult to pull     
it out on top over here.        

739
00:38:37,616 --> 00:38:39,715
But here we can                 
just lift it up and             

740
00:38:39,784 --> 00:38:42,251
put it, actually that           
puts it behind, and             

741
00:38:42,320 --> 00:38:45,087
here we can put it in front.    
So, now it is not               

742
00:38:45,156 --> 00:38:48,824
a sub view of the scroll view,  
it is in front of it,           

743
00:38:48,893 --> 00:38:52,228
sitting in front of it. Now we  
also want it to be centered,    

744
00:38:52,297 --> 00:38:53,729
but not centered in             
the scroll view,                

745
00:38:53,798 --> 00:38:58,801
we want to be centered in the   
super view of the whole MVC.    

746
00:38:58,869 --> 00:38:59,702
So how can we do that?          

747
00:38:59,771 --> 00:39:02,438
I mean, my God it's gonna be    
impossible, control drag.       

748
00:39:02,507 --> 00:39:05,141
How do I find the edge without  
hitting the scroll view?        

749
00:39:05,210 --> 00:39:07,510
It constantly wants             
the scroll view right there.    

750
00:39:07,578 --> 00:39:11,114
Well, we can control            
drag in here.                   

751
00:39:11,183 --> 00:39:14,617
Look at that, then control      
drag up to here and             

752
00:39:14,686 --> 00:39:16,519
say we wanted to be standard,   
horizontally and                

753
00:39:16,588 --> 00:39:18,554
vertically in the safe are.     

754
00:39:18,623 --> 00:39:21,223
We got a little displacement    
there, no problem,              

755
00:39:21,292 --> 00:39:25,794
we'll fix that, update frames.  
We put it in the middle. So     

756
00:39:25,863 --> 00:39:29,065
control dragging inside         
the document outline is a very  

757
00:39:29,134 --> 00:39:33,335
good way to get at things that  
are hard to C. Now, another     

758
00:39:33,404 --> 00:39:36,072
thing we wanna do is this is    
very tiny little control.       

759
00:39:36,140 --> 00:39:38,641
I wanna a bigger one. It turns  
out there's a bigger one,       

760
00:39:38,710 --> 00:39:41,277
this large white one. Although  
I don't want it white cuz this  

761
00:39:41,346 --> 00:39:42,812
is gonna be white on white.     

762
00:39:42,880 --> 00:39:45,114
So I'm gonna pick a different   
color, let's make it blue,      

763
00:39:45,183 --> 00:39:49,952
let's say. So I've got this     
nice spinner right here. This   

764
00:39:50,021 --> 00:39:52,655
spinner by the way, you can     
either start it out animating   

765
00:39:52,724 --> 00:39:55,525
or turn it on when you want,    
which we're going to do.        

766
00:39:55,593 --> 00:39:58,093
Also you can have the spinner   
automatically hide itself       

767
00:39:58,162 --> 00:40:01,097
when it's not spinning.         
And then when it is spinning,   

768
00:40:01,166 --> 00:40:04,633
it shows itself so we want      
that too. So let's go turn      

769
00:40:04,702 --> 00:40:06,870
this thing on and off, let's    
go turn the spinner on and      

770
00:40:06,938 --> 00:40:08,838
off. Where do we want to turn,  
first of all,                   

771
00:40:08,906 --> 00:40:10,172
we need an outlet               
to it of course,                

772
00:40:10,241 --> 00:40:11,307
we're gonna talk to it so,      

773
00:40:11,376 --> 00:40:12,675
let's put that out              
there right here.               

774
00:40:12,744 --> 00:40:15,678
I'm just gonna Ctrl+drag,       
normal outlet.                  

775
00:40:15,747 --> 00:40:16,846
I'll call it my spinner,        

776
00:40:16,914 --> 00:40:20,183
that's what I'd like to call    
my activity indicator there.    

777
00:40:20,251 --> 00:40:23,119
So here it is, and we just      
need to turn this thing on and  

778
00:40:23,188 --> 00:40:25,889
turn it off. Well, the place    
we need to turn it on is right  

779
00:40:25,957 --> 00:40:28,391
before we do this really        
long expensive operation.       

780
00:40:28,460 --> 00:40:31,326
So I'm gonna write say here,    
spinner.startAnimating.         

781
00:40:31,395 --> 00:40:34,496
That's how you turn it on. And  
where do I wanna turn it off?   

782
00:40:34,565 --> 00:40:38,601
Well, you might think I wanna   
turn it off in here. But        

783
00:40:38,670 --> 00:40:40,803
again, thinking                 
about multithreaded,            

784
00:40:40,872 --> 00:40:43,973
really I don't wanna do that,   
because what if another image   

785
00:40:44,042 --> 00:40:46,543
request goes out, and           
I'm waiting on it?              

786
00:40:46,611 --> 00:40:48,778
I still want the spinner        
to keep spinning. Really,       

787
00:40:48,846 --> 00:40:51,881
I want this spinner to stop     
spinning whenever the image     

788
00:40:51,950 --> 00:40:56,251
actually gets set. So any time  
we actually set our image to    

789
00:40:56,320 --> 00:40:59,889
something inside here. Then I   
want to stop my animating. So,  

790
00:40:59,958 --> 00:41:03,393
I'm just gonna say spinner and  
I'm also going to be careful    

791
00:41:03,461 --> 00:41:07,897
here of people preparing,       
getting me. stopAnimating, so   

792
00:41:07,966 --> 00:41:12,001
this is a reliable place to     
stop animating. So once I put   

793
00:41:12,070 --> 00:41:14,970
an image here, I clearly don't  
want that thing spinning        

794
00:41:15,039 --> 00:41:16,906
anymore. All right, so let's    
see what that looks like.       

795
00:41:25,216 --> 00:41:27,883
So we didn't request anything,  
so there's no spinner. Let's    

796
00:41:27,952 --> 00:41:30,953
go here to ask for Cassini,     
it's spinning you see, and      

797
00:41:31,022 --> 00:41:33,622
as soon as Cassini arrives,     
it stops spinning.              

798
00:41:33,691 --> 00:41:39,061
If we zoom down you'll          
see that it is not there.       

799
00:41:39,130 --> 00:41:43,032
It's hard to see in this        
background but it's not there.  

800
00:41:43,100 --> 00:41:45,768
And let's just quickly make     
sure this is all working on     

801
00:41:45,836 --> 00:41:49,138
iPad. Let's go up here,         
iPad and run it on there.       

802
00:41:55,246 --> 00:41:58,147
It's kind of especially cute    
on iPad when you click this,    

803
00:41:58,216 --> 00:42:00,883
if you don't have a spinner     
there, it's just really         

804
00:42:00,951 --> 00:42:08,491
unclear what the heck is going  
on here. All right, Earth.      

805
00:42:16,000 --> 00:42:18,600
And while this is spinning,     
we could change our minds and   

806
00:42:18,669 --> 00:42:20,302
go to Cassini.                  
Okay, and now it starts.        

807
00:42:20,371 --> 00:42:21,838
Now this is a new               
ViewController and              

808
00:42:21,907 --> 00:42:23,672
it starts again, and            
now we have Cassini.            

809
00:42:23,741 --> 00:42:26,809
Now one thing that's kind of    
a bummer here is when we're on  

810
00:42:26,878 --> 00:42:29,778
the iPhone, remember we took    
the title of the button.        

811
00:42:29,847 --> 00:42:31,480
And we put it on the top,       
and there was a title.          

812
00:42:31,549 --> 00:42:35,385
But notice on the iPad,         
there's no title here, where    

813
00:42:35,453 --> 00:42:39,822
the detail is? The detail       
has no title on the top,        

814
00:42:39,891 --> 00:42:41,957
it's just kind of up, to        
the upper left and of course,   

815
00:42:42,026 --> 00:42:44,693
it's kinda ugly actually. So    
I'd really love to put a title  

816
00:42:44,762 --> 00:42:47,730
over here just like I have a    
title right here. So how can I  

817
00:42:47,798 --> 00:42:50,767
do that? Well, it actually      
turns out to be quite easy to   

818
00:42:50,835 --> 00:42:54,537
do that. I'm just going to      
take my detail right here, and  

819
00:42:54,606 --> 00:42:59,175
I'm gonna embed it In           
a NavigationController.         

820
00:42:59,244 --> 00:43:00,709
So I'm putting this in          
a NavigationController,         

821
00:43:00,778 --> 00:43:03,246
not because I'm doing any       
navigation down there.          

822
00:43:03,314 --> 00:43:05,748
The navigation I'm doing is     
all controlled by this one,     

823
00:43:05,816 --> 00:43:08,884
but just because I want         
the thing to have a title.      

824
00:43:08,953 --> 00:43:11,587
Now let's see, does that work?  
Okay, let's run it and          

825
00:43:11,656 --> 00:43:17,393
see if that works. All right,   

826
00:43:17,462 --> 00:43:20,830
here we go,                     
Cassini, uh-oh, no.             

827
00:43:20,899 --> 00:43:23,232
It's not working, I'm not even  
getting my spinner anymore,     

828
00:43:23,300 --> 00:43:26,836
that broke it. It put a title   
up here, but it broke it.       

829
00:43:26,904 --> 00:43:30,106
Now why did that break our      
code? Well, let's look at our   

830
00:43:30,175 --> 00:43:33,476
code and we'll see pretty       
obviously why it broke it.      

831
00:43:33,545 --> 00:43:36,446
In our prepare for segue,       
what did we do? We look at      

832
00:43:36,514 --> 00:43:39,081
the segue's destination         
which is the detail.            

833
00:43:39,149 --> 00:43:41,917
And we check to see if it's     
an ImageViewController, but     

834
00:43:41,986 --> 00:43:43,719
it's not                        
an ImageViewController,         

835
00:43:43,787 --> 00:43:48,524
now is it? Right, if we go      
back to our story board, this   

836
00:43:48,593 --> 00:43:52,995
destination of these segues     
is a NavigationController.      

837
00:43:53,064 --> 00:43:56,098
Not an ImageController, it's    
a NavigationController. So      

838
00:43:56,166 --> 00:43:59,669
that line of code is failing,   
right? This line of code,       

839
00:43:59,737 --> 00:44:02,471
this imageVC = destination      
as ImageViewController,         

840
00:44:02,540 --> 00:44:05,541
not true anymore. Because our   
ImageView, our destination is   

841
00:44:05,610 --> 00:44:08,477
a NavigationController. So we   
can check that though. Let's    

842
00:44:08,546 --> 00:44:11,781
just go set our destination     
here equal to the segue's       

843
00:44:11,849 --> 00:44:14,133
But I'm gonna say, if I can     
let navcon = destination as     

844
00:44:14,134 --> 00:44:16,418
destination.                    

845
00:44:16,487 --> 00:44:21,357
a UINavigationController. Then  
I'm gonna let my destination =  

846
00:44:21,425 --> 00:44:25,194
navcon.visibleViewController,   
which might be nil.             

847
00:44:25,262 --> 00:44:29,298
In which case, then I'll go     
ahead and return the navcon.    

848
00:44:29,367 --> 00:44:32,235
And then here I'm gonna use     
destination, and so this        

849
00:44:32,303 --> 00:44:35,504
is going to basically unwrap    
the NavigationController and    

850
00:44:35,573 --> 00:44:38,040
get its visible                 
ViewController. This would      

851
00:44:38,109 --> 00:44:40,609
still work if there weren't     
a NavigationController there.   

852
00:44:40,678 --> 00:44:42,911
Because then this line of       
code would not happen,          

853
00:44:42,980 --> 00:44:45,280
and we'd just be saying         
segue destination here.         

854
00:44:45,349 --> 00:44:53,822
So let's see if that works.     
Here we go, Cassini, look,      

855
00:44:53,891 --> 00:44:55,491
we got the title,               
we got the spinner,             

856
00:44:55,559 --> 00:44:58,527
woo-hoo, it's working!          
Okay, Earth, quit to title,     

857
00:44:58,596 --> 00:45:02,731
spinning. All right, now this   
is very common to wanna do to   

858
00:45:02,800 --> 00:45:04,834
put your detail in              
a NavigationController.         

859
00:45:04,902 --> 00:45:07,235
And you have to do this         
little indirection.             

860
00:45:07,304 --> 00:45:10,873
A lot of times what 'll do is   
create a little extension to    

861
00:45:10,942 --> 00:45:17,280
UIViewController. I call, it's  
a little var I call content,    

862
00:45:17,348 --> 00:45:20,115
which is the content of the     
UIViewController, which for     

863
00:45:20,184 --> 00:45:25,521
most ViewControllers is just    
itself. But if it's a navcon,   

864
00:45:25,589 --> 00:45:27,689
if we have to do this           
little doohickey here,          

865
00:45:27,758 --> 00:45:29,391
then it will return its         
visible ViewController.         

866
00:45:29,460 --> 00:45:31,526
So I'm gonna say if             
I can let myself                

867
00:45:31,595 --> 00:45:33,663
be a NavigationController.      

868
00:45:33,731 --> 00:45:38,801
Then I'm going to return        
my visibleViewController,       

869
00:45:38,869 --> 00:45:42,438
or if that's nil then I'll      
return myself. And if I'm not   

870
00:45:42,506 --> 00:45:46,475
a navcon then I'll just return  
myself. So content just is      

871
00:45:46,544 --> 00:45:49,812
the viewController itself, or   
if it's a NavigationController  

872
00:45:49,881 --> 00:45:52,648
it's the contents of            
the NavigationController.       

873
00:45:52,717 --> 00:45:54,149
You could also do this          
with a TabBarController.        

874
00:45:54,218 --> 00:45:57,019
You can have an else, if it's   
a TabBarController, then show   

875
00:45:57,088 --> 00:45:58,821
me the ViewController that is   
the current tab, you could do   

876
00:45:58,889 --> 00:46:02,758
the same thing. So here I       
don't need to do this anymore,  

877
00:46:02,827 --> 00:46:06,094
I can just say                  
segue.destination.contents,     

878
00:46:06,163 --> 00:46:09,498
right? And this is going        
to give me what I want.         

879
00:46:09,567 --> 00:46:12,267
See how this cleans up this     
code really nicely? So you'll   

880
00:46:12,336 --> 00:46:15,705
often wanna have an extension   
like this when you have, when   

881
00:46:15,773 --> 00:46:19,308
your detail might be wrapped    
in the NavigationController.    

882
00:46:24,782 --> 00:46:28,250
Cassini, works perfectly        
there, all right yes?           

883
00:46:28,319 --> 00:46:30,986
>> [INAUDIBLE]                  

884
00:46:31,055 --> 00:46:36,525
URL to a URL [INAUDIBLE]        

885
00:46:36,594 --> 00:46:38,060
URL.                            

886
00:46:38,129 --> 00:46:40,662
>> Yeah, right here.            

887
00:46:40,731 --> 00:46:43,832
>> So where is the URL then is  

888
00:46:43,901 --> 00:46:48,537
it the [INAUDIBLE]              
say if like the URL-            

889
00:46:48,606 --> 00:46:49,771
>> Yeah.                        

890
00:46:49,840 --> 00:46:53,175
>> But how does that would      

891
00:46:53,243 --> 00:46:56,511
define [INAUDIBLE]              
>> Okay so                      

892
00:46:56,580 --> 00:47:00,949
by letting url = imageURL       
we're creating a local          

893
00:47:01,018 --> 00:47:03,185
variable called url.            

894
00:47:03,253 --> 00:47:06,188
It's a local variable local     
to this function, and           

895
00:47:06,257 --> 00:47:11,760
its value is the imageURL. Now  
this closure right here and     

896
00:47:11,829 --> 00:47:16,699
this closure for that matter.   
Closures always capture         

897
00:47:16,767 --> 00:47:20,903
the local variables around      
them when they need them. And   

898
00:47:20,972 --> 00:47:24,473
since we're referencing url     
inside these closures, it got   

899
00:47:24,541 --> 00:47:28,110
captured. So it hold on to      
this, even for five minutes or  

900
00:47:28,179 --> 00:47:30,546
however long this takes.        
It holds it in the heap         

901
00:47:30,615 --> 00:47:34,383
as long as this closure lives,  
it holds on to it. But          

902
00:47:34,452 --> 00:47:37,453
it still stays set to           
what it was before.             

903
00:47:37,521 --> 00:47:40,222
If in the meantime while        
five minutes is happening,      

904
00:47:40,291 --> 00:47:42,557
this changes,                   
that doesn't change this,       

905
00:47:42,626 --> 00:47:46,361
because this is a local copy,   
right? It's a local variable,   

906
00:47:46,430 --> 00:47:48,497
it's a copy of this thing.      
>> But                          

907
00:47:48,566 --> 00:47:51,333
how does that have a value      
just because you say,           

908
00:47:51,402 --> 00:47:56,071
isn't it like a root instance.  
Well, okay.                     

909
00:47:56,140 --> 00:47:59,174
So, image URL, I don't know     
whether URL is a value type or  

910
00:47:59,243 --> 00:48:00,176
a reference type,               

911
00:48:00,244 --> 00:48:03,545
it wouldn't matter here. But    
let's say it's a value type.    

912
00:48:03,614 --> 00:48:07,082
If it's a value type then       
we know this copied it. And     

913
00:48:07,151 --> 00:48:08,584
then when we say equals,        
equals,                         

914
00:48:08,653 --> 00:48:11,654
it means that URL would have    
to implement equatable,         

915
00:48:11,722 --> 00:48:16,125
which it, certainly it does.    
If this is a reference type,    

916
00:48:16,194 --> 00:48:18,727
then it's just grabbing         
a pointer to that thing and     

917
00:48:18,796 --> 00:48:20,763
then here we're comparing       
the pointers. So                

918
00:48:20,831 --> 00:48:23,665
either way, it's going to make  
sure that if it's changed,      

919
00:48:23,734 --> 00:48:29,238
we know. Good question,         
though. All right,              

920
00:48:29,306 --> 00:48:35,177
let's get back to our slides    
here. Let's talk about          

921
00:48:35,245 --> 00:48:37,980
our other very important topic  
today, which is more about      

922
00:48:38,048 --> 00:48:40,616
Autolayouts. I'm gonna do       
a quick review about a layout,  

923
00:48:40,685 --> 00:48:42,351
just to make sure you           
understand what you             

924
00:48:42,420 --> 00:48:44,920
understand.                     
Here is kind of some of         

925
00:48:44,989 --> 00:48:46,722
the things we've seen           
with Autolayout so              

926
00:48:46,790 --> 00:48:49,892
far. We know to use the dashed  
blue lines to try to tell       

927
00:48:49,960 --> 00:48:52,861
Xcode what we mean, right?      
Put things in the centre, put   

928
00:48:52,930 --> 00:48:55,498
things on their edges by the    
dashed blue lines. And then we  

929
00:48:55,566 --> 00:48:57,967
can do we reset to suggested    
constraints, remember,          

930
00:48:58,035 --> 00:49:00,502
in lower right corner which     
will try to make constraints    

931
00:49:00,571 --> 00:49:03,205
that make the blue lines make   
sense, but we know it doesn't   

932
00:49:03,274 --> 00:49:05,874
really work more and            
about 50% of the time. So       

933
00:49:05,943 --> 00:49:08,710
then, we learned how to         
control drag to the edges or    

934
00:49:08,779 --> 00:49:11,313
the other views and             
then set equal,                 

935
00:49:11,382 --> 00:49:14,983
set the widths or aspect ratio  
or the edges to be the same or  

936
00:49:15,052 --> 00:49:18,187
whatever. We know that we can   
go to the size inspector and    

937
00:49:18,255 --> 00:49:20,823
look at all the constraints     
that are constraining           

938
00:49:20,891 --> 00:49:22,991
a certain view just by          
clicking on the view.           

939
00:49:23,060 --> 00:49:25,728
Looking in the size. In fact    
we can even edit simple things  

940
00:49:25,796 --> 00:49:27,863
about the constraints right     
there in the size inspector,    

941
00:49:27,932 --> 00:49:30,332
like constant values or         
things like that.               

942
00:49:30,401 --> 00:49:33,936
We also, if we can get at it    
in the interface where we can   

943
00:49:34,005 --> 00:49:37,073
click on a constraint and       
open up the inspector and       

944
00:49:37,141 --> 00:49:40,742
inspect detailed information    
about the constraint.           

945
00:49:40,811 --> 00:49:43,545
We also know about the pin      
menu in the lower right that    

946
00:49:43,614 --> 00:49:45,614
let's you set some              
constraints like, but           

947
00:49:45,682 --> 00:49:48,583
this hooking it to the edges    
and things like that.           

948
00:49:48,652 --> 00:49:50,419
There's also an arrange button  
right there by the way,         

949
00:49:50,487 --> 00:49:51,620
I didn't show you but           
is similar,                     

950
00:49:51,688 --> 00:49:55,157
lets you line up front edges    
and things like that. And we    

951
00:49:55,226 --> 00:49:57,826
also learned that the document  
outline is the awesome          

952
00:49:57,895 --> 00:49:59,962
place to go to really           
look our constraints and        

953
00:50:00,031 --> 00:50:02,097
details, cuz it list every      
constraint as a line item,      

954
00:50:02,166 --> 00:50:05,133
it's also where the special     
place do you click to resolve   

955
00:50:05,202 --> 00:50:06,335
problem with your constraints   

956
00:50:06,403 --> 00:50:09,004
is. So the document outline     
is just fundamental to using    

957
00:50:09,073 --> 00:50:12,474
Autolayout. So we know all      
that stuff. Understand that     

958
00:50:12,543 --> 00:50:15,844
mastering Autolayout            
takes the experience.           

959
00:50:15,912 --> 00:50:18,113
You don't just have someone     
tell you all these things or    

960
00:50:18,182 --> 00:50:18,981
even show them to you and       

961
00:50:19,049 --> 00:50:21,784
it's like, now I'm on MAC I     
can do auto layer now.          

962
00:50:21,852 --> 00:50:24,887
You have to have laid out       
a lot of things and understood  

963
00:50:24,955 --> 00:50:28,056
the conflicts that arise and    
what the limitation are and     

964
00:50:28,125 --> 00:50:31,093
all that. It's really a         
fantastic system auto layout,   

965
00:50:31,161 --> 00:50:33,995
very powerful, but it does      
take some experience to master  

966
00:50:34,064 --> 00:50:35,797
or so,                          
don't get too frustrated.       

967
00:50:35,866 --> 00:50:37,333
Luckily, you're definitely      
gonna have more assignments     

968
00:50:37,402 --> 00:50:38,634
where you're gonna              
have to do Autolayout,          

969
00:50:38,702 --> 00:50:41,536
and your final project you      
definitely wanna do Autolayout  

970
00:50:41,605 --> 00:50:46,108
so you would get some of that   
experience. It is possible to   

971
00:50:46,177 --> 00:50:49,544
do all this Autolayout stuff    
from code and now it's not we   

972
00:50:49,613 --> 00:50:52,981
have controlled dragging a lot  
not in interface, but actually  

973
00:50:53,050 --> 00:50:56,485
light code to do all of this.   
And I'm not gonna teach any of  

974
00:50:56,554 --> 00:50:59,388
that unfortunately If you want  
to learn a little bit about     

975
00:50:59,457 --> 00:51:02,891
that, you can start by going    
to UI views documentation and   

976
00:51:02,960 --> 00:51:04,960
search for "anchor" and         
"autolayout".                   

977
00:51:05,029 --> 00:51:07,762
Those are the two main sets     
of API, there's a ton of        

978
00:51:07,831 --> 00:51:10,399
API there and then there's      
also just documentation. How    

979
00:51:10,467 --> 00:51:13,001
to do the autolayout system.    
You can read through all of     

980
00:51:13,070 --> 00:51:15,504
that if you really want to get  
to be a master of autolayout    

981
00:51:15,573 --> 00:51:18,073
from code. It's not             
necessarily that difficult,     

982
00:51:18,142 --> 00:51:20,909
but to really truly understand  
requires understanding auto     

983
00:51:20,978 --> 00:51:25,881
layout and how it's working to  
do it from code. All right,     

984
00:51:25,949 --> 00:51:29,184
having said all that auto       
layout is sometimes just        

985
00:51:29,253 --> 00:51:32,521
not enough. The autolayout      
you know so far is just not     

986
00:51:32,590 --> 00:51:35,758
enough. Sometime when           
you rotate your device,         

987
00:51:35,826 --> 00:51:38,661
your geometry changes so        
dramatically there's just       

988
00:51:38,729 --> 00:51:40,962
no way to control drag          
to make things happen.          

989
00:51:41,031 --> 00:51:44,266
For example, in concentration.  
We know that                    

990
00:51:44,334 --> 00:51:46,601
concentration with a lot        
of buttons looks great but      

991
00:51:46,670 --> 00:51:49,338
in portrait. All the buttons    
look square but then when you   

992
00:51:49,406 --> 00:51:51,272
go to landscape the buttons     
are all smashed down.           

993
00:51:51,341 --> 00:51:54,777
There's barely enough room to   
say flips 27 at the bottom and  

994
00:51:54,846 --> 00:51:56,211
it just really gets smashed.    

995
00:51:56,279 --> 00:51:59,047
It really would be great if     
when I switched to landscape    

996
00:51:59,116 --> 00:52:02,417
if I had 20 buttons, let's      
say, it went 5 across and       

997
00:52:02,486 --> 00:52:04,820
4 down.                         
Maybe it moves that flips then  

998
00:52:04,889 --> 00:52:07,523
off to the side. That will be   
a much better landscape but     

999
00:52:07,591 --> 00:52:10,058
no amount of control dragging   
to the edges is gonna make      

1000
00:52:10,127 --> 00:52:13,028
that happen. Right,             
it just can't be done.          

1001
00:52:13,096 --> 00:52:16,164
Just, you can not               
constrain the view enough       

1002
00:52:16,233 --> 00:52:20,169
to make them relay themselves   
out like that on rotation. So   

1003
00:52:20,238 --> 00:52:24,573
what's the solution to that?    
Size classes. Now,              

1004
00:52:24,641 --> 00:52:28,510
Apple made their, I think,      
a great decision that when you  

1005
00:52:28,579 --> 00:52:32,313
rotate to landscape versus      
portrait, instead of their      

1006
00:52:32,382 --> 00:52:36,752
reporting to you, here's your   
new dimensions, figure it out,  

1007
00:52:36,821 --> 00:52:40,622
they just simplified it down    
to two and only two values for  

1008
00:52:40,690 --> 00:52:45,494
your horizontal and vertical    
size. You are either compact    

1009
00:52:45,563 --> 00:52:48,797
or regular size in width and    
height, and                     

1010
00:52:48,866 --> 00:52:52,201
that's it. They are going to    
report that to you and there's  

1011
00:52:52,269 --> 00:52:54,569
a whole system for letting you  
know when that changes and      

1012
00:52:54,638 --> 00:52:55,571
then you build your UI so       

1013
00:52:55,639 --> 00:52:57,573
it looks good when it's         
compact vertically.             

1014
00:52:57,642 --> 00:52:59,274
It looks good when it's         
compact horizontally.           

1015
00:52:59,343 --> 00:53:00,675
It looks good when              
it's regular vertical.          

1016
00:53:00,744 --> 00:53:03,779
And it looks good when          
it's regular. Vertical and      

1017
00:53:03,848 --> 00:53:05,346
horizontal, right?              

1018
00:53:05,415 --> 00:53:08,984
So that simplifies the system   
dramatically, and you're gonna  

1019
00:53:09,052 --> 00:53:13,088
see that it works in the vast   
majority of situations. So      

1020
00:53:13,157 --> 00:53:15,357
let's talk about this           
whole size class thing and      

1021
00:53:15,426 --> 00:53:16,658
how it works. First of all,     

1022
00:53:16,727 --> 00:53:19,394
you have to understand          
what the devices,               

1023
00:53:19,463 --> 00:53:21,730
what size classes               
the devices are in. For         

1024
00:53:21,799 --> 00:53:27,002
example, iPhones are compact    
in width and regular in height  

1025
00:53:27,071 --> 00:53:31,740
when they're in portrait.       
When you rotate an iPhone,      

1026
00:53:31,809 --> 00:53:34,809
not an iPhone+, a regular       
iPhone, when you rotate it,     

1027
00:53:34,878 --> 00:53:38,514
now it is considered            
compact in both directions,     

1028
00:53:38,582 --> 00:53:40,082
which a little counter          
intuitive. You would think,     

1029
00:53:40,150 --> 00:53:42,984
well, now it's regular in       
width, but no, it's considered  

1030
00:53:43,053 --> 00:53:46,154
compact in width and it's       
amazing how often that turns    

1031
00:53:46,223 --> 00:53:48,690
out to be exactly what          
you want, all right?            

1032
00:53:48,759 --> 00:53:52,060
And you'll see that to be       
the case. Now iPhone Pluses     

1033
00:53:52,129 --> 00:53:55,230
are different. iPhone Pluses    
are still compact in width and  

1034
00:53:55,298 --> 00:53:57,932
regular in height in portrait,  
but                             

1035
00:53:58,001 --> 00:53:59,134
when you turn them              
to landscape,                   

1036
00:53:59,202 --> 00:54:03,005
now they are regular in width   
and compact in height. So       

1037
00:54:03,073 --> 00:54:07,542
iPhone pluses are different     
than regular iPhones in that    

1038
00:54:07,611 --> 00:54:11,446
way. iPads are regular          
width and regular height.       

1039
00:54:11,515 --> 00:54:14,549
Portrait or landscape doesn't   
matter they're always regular   

1040
00:54:14,618 --> 00:54:17,453
in both which you can imagine   
they're big, iPads are huge.    

1041
00:54:17,521 --> 00:54:20,989
However, notice that an MVC     
that is in the master           

1042
00:54:21,058 --> 00:54:23,759
of the split view is            
compact in width,               

1043
00:54:23,827 --> 00:54:28,029
even though it's on an iPad,    
it's still compact in width     

1044
00:54:28,098 --> 00:54:32,634
and regular in height. So it's  
not just the device you're on   

1045
00:54:32,703 --> 00:54:35,237
that says what environment      
your MVC is in,                 

1046
00:54:35,306 --> 00:54:40,976
it might be the MVC situation   
that it's in. So, and           

1047
00:54:41,044 --> 00:54:43,945
that's why we don't look at     
things like am I on an iPad?    

1048
00:54:44,014 --> 00:54:46,114
Because then I'd have to say,   
am I an iPad and                

1049
00:54:46,183 --> 00:54:50,085
am I in split view?             
We just ask, am I compact or    

1050
00:54:50,153 --> 00:54:52,620
am I regular in my width and    
height? And then we react to    

1051
00:54:52,689 --> 00:54:57,359
that. So here are all the       
devices in a little grid for    

1052
00:54:57,428 --> 00:55:00,095
that and                        
let me show you what an app.    

1053
00:55:00,163 --> 00:55:02,764
So here's an app like           
a calculator similar to our     

1054
00:55:02,833 --> 00:55:05,500
concentration calculator        
has a lot of buttons and        

1055
00:55:05,569 --> 00:55:07,970
maybe it will look better       
with five across and            

1056
00:55:08,038 --> 00:55:11,106
four down in the two cases      
where the compact tight, see?   

1057
00:55:11,174 --> 00:55:13,675
Whether there's compact width   
or regular width, it still      

1058
00:55:13,744 --> 00:55:16,411
looks better to have only four  
high on your compact height.    

1059
00:55:16,480 --> 00:55:17,479
And when it's regular height,   

1060
00:55:17,548 --> 00:55:19,347
it always look better           
to have five high.              

1061
00:55:19,416 --> 00:55:20,982
Maybe even more                 
would be better, but            

1062
00:55:21,051 --> 00:55:23,785
it always looks better          
to have five than four.         

1063
00:55:23,854 --> 00:55:25,787
So this is what we're going to  
do in the demo, we're going to  

1064
00:55:25,855 --> 00:55:28,924
do concentration the same kind  
of way as this calculator.      

1065
00:55:28,992 --> 00:55:34,029
Okay, now we have, we know      
the size class we're in.        

1066
00:55:34,098 --> 00:55:38,734
We always know that as our      
MVC is doing its business.      

1067
00:55:38,803 --> 00:55:41,536
What can we do based on         
that knowledge? Well,           

1068
00:55:41,605 --> 00:55:46,742
one thing we can do is vary     
a lot of view properties like   

1069
00:55:46,810 --> 00:55:50,345
the fonts on a UI label for     
example, a background color     

1070
00:55:50,414 --> 00:55:54,316
even whether a view is hidden   
or not, even whether a view is  

1071
00:55:54,385 --> 00:55:58,119
even in the view hierarchy can  
be controlled by size class.    

1072
00:55:58,188 --> 00:56:00,656
So if you're a compact height,  
maybe you have a view that's    

1073
00:56:00,725 --> 00:56:02,991
just completely hidden          
in compact height.              

1074
00:56:03,060 --> 00:56:04,993
Maybe it only appears           
in regular height.              

1075
00:56:05,061 --> 00:56:09,097
That's perfectly controllable   
using your size class. But      

1076
00:56:09,165 --> 00:56:12,634
more importantly and the most   
powerful thing you can do       

1077
00:56:12,703 --> 00:56:17,706
is have your constraints        
be tied to your size class.     

1078
00:56:17,774 --> 00:56:21,543
Okay because remember what      
puts anything on screen in any  

1079
00:56:21,612 --> 00:56:24,379
place? Well it's just           
the constraints, right.         

1080
00:56:24,448 --> 00:56:27,515
The constraints are what        
constrains a view               

1081
00:56:27,584 --> 00:56:30,752
to being in a certain space in  
autolayout. Well if you can     

1082
00:56:30,821 --> 00:56:34,789
control those constraints       
using the size class.           

1083
00:56:34,858 --> 00:56:38,293
Then you can make those views   
move around to different spots  

1084
00:56:38,362 --> 00:56:39,561
depending on your size class.   

1085
00:56:39,630 --> 00:56:42,630
Like go five by four instead    
of going four by five. Or       

1086
00:56:42,699 --> 00:56:45,801
moving the little flip          
label off to the side. So       

1087
00:56:45,869 --> 00:56:48,303
constraints, being able to      
control constraints with your   

1088
00:56:48,371 --> 00:56:50,973
size class is really the power  
of this size class stuff.       

1089
00:56:52,075 --> 00:56:52,807
Now the cool thing,             
by the way,                     

1090
00:56:52,876 --> 00:56:54,008
is InterfaceBuilder             
has support for                 

1091
00:56:54,077 --> 00:56:55,377
doing all of this graphically.  

1092
00:56:55,446 --> 00:56:56,844
So you don't even have          
to do this in your code.        

1093
00:56:56,913 --> 00:56:59,781
You can do it all graphically.  
Now it is possible to find out  

1094
00:56:59,850 --> 00:57:02,150
what your size                  
class is in code.               

1095
00:57:02,218 --> 00:57:04,652
For example, if you wanna know  
your horizontalSizeClass,       

1096
00:57:04,721 --> 00:57:07,188
whether you're compact or       
regular horizontally,           

1097
00:57:07,257 --> 00:57:10,358
you just call this method.      
You access this object          

1098
00:57:10,427 --> 00:57:12,294
that's in your view controller  
called trait collection.        

1099
00:57:12,363 --> 00:57:13,862
It's a collection of            
all your traits and             

1100
00:57:13,931 --> 00:57:16,632
one of your traits is your      
horizontal size class.          

1101
00:57:16,700 --> 00:57:19,167
You can get back into enum.     
It's either compact or          

1102
00:57:19,236 --> 00:57:22,504
regular. I suppose it could be  
unspecified but it wouldn't     

1103
00:57:22,572 --> 00:57:27,309
actually be that while you      
were running. Again, it's rare  

1104
00:57:27,377 --> 00:57:29,978
to do this. We're gonna do      
this all in InterfaceBuilder,   

1105
00:57:30,047 --> 00:57:32,580
and so that's something         
that's all visual, so           

1106
00:57:32,649 --> 00:57:34,149
I'm gonna have to show          
you to it in a demo.            

1107
00:57:34,217 --> 00:57:36,884
This is one place where a demo  
is worth 1 billion words.       

1108
00:57:36,953 --> 00:57:40,255
To try and explain it without   
a demo, be almost impossible.   

1109
00:57:40,324 --> 00:57:44,225
And so I'm not gonna get back   
to the slide so let me just     

1110
00:57:44,294 --> 00:57:46,528
summarize here that we do       
have a Friday section.          

1111
00:57:46,596 --> 00:57:49,698
Please come to it on Friday     
it's about Instruments which    

1112
00:57:49,767 --> 00:57:51,667
is a performance                
analysis tool.                  

1113
00:57:51,735 --> 00:57:54,235
And especially when you're      
doing the multithreaded stuff.  

1114
00:57:54,304 --> 00:57:58,540
You wanna know what's taking    
a long time to execute, right?  

1115
00:57:58,608 --> 00:58:00,742
So that you can put it          
off in another thread.          

1116
00:58:00,811 --> 00:58:02,778
Sometimes it's obvious when     
it's a network blocking thing,  

1117
00:58:02,846 --> 00:58:05,447
but other times you have stuff  
that you're computing that      

1118
00:58:05,516 --> 00:58:08,316
actually turns out to be        
taking a lot time. So using     

1119
00:58:08,385 --> 00:58:11,252
instruments to find out what    
that is will save you a lot of  

1120
00:58:11,321 --> 00:58:14,389
putting stuff on other threads  
that doesn't need to be. Only   

1121
00:58:14,458 --> 00:58:17,926
the stuff that needs to be.     
And you all know Donald Knuth,  

1122
00:58:17,994 --> 00:58:19,994
right?                          
Don't prematurely optimize.     

1123
00:58:20,063 --> 00:58:22,798
Don't obfuscate your code       
to make it run faster,          

1124
00:58:22,866 --> 00:58:25,233
unless you're sure that's       
actually what's running slow.   

1125
00:58:25,301 --> 00:58:29,371
Well, you need instruments      
to know that. Next week,        

1126
00:58:29,439 --> 00:58:30,772
we'll dive into                 
some more topics,               

1127
00:58:30,841 --> 00:58:32,373
Table View,                     
Collection View, Drag and       

1128
00:58:32,442 --> 00:58:36,778
Drop, stuff like that.          
All right,                      

1129
00:58:36,847 --> 00:58:40,916
so, let's go and                
do our concentration.           

1130
00:58:40,984 --> 00:58:44,018
So here is concentration. It's  
exactly where we left off,      

1131
00:58:44,087 --> 00:58:46,922
except for two changes. One     
change I made is I turned off   

1132
00:58:46,990 --> 00:58:51,025
all the view controller life    
cycle logging, because if we    

1133
00:58:51,094 --> 00:58:54,162
need the console, I want to be  
clear, so you can see things.   

1134
00:58:54,231 --> 00:58:55,664
Cuz I don't think we'll         
need the console, but, hey,     

1135
00:58:55,733 --> 00:58:58,834
you never know. Tech and        
I added more buttons,           

1136
00:58:58,902 --> 00:59:01,403
this used to have 12, so I      
just added a couple more rows   

1137
00:59:01,472 --> 00:59:02,470
of buttons here,                
so there's 20.                  

1138
00:59:02,539 --> 00:59:06,141
So, let's see, what it looks    
like now with those two         

1139
00:59:06,209 --> 00:59:08,076
very minor changes, I haven't   
changed any of the code or      

1140
00:59:08,145 --> 00:59:11,880
anything like that.             
All right, so here we go, so    

1141
00:59:11,949 --> 00:59:16,484
lets do sports, working like    
a charm, okay. Looks good. And  

1142
00:59:16,553 --> 00:59:20,555
of course, that's not so good.  

1143
00:59:20,624 --> 00:59:24,225
I added those more buttons,     
but it caused the flip count.   

1144
00:59:24,294 --> 00:59:27,695
The flip count is at the        
bottom here it flips eight,     

1145
00:59:27,764 --> 00:59:30,865
it got pushed completely off.   
And look at the buttons,        

1146
00:59:30,934 --> 00:59:33,402
they're barely big enough       
to hold the emoji anymore.      

1147
00:59:33,470 --> 00:59:36,003
Also there are ugly buttons,    
they are really flat.           

1148
00:59:36,072 --> 00:59:37,772
A lot of blank                  
space on the size,              

1149
00:59:37,841 --> 00:59:41,910
this UI looks terrible.         
So we're gonna fix this UI and  

1150
00:59:41,978 --> 00:59:45,313
by doing two things. One,       
we're gonna do five across and  

1151
00:59:45,382 --> 00:59:48,950
four down only in landscape     
because back here,              

1152
00:59:49,018 --> 00:59:51,586
we like these nice square       
buttons here. We wouldn't want  

1153
00:59:51,654 --> 00:59:54,789
to switch to five across and    
four here and then we start     

1154
00:59:54,858 --> 00:59:56,925
looking bad here. So that's     
one thing we're gonna do.       

1155
00:59:56,993 --> 01:00:00,328
And the other thing is we're    
gonna move this Flips thing.    

1156
01:00:00,397 --> 01:00:03,564
In landscape to be over to the  
side here, over on the side.    

1157
01:00:03,633 --> 01:00:04,465
This will help the buttons be   

1158
01:00:04,534 --> 01:00:07,401
even more square and use        
the space more efficiently on   

1159
01:00:07,470 --> 01:00:10,671
this side. So those are the     
two things we're gonna do,      

1160
01:00:10,740 --> 01:00:12,940
all right?                      
So how do we do this?           

1161
01:00:13,009 --> 01:00:15,210
How are we gonna do this?       
Well, we need a strategy for    

1162
01:00:15,279 --> 01:00:18,580
doing all this.                 
And my strategy is going, and   

1163
01:00:18,649 --> 01:00:20,782
remember, we didn't really,     
haven't looked at this a lot.   

1164
01:00:20,851 --> 01:00:22,884
But remember, you can look at   
all your devices down here,     

1165
01:00:22,953 --> 01:00:25,687
including whether they're       
in landscape or portrait.       

1166
01:00:25,756 --> 01:00:28,623
So here I'm looking at this     
thing in landscape. And here's  

1167
01:00:28,692 --> 01:00:30,926
where my problem is, it's       
four across and five down.      

1168
01:00:30,994 --> 01:00:33,595
I want it to be five            
across and four down. So        

1169
01:00:33,664 --> 01:00:36,431
my strategy is gonna be,        
I'm actually gonna add four     

1170
01:00:36,499 --> 01:00:40,601
buttons here. And then when     
I'm in landscape, I'm gonna     

1171
01:00:40,670 --> 01:00:45,507
hide these four buttons.        
And when I'm back in portrait,  

1172
01:00:45,575 --> 01:00:48,609
I'll hide the new buttons       
I added. So I'm actually        

1173
01:00:48,678 --> 01:00:51,946
gonna have 24 buttons but 4 of  
them will be hidden in one or   

1174
01:00:52,015 --> 01:00:54,616
the other. See that strategy?   
So this is only,                

1175
01:00:54,685 --> 01:00:56,718
this is one strategy for doing  
it. It's a simple strategy.     

1176
01:00:56,786 --> 01:00:59,620
So we're gonna start with       
a simple strategy, all right?   

1177
01:00:59,689 --> 01:01:01,423
Now to do that, so you can see  
what I'm doing a little more.   

1178
01:01:01,424 --> 01:01:03,158
So lets do that.                

1179
01:01:03,227 --> 01:01:06,627
See this little constraint      
right here? This is             

1180
01:01:06,696 --> 01:01:09,330
the constraint that's holding   
this to this right edge.        

1181
01:01:09,399 --> 01:01:12,400
I'm going to delete this        
constraint just temporarily     

1182
01:01:12,468 --> 01:01:16,404
here so it makes some space     
for me to work. So I'm just     

1183
01:01:16,472 --> 01:01:19,106
gonna delete that and so it's   
not pinned to that edge so      

1184
01:01:19,175 --> 01:01:22,343
it moved over. Now I'm going    
to add these four buttons.      

1185
01:01:22,412 --> 01:01:24,312
Remember, I said I'm gonna put  
four buttons on the side. So    

1186
01:01:24,381 --> 01:01:27,214
I'm just gonna copy and paste   
one of the existing buttons.    

1187
01:01:27,283 --> 01:01:29,483
In fact,                        
I'll paste it four times. And   

1188
01:01:29,552 --> 01:01:33,054
I'm gonna select all of them.   
I'm gonna go down here to our   

1189
01:01:33,123 --> 01:01:36,424
embed, and make a stack view    
out of it. I'm going to         

1190
01:01:36,493 --> 01:01:40,094
inspect that stack view.        
Give it some spacing.           

1191
01:01:40,163 --> 01:01:42,297
I don't want it to be leaning.  
I want it to be filled.         

1192
01:01:42,366 --> 01:01:43,632
All right, and I want it        
to be filled equally.           

1193
01:01:43,700 --> 01:01:46,767
I want all the buttons to be    
the same height, all right?     

1194
01:01:46,836 --> 01:01:48,536
make sure that we wire it up    
to our card buttons array.      

1195
01:01:48,537 --> 01:01:50,237
Let's go ahead and              

1196
01:01:50,307 --> 01:01:55,142
So let's do that.               
Control drag, there's one and   

1197
01:01:55,211 --> 01:01:59,313
there's two and                 
there is three,                 

1198
01:01:59,382 --> 01:02:05,253
let me up a little bit,         
sorry and there is four,        

1199
01:02:05,321 --> 01:02:09,991
okay. So we've got inner card   
buttons, now we want these      

1200
01:02:10,059 --> 01:02:13,495
four to join the party. Okay I  
want them to join here so       

1201
01:02:13,563 --> 01:02:16,597
I'm going to select,            
both of these stack views, and  

1202
01:02:16,666 --> 01:02:22,270
I'm going to embed them in a    
stack view. We'll go ahead and  

1203
01:02:22,339 --> 01:02:24,939
put some spacing in there, so   
we can see a little better.     

1204
01:02:25,008 --> 01:02:26,574
Here, I don't want them         
aligned on the bottom,          

1205
01:02:26,642 --> 01:02:31,278
I want them to fill, however,   
I do not one fill equally.      

1206
01:02:31,347 --> 01:02:33,081
why I don't want fill equally?  
That would make this one stack  

1207
01:02:33,082 --> 01:02:34,816
Do you see                      

1208
01:02:34,885 --> 01:02:38,420
view, the same width as this    
whole big stack view. So        

1209
01:02:38,488 --> 01:02:40,889
that wouldn't be really wide    
and those will be small but     

1210
01:02:40,958 --> 01:02:43,925
I do want this stack            
view to be the same width       

1211
01:02:43,993 --> 01:02:47,262
as all of these. So             
how am I gonna do that. Well,   

1212
01:02:47,331 --> 01:02:50,531
I'm going to control            
drag from this stack view       

1213
01:02:50,600 --> 01:02:54,369
to one of these buttons over    
here. And say please make them  

1214
01:02:54,438 --> 01:02:57,905
equal widths and that's         
perfectly legal to do that,     

1215
01:02:57,974 --> 01:03:01,276
to have one view and just say   
please always be constrained.   

1216
01:03:01,344 --> 01:03:03,811
These are all constraints,      
constrain yourself              

1217
01:03:03,880 --> 01:03:06,514
to be the same width as this    
one over here. Okay and         

1218
01:03:06,583 --> 01:03:10,018
that's gonna ensure that even   
as this get wider that that     

1219
01:03:10,087 --> 01:03:12,854
row will always be same width   
as all of the other rows in     

1220
01:03:12,923 --> 01:03:17,358
here. So I've created this new  
stack view right here. This     

1221
01:03:17,427 --> 01:03:21,128
stack view has no constraints,  
right? If we look over here,    

1222
01:03:21,197 --> 01:03:24,632
there are no constraints on it  
cuz I just created it. And so   

1223
01:03:24,701 --> 01:03:31,305
I really want it to zoom out    
to be constrained to the edges  

1224
01:03:31,374 --> 01:03:33,841
here. What I really want is     
I want it to constrain to       

1225
01:03:33,910 --> 01:03:34,843
the top up here and             

1226
01:03:34,911 --> 01:03:37,679
to all the safe areas on        
the other three edges. So       

1227
01:03:37,747 --> 01:03:40,848
I'm gonna try the pin again.    
Remember this pin over here?    

1228
01:03:40,917 --> 01:03:44,752
So I'm just gonna try putting   
an eight point pin and          

1229
01:03:44,821 --> 01:03:46,687
it's gonna do that              
to nearest neighbor.            

1230
01:03:46,756 --> 01:03:48,923
I'm hoping it's gonna pick      
the right nearest neighbor,     

1231
01:03:48,992 --> 01:03:53,194
all in all sides.               
Let's see what it does. Well,   

1232
01:03:53,263 --> 01:03:55,764
maybe that worked.              
It's close. Let's look.         

1233
01:03:55,832 --> 01:03:59,500
It picked the top space to      
superview. I don't want that.   

1234
01:03:59,569 --> 01:04:02,470
I wanted this safe area there.  
Then trailing the safe area.    

1235
01:04:02,539 --> 01:04:05,673
Yeah, leaving the safe area     
bottom to the flip count.       

1236
01:04:05,742 --> 01:04:07,375
Whoo! This thing did            
pretty well, but                

1237
01:04:07,444 --> 01:04:08,910
of course this superview        
thing is wrong.                 

1238
01:04:08,979 --> 01:04:10,578
So let's remind ourselves       
how we fix that.                

1239
01:04:10,647 --> 01:04:12,013
We go to our document outline.  

1240
01:04:12,082 --> 01:04:13,381
Let's find it,                  
it's right here.                

1241
01:04:13,449 --> 01:04:16,818
Stack, stack view top to the    
top of the view plus 8. And     

1242
01:04:16,886 --> 01:04:19,787
remember, we don't want that    
to the superview. We want it    

1243
01:04:19,856 --> 01:04:24,726
here to the safe area. So now   
we've got this set back up.     

1244
01:04:24,795 --> 01:04:27,662
Now the problem here is         
we have all 24 buttons          

1245
01:04:27,730 --> 01:04:31,099
showing right here. See all     
24 buttons? That's no good.     

1246
01:04:31,167 --> 01:04:34,902
So I don't want these four      
buttons showing in landscape.   

1247
01:04:34,971 --> 01:04:38,273
So how do I do that? I'm just   
gonna pick this stack view,     

1248
01:04:38,341 --> 01:04:41,743
and I'm gonna make it           
disappear in landscape, but     

1249
01:04:41,812 --> 01:04:43,078
not in landscape.               

1250
01:04:43,146 --> 01:04:46,981
It's gonna disappear when I'm   
in a compact vertical size      

1251
01:04:47,049 --> 01:04:52,854
class. Which is only iPhones    
in landscape, it turns out.     

1252
01:04:52,923 --> 01:04:56,024
So how do we do that? Well,     
if we inspect this stack view,  

1253
01:04:56,092 --> 01:04:57,592
I'm just going to               
the normal attributes and       

1254
01:04:57,660 --> 01:05:00,628
spectrum over here. Look at     
all these little plus signs.    

1255
01:05:00,697 --> 01:05:02,297
You see these plus signs here?  

1256
01:05:02,366 --> 01:05:03,998
Plus, plus, plus, and           
you go down here,               

1257
01:05:04,067 --> 01:05:08,269
plus. These are all attributes  
of the selected thing,          

1258
01:05:08,338 --> 01:05:10,604
that can be varied              
by size class.                  

1259
01:05:10,673 --> 01:05:14,775
So it's not just whether it's   
hidden or not, which is what I  

1260
01:05:14,844 --> 01:05:18,012
want right here. You see it's   
hidden right here. That's got   

1261
01:05:18,080 --> 01:05:21,115
a plus. But also things like    
the background color. Or for    

1262
01:05:21,184 --> 01:05:24,318
the stack view, even the        
alignment, the distribution,    

1263
01:05:24,387 --> 01:05:27,321
you can have this change when   
you go to a different class     

1264
01:05:27,390 --> 01:05:30,491
size. It's pretty darn cool.    
So we're gonna do a simple one  

1265
01:05:30,560 --> 01:05:33,394
which is hidden. And the way    
you vary is you just press      

1266
01:05:33,463 --> 01:05:36,431
the plus. And when the press    
the plus, it says,              

1267
01:05:36,500 --> 01:05:39,400
you wanna vary hidden based     
on the size class. Well,        

1268
01:05:39,469 --> 01:05:42,537
what size class would you like  
to vary for? Well, in my case,  

1269
01:05:42,605 --> 01:05:44,472
it's compact height.            
I don't care about the width.   

1270
01:05:44,540 --> 01:05:47,608
So I'm going to set Width to    
Any. Any width is fine. But     

1271
01:05:47,677 --> 01:05:51,112
height, compact, yes. I want a  
compact variation. This gamut,  

1272
01:05:51,181 --> 01:05:55,850
by the way, you vary based      
on the color capabilities       

1273
01:05:55,919 --> 01:05:58,652
of the device you're on. We're  
not doing that. It's really     

1274
01:05:58,721 --> 01:06:01,556
not a layout thing per se, but  
it still can be varied. And so  

1275
01:06:01,624 --> 01:06:03,691
I'm gonna hit Add Variation.    
And watch what happens right    

1276
01:06:03,759 --> 01:06:07,028
over here when I hit            
Add Variation. See, we've got   

1277
01:06:07,097 --> 01:06:09,263
a new hidden. We have this      
hidden and another hidden.      

1278
01:06:09,332 --> 01:06:14,135
This one is HC, which stands    
for height compact. And         

1279
01:06:14,204 --> 01:06:17,271
right now it's not hidden       
in height compact, but          

1280
01:06:17,340 --> 01:06:22,243
if I turn this on, woo hoo!     
See, it hid that entire         

1281
01:06:22,312 --> 01:06:26,581
stack view, cuz I'm in compact  
height right now. And if I go   

1282
01:06:26,650 --> 01:06:31,118
back over here to my portrait   
mode, you can see that it's     

1283
01:06:31,187 --> 01:06:35,089
not hidden. It's still there.   
See four across, five down.     

1284
01:06:35,158 --> 01:06:39,360
It's still there. But now I     
want this one to be hidden. So  

1285
01:06:39,429 --> 01:06:43,097
l am gonna click on this stack  
view, select the whole stack    

1286
01:06:43,166 --> 01:06:47,601
view here, if l can. No, it's   
hard to, well, let me zoom in   

1287
01:06:47,670 --> 01:06:52,173
a little. Selecting             
this whole stack view.          

1288
01:06:52,242 --> 01:06:55,176
And here l'm gonna do the same  
thing. l'm in portrait mode     

1289
01:06:55,244 --> 01:06:57,946
right here, l'm gonna           
add another variance.           

1290
01:06:58,014 --> 01:07:02,083
This is a variance for any      
width and regular height. And   

1291
01:07:02,151 --> 01:07:06,955
in that case,                   
this one is hidden. So voila,   

1292
01:07:07,023 --> 01:07:10,458
look at that, four wide,        
five high, and over here,       

1293
01:07:11,861 --> 01:07:17,132
five wide and four high.        
Let's see if this works.        

1294
01:07:17,200 --> 01:07:19,567
It's not quite gonna work,      
but it's gonna be close.        

1295
01:07:24,374 --> 01:07:26,841
All right, so here we go.       
Let's go to Sports.             

1296
01:07:26,909 --> 01:07:29,344
Look at that, five wide and     
four high. Excellent,           

1297
01:07:29,412 --> 01:07:32,914
let's pick some things here     
like this. Now let's rotate.    

1298
01:07:32,983 --> 01:07:36,550
Whoop, looking good, let's      
pick something down here.       

1299
01:07:36,619 --> 01:07:43,591
Rotate, oops, what happened to  
those? See that? They're gone.  

1300
01:07:43,660 --> 01:07:47,161
I picked two that were in       
this row that got hidden. So    

1301
01:07:47,230 --> 01:07:50,464
it makes perfect sense when we  
went over they got hidden. So   

1302
01:07:50,533 --> 01:07:53,534
how am I gonna fix that? Well,  
this is kinda of a clunky UI,   

1303
01:07:53,603 --> 01:07:56,503
because we're using these       
outlet collection to gather     

1304
01:07:56,572 --> 01:07:58,372
all these cards.                
But one trick I could           

1305
01:07:58,441 --> 01:08:00,407
do really easily is go          
back to my code here for        

1306
01:08:00,476 --> 01:08:02,610
the concentration               
View Controller. And            

1307
01:08:02,679 --> 01:08:05,279
just everywhere that I'm        
doing cardButtons, looking at   

1308
01:08:05,348 --> 01:08:07,981
the cardButtons, instead of     
looking at all 24 cardButtons,  

1309
01:08:08,050 --> 01:08:10,484
I'm only gonna look at the 20   
that are visible at any given   

1310
01:08:10,553 --> 01:08:13,420
time. So I'm gonna create a     
little private var here called  

1311
01:08:13,489 --> 01:08:19,193
visibleCardButtons. It's gonna  
be an array of UIButtons also.  

1312
01:08:19,262 --> 01:08:22,530
In fact, it's even going to be  
implicitly unwrapped, and it's  

1313
01:08:22,598 --> 01:08:25,566
gonna be computed. I'm just     
gonna return my cardButtons,    

1314
01:08:25,635 --> 01:08:28,769
if they've been set.            
And I'm gonna filter them by    

1315
01:08:28,838 --> 01:08:31,873
the buttons superview           
being visible.                  

1316
01:08:31,942 --> 01:08:33,807
Because if the button's         
superview is visible,           

1317
01:08:33,876 --> 01:08:35,009
then it's visible, right?       

1318
01:08:35,078 --> 01:08:39,848
So I'm gonna say                
!$0.superview!.isHidden.        

1319
01:08:40,950 --> 01:08:42,984
So these are the visible        
hard buttons.                   

1320
01:08:43,053 --> 01:08:45,453
This is a little                
fragile to do this, but         

1321
01:08:45,522 --> 01:08:48,756
we know that all our buttons    
are in stacked views, so        

1322
01:08:48,824 --> 01:08:51,025
this is okay. Probably could    
find a much better way          

1323
01:08:51,094 --> 01:08:53,093
to calculate whether it's       
actually on screen or not.      

1324
01:08:53,162 --> 01:08:56,864
But anyway, and I'm just gonna  
now replace everywhere that I   

1325
01:08:56,933 --> 01:09:00,034
use cardButtons with            
visibleCardButtons, so here,    

1326
01:09:00,102 --> 01:09:02,870
and here, and here. I'm just    
finding and replacing here.     

1327
01:09:02,939 --> 01:09:08,376
Paste. So now that's going      
to fix this problem, I hope.    

1328
01:09:08,445 --> 01:09:13,480
Let's find out.                 
All right, it's worked again.   

1329
01:09:13,549 --> 01:09:16,884
All right, let's go down here.  
These are the ones in danger.   

1330
01:09:16,952 --> 01:09:22,357
Let's try, woo hoo, no. How     
could this not have worked?     

1331
01:09:22,425 --> 01:09:26,493
That code was infallible.       
Well, here's the problem here,  

1332
01:09:26,562 --> 01:09:29,864
when I switch back and          
forth, all those views get      

1333
01:09:29,933 --> 01:09:32,666
relaid out, right,              
layout of views happens.        

1334
01:09:32,735 --> 01:09:37,038
But nothing ever causes them    
to get re, out, reset out for   

1335
01:09:37,106 --> 01:09:40,274
my model. So they've all        
still got the buttons from      

1336
01:09:40,343 --> 01:09:42,977
what they were before. So what  
I need to do is every time I    

1337
01:09:43,046 --> 01:09:45,146
relay out my                    
subviews like this I            

1338
01:09:45,215 --> 01:09:48,415
need to update my view from     
a model. Well, guess who comes  

1339
01:09:48,484 --> 01:09:52,886
to the rescue here? It's view   
controller life cycle, right?   

1340
01:09:52,955 --> 01:09:56,190
viewDidLayoutSubviews in        
vieweDidLayoutSubviews.         

1341
01:09:56,259 --> 01:09:58,927
I'm just gonna do update        
my view from my model.          

1342
01:10:08,437 --> 01:10:10,538
We got Sports.                  
Now we have these done, oops,   

1343
01:10:10,606 --> 01:10:13,608
it's the other way around, so   
we go this way. Looks work      

1344
01:10:13,676 --> 01:10:15,876
we're good. Now we can get      
these offending ones and        

1345
01:10:15,945 --> 01:10:18,479
they're there. Now they're in   
random places, because we're    

1346
01:10:18,547 --> 01:10:22,116
using this outlay collection,   
but at least it's working.      

1347
01:10:22,185 --> 01:10:25,653
Now what about the problem      
of where's our face,            

1348
01:10:25,722 --> 01:10:28,623
our flips number?               
There's no flips there.         

1349
01:10:28,692 --> 01:10:30,691
Gotta push down below           
the tab bar down there.         

1350
01:10:30,760 --> 01:10:32,393
How are we gonna fix that?      
All right,                      

1351
01:10:32,461 --> 01:10:34,729
we're gonna fix that in a       
different way just to show you  

1352
01:10:34,797 --> 01:10:37,665
there are other ways to do      
these things. What we're gonna  

1353
01:10:37,734 --> 01:10:41,402
do is we're gonna move          
this Flips things up here.      

1354
01:10:41,470 --> 01:10:43,771
Now you could imagine,          
let's create another one and    

1355
01:10:43,840 --> 01:10:46,273
then do Is Hidden on            
the two of them. And yeah,      

1356
01:10:46,342 --> 01:10:49,076
we could that, but that kind    
of starts getting ridiculous,   

1357
01:10:49,145 --> 01:10:51,812
cuz now I'm gonna have to have  
another outlet to that other    

1358
01:10:51,881 --> 01:10:54,582
one. What a pain.               
I really just wanna move this.  

1359
01:10:54,651 --> 01:10:58,853
Well, what makes this be here?  
What makes it be here           

1360
01:10:58,922 --> 01:11:01,823
is these constraints on it,     
the fact that it's aligned to   

1361
01:11:01,891 --> 01:11:03,891
the center, that it's           
hooked to the bottom,           

1362
01:11:03,960 --> 01:11:07,094
that the top space is           
hooked to that stack view.      

1363
01:11:07,163 --> 01:11:10,030
That's what makes this be       
here. So if I could change      

1364
01:11:10,099 --> 01:11:13,033
those constraints, I could      
make it be over here. And       

1365
01:11:13,102 --> 01:11:16,637
as long as those constraints    
only happen in height compact,  

1366
01:11:16,706 --> 01:11:20,441
woo hoo, it'll switch, right?   
So that's what we're gonna do.  

1367
01:11:20,509 --> 01:11:22,075
Now how do we do that?          

1368
01:11:22,144 --> 01:11:25,680
Okay, we don't have the little  
pluses by all our constraints,  

1369
01:11:25,748 --> 01:11:27,081
how the heck do we do that?     
Well,                           

1370
01:11:27,150 --> 01:11:29,383
we do that with this            
magical button right here.      

1371
01:11:29,452 --> 01:11:32,219
You see this Vary for Traits?   
We don't even need this.        

1372
01:11:32,288 --> 01:11:35,323
In fact, we could probably,     
oops, we can probably use,      

1373
01:11:35,392 --> 01:11:37,391
don't even need document        
outline here. So                

1374
01:11:37,459 --> 01:11:40,528
you can really see what's       
going on here, right? So here   

1375
01:11:40,596 --> 01:11:43,397
I'm working, and if I click     
this Vary for Traits button     

1376
01:11:43,466 --> 01:11:46,667
right here, it'll say, okay,    
you're going to go into a mode  

1377
01:11:46,736 --> 01:11:49,403
where all the constraints       
that you're doing are only      

1378
01:11:49,471 --> 01:11:54,342
applicable to the thing you're  
in. So let's do it, ready?      

1379
01:11:54,410 --> 01:11:57,211
Vary for Traits, it says do     
you want to vary by width or    

1380
01:11:57,280 --> 01:12:00,381
height or both? Here is the     
height that matters to me and,  

1381
01:12:00,449 --> 01:12:03,651
whoa, look at that bar.         
It got dark blue. So            

1382
01:12:03,720 --> 01:12:06,687
that dark blue is warning you,  
whoa, dude, you are editing     

1383
01:12:06,756 --> 01:12:10,524
constraint only in compact      
height. And in fact,            

1384
01:12:10,593 --> 01:12:14,761
it's only showing me compact    
height devices right here. So   

1385
01:12:14,830 --> 01:12:16,397
that blue warning               
is a warning,                   

1386
01:12:16,466 --> 01:12:20,067
make sure you pay attention to  
that. All right, so how do I    

1387
01:12:20,135 --> 01:12:22,703
get Flips to move? Well, I      
gotta take all the things that  

1388
01:12:22,772 --> 01:12:24,505
are constraining                
Flips to be here and            

1389
01:12:24,574 --> 01:12:27,842
get rid of them. So I'm         
just gonna go over here and     

1390
01:12:27,910 --> 01:12:31,111
delete all of these             
constraints. And if I go over   

1391
01:12:31,180 --> 01:12:34,582
to my document outline here     
and I look at my constraints,   

1392
01:12:34,650 --> 01:12:36,851
you'll see that they didn't     
actually get deleted.           

1393
01:12:36,919 --> 01:12:39,854
See how they're grayed out.     
Why didn't they get deleted?    

1394
01:12:39,922 --> 01:12:42,323
Cuz I only deleted them for     
this size class.                

1395
01:12:42,391 --> 01:12:45,492
They still exist in the other   
size class. So that's why       

1396
01:12:45,561 --> 01:12:48,196
they're only grayed out here    
when I'm looking in this one.   

1397
01:12:48,264 --> 01:12:50,264
But it is good,                 
it freed up Flips.              

1398
01:12:50,333 --> 01:12:53,134
You see, Flips is no longer     
tied to anything and            

1399
01:12:53,202 --> 01:12:56,737
also, by the way, of course,    
this little constraint right    

1400
01:12:56,806 --> 01:13:03,978
here, if I can click on it,     
This little I-beam right here,  

1401
01:13:04,046 --> 01:13:07,614
that's gotta go as well.        
Because that is no longer       

1402
01:13:07,683 --> 01:13:11,285
going to be constrained         
to the edge, it's gonna         

1403
01:13:11,354 --> 01:13:15,790
be constrained to the edge of   
this Flips thing, all right?    

1404
01:13:15,858 --> 01:13:19,126
This is gonna be constrained    
here. So let's go ahead and     

1405
01:13:19,195 --> 01:13:22,763
use Ctrl+drag to put this       
thing centered vertically.      

1406
01:13:22,832 --> 01:13:25,933
Let's also use Ctrl+drag to     
hook it up to the trailing      

1407
01:13:26,002 --> 01:13:29,103
space, although I don't         
want it to be 11.667.           

1408
01:13:29,172 --> 01:13:31,372
We'll do our standard           
8 right there.                  

1409
01:13:31,441 --> 01:13:33,441
And then let's go ahead and     
have this guy.                  

1410
01:13:33,509 --> 01:13:35,542
We'll use the pin menu for      
him, and                        

1411
01:13:35,611 --> 01:13:39,447
have his right edge there       
be to the nearest neighbor,     

1412
01:13:39,516 --> 01:13:42,016
which happens to be Flips.      
And then also,                  

1413
01:13:42,084 --> 01:13:45,252
we'll do pin again to hook      
this bottom of this right here  

1414
01:13:45,321 --> 01:13:49,556
to also be 8 from its nearest   
neighbor which is the bottom.   

1415
01:13:49,625 --> 01:13:53,661
Now all these constraints that  
I just put in are all only for  

1416
01:13:53,730 --> 01:13:57,264
height compact. But now I'm     
done varying with that.         

1417
01:13:57,333 --> 01:14:01,903
Now if I go back, you'll see,   
look, it had no effect          

1418
01:14:01,971 --> 01:14:04,838
over here. Flips is             
still at the bottom and         

1419
01:14:04,907 --> 01:14:06,874
over here it's at the sides.    
So let's go ahead and run.      

1420
01:14:15,551 --> 01:14:16,634
let's go make sure that it's    
still working in the old way.   

1421
01:14:16,635 --> 01:14:17,718
So first of all,                

1422
01:14:17,787 --> 01:14:20,921
So here's Flips, working fine,  
it's staying there. Now let's   

1423
01:14:20,990 --> 01:14:25,459
go over and do it here.         
This one, whoa, it's kind of    

1424
01:14:25,527 --> 01:14:28,629
jumping around a little bit.    
Why is that happening?          

1425
01:14:28,698 --> 01:14:32,900
Well, because the 14, 15, 11,   
those are different width so    

1426
01:14:32,968 --> 01:14:35,569
that label is kind of           
changing it to width.           

1427
01:14:35,638 --> 01:14:40,574
Wouldn't it be a lot cooler     
if, instead of doing Flips:14,  

1428
01:14:40,643 --> 01:14:44,378
if I made the Flips             
be a multi-line.                

1429
01:14:44,447 --> 01:14:46,781
Remember the multi-lines        
stuff we did before? And        

1430
01:14:46,849 --> 01:14:53,720
instead of having Flips:0,      
what if I did Flips return 0?   

1431
01:14:53,789 --> 01:14:57,091
This makes more space and       
also this 0 could be 100 and    

1432
01:14:57,160 --> 01:15:00,094
it still wouldn't be            
jiggling around in width.       

1433
01:15:00,162 --> 01:15:01,528
Well, that's actually           
really cool.                    

1434
01:15:01,597 --> 01:15:05,165
Unfortunately, I just           
edited that and it's also       

1435
01:15:05,234 --> 01:15:08,736
going to be true over here and  
I don't want it over here. So   

1436
01:15:08,804 --> 01:15:11,338
how am I gonna have something   
that is gonna be different      

1437
01:15:11,407 --> 01:15:13,907
in these two size classes       
that's driven by the code?      

1438
01:15:13,976 --> 01:15:16,744
Cuz it's the code that decides  
what these things are.          

1439
01:15:16,813 --> 01:15:19,246
Well, we can do that in code    
as well, let's just jump over   

1440
01:15:19,315 --> 01:15:22,282
here real quick.                
Here is where we do this flip,  

1441
01:15:22,351 --> 01:15:28,322
I'm just gonna say              
traitCollection.verticalSizeC-  

1442
01:15:28,391 --> 01:15:32,793
lass = .compact.                
Then I'm gonna do one thing or  

1443
01:15:32,862 --> 01:15:36,429
if it's regular then I'll do    
this old thing. And the thing   

1444
01:15:36,498 --> 01:15:41,669
I'm gonna do in compact is I'm  
going to have carriage return   

1445
01:15:41,738 --> 01:15:44,638
instead of colon.               
And I was gonna run this and    

1446
01:15:44,707 --> 01:15:48,776
then we would see that this     
doesn't quite work, but we're   

1447
01:15:48,845 --> 01:15:52,345
time constrained, I can hear    
1,000 people outside the door.  

1448
01:15:52,414 --> 01:15:54,281
So I'm gonna tell               
you one other thing,            

1449
01:15:54,350 --> 01:15:57,251
which is that if we had gone    
there it wouldn't work, okay.   

1450
01:15:57,320 --> 01:15:58,719
When we switch back and forth,  

1451
01:15:58,788 --> 01:16:01,455
it would not switch. That's     
because when switched back and  

1452
01:16:01,524 --> 01:16:04,090
forth, we need to get           
notified that our               

1453
01:16:04,159 --> 01:16:06,827
trait collection changed. And   
there's a view controller life  

1454
01:16:06,896 --> 01:16:09,596
cycle method which I didn't     
mention last time because       

1455
01:16:09,665 --> 01:16:11,298
you didn't know about traits.   
But now I'm gonna tell you,     

1456
01:16:11,367 --> 01:16:20,073
it's called                     
traitCollectionDidChange. And   

1457
01:16:20,142 --> 01:16:22,810
this gets called every time     
your trait collection changes,  

1458
01:16:22,878 --> 01:16:25,212
right, every time your          
size class changes. So          

1459
01:16:25,281 --> 01:16:28,015
here I'm just gonna update      
my flip count label.            

1460
01:16:29,085 --> 01:16:30,317
Because my flip count label,    

1461
01:16:30,386 --> 01:16:31,651
if you look at its code,        

1462
01:16:31,720 --> 01:16:34,521
it depends on the trait         
collection. So of course every  

1463
01:16:34,590 --> 01:16:37,558
time it changes I need          
to update it, right?            

1464
01:16:46,803 --> 01:16:48,636
So here we go. We'll go         
Sports again, and see,          

1465
01:16:48,704 --> 01:16:49,970
this is working                 
nicely over here.               

1466
01:16:50,039 --> 01:16:52,873
It's not jumping around any     
more because it's underneath.   

1467
01:16:52,942 --> 01:16:56,444
And now let's go look here.     
And we got our colon. Woo,      

1468
01:16:56,512 --> 01:17:03,050
look at that. And we'll         
go back here. That is it.       

1469
01:17:03,119 --> 01:17:06,554
We finished before the crowds   
came in and trampled us. And    

1470
01:17:06,622 --> 01:17:08,055
I will see you on Monday.       
Your homework, remember,        

1471
01:17:08,123 --> 01:17:11,192
is due on Monday,               
before lecture on Monday.       

1472
01:17:11,260 --> 01:17:12,243
you'll have a new homework      
going out on Monday, or         

1473
01:17:12,244 --> 01:17:13,227
And hopefully,                  

1474
01:17:13,295 --> 01:17:14,194
maybe next Wednesday.           

1475
01:17:14,263 --> 01:17:15,763
Let's see what happens          
over the weekend.               

1476
01:17:16,933 --> 01:17:17,564
>> For more,                    

1477
01:17:17,633 --> 01:17:26,139
please visit us                 
at stanford.edu.                
