12. Drag and Drop, Table View, Collection View, and Text Field.srt

1
00:00:00,401 --> 00:00:04,937
本字幕由志愿者义务贡献，采用许可协议
知识共享 署名-非商业性使用-相同方式共享 3.0 美国

2
00:00:05,005 --> 00:00:07,439
Stanford University. >> Okay, well,
>> 斯坦福大学 >> 好

3
00:00:07,508 --> 00:00:12,177
welcome to Lecture number 12 of Stanford CS193P,
欢迎来到斯坦福 CS193P 的第十二节课

4
00:00:12,246 --> 00:00:16,481
Fall of 2017. And today, we're gonna continue the demo
现在是 2017 年秋季学期。今天我们继续

5
00:00:16,550 --> 00:00:19,251
we started with Emoji Art and we're gonna,
我们 Emoji Art 程序，然后我们

6
00:00:19,320 --> 00:00:22,787
we learned a little bit about table view in the last one.
我们上次学习了关于列表视图（UITableView）的一些内容

7
00:00:22,856 --> 00:00:25,791
This time, we're gonna learn more about collection view and

8
00:00:25,860 --> 00:00:28,293
also learn a little bit how drag and drop, and

9
00:00:28,362 --> 00:00:31,229
collection view and table view all go together. And then I'm

10
00:00:31,298 --> 00:00:33,498
gonna go back to the slides and talk about TextField.

11
00:00:33,567 --> 00:00:36,468
And I originally had planned to do a demo in Emoji Art,

12
00:00:36,537 --> 00:00:38,437
of adding a TextField in there, but

13
00:00:38,505 --> 00:00:41,673
we also have to finish early today, because there's some

14
00:00:41,742 --> 00:00:44,609
huge midterm, in this room right after us, and

15
00:00:44,678 --> 00:00:46,911
we have to have time to clear out of here.

16
00:00:46,980 --> 00:00:51,082
So, I will probably do that demo first thing, next Monday,

17
00:00:51,151 --> 00:00:54,653
or I might just skip that demo, we'll see how it goes.

18
00:00:55,856 --> 00:00:57,489
All right, so back to Emoji Art here.

19
00:00:57,558 --> 00:01:01,359
What we're gonna do is make first I'm gonna make Emoji Art

20
00:01:01,428 --> 00:01:04,796
scrollable, because we didn't, it just currently,

21
00:01:04,865 --> 00:01:08,333
it's fixed. Then we're gonna add a collectionView along

22
00:01:08,401 --> 00:01:10,134
the top there, you remember it from the demo,

23
00:01:10,203 --> 00:01:13,205
where we're gonna be able to choose our emoji from. And

24
00:01:13,273 --> 00:01:16,908
then we're gonna add some drag and drop from that

25
00:01:16,977 --> 00:01:20,912
collectionView, both into our view and into other apps, and

26
00:01:20,981 --> 00:01:26,218
vice versa, etc. So let's, actually,

27
00:01:26,287 --> 00:01:31,589
let's take a quick look at what our app looks like so

28
00:01:31,658 --> 00:01:36,628
far, okay, and it's basically working nicely and

29
00:01:36,697 --> 00:01:41,833
that we can pick up images. So I pick up an image here and

30
00:01:41,902 --> 00:01:44,869
drag it in and drop it to change it.

31
00:01:44,938 --> 00:01:47,739
And of course, we have our table view on the left for

32
00:01:47,808 --> 00:01:50,242
choosing documents and adding documents.

33
00:01:50,310 --> 00:01:52,677
Of course, we haven't hooked our table view up, and

34
00:01:52,746 --> 00:01:55,847
that's okay, but because we're gonna do that next week. But

35
00:01:55,916 --> 00:01:58,750
one thing I wanna have you note about this table view

36
00:01:58,819 --> 00:02:02,654
that's kind of annoying is that I can't get rid of it.

37
00:02:02,722 --> 00:02:05,157
See this table view right here? You can't swipe it away,

38
00:02:05,226 --> 00:02:07,993
and that's because essentially, this app thinks

39
00:02:08,062 --> 00:02:10,929
it's in landscape mode on an iPad, and so of course,

40
00:02:10,998 --> 00:02:14,098
this master and the detail to splitView are side by side.

41
00:02:14,167 --> 00:02:17,436
But, since I'm in multi-tasking mode right here,

42
00:02:17,504 --> 00:02:19,738
so much of my screen is taken up,

43
00:02:19,806 --> 00:02:21,973
with Safari over here on the right,

44
00:02:22,041 --> 00:02:26,211
that it's annoying because I really wanna focusing on my

45
00:02:26,279 --> 00:02:29,581
Emoji Art document. So I'm gonna talk to you a little bit

46
00:02:29,649 --> 00:02:32,550
how to make it so that that splitView on the left can be

47
00:02:32,619 --> 00:02:35,887
slid out of the way, even in splitView and landscape mode.

48
00:02:35,955 --> 00:02:39,024
So that's the first little thing we're gonna do. So let's

49
00:02:39,092 --> 00:02:42,661
hop on over to our code over here and see how we do that.

50
00:02:42,730 --> 00:02:46,131
It's quite easy, actually, splitView has a var,

51
00:02:46,200 --> 00:02:49,634
a property in it called preferred display mode, and

52
00:02:49,703 --> 00:02:54,139
you can control what happens with the master through that.

53
00:02:54,208 --> 00:02:56,341
And, it's just that the default here is not what we

54
00:02:56,409 --> 00:02:59,444
want. Now the kinda kooky thing about that,

55
00:02:59,512 --> 00:03:04,016
I'm gonna set this var in my master code. So I'm gonna go

56
00:03:04,084 --> 00:03:07,486
to my emojiArtDocument TableViewController, right?

57
00:03:07,554 --> 00:03:10,088
That's the TableViewController with the one, two, three,

58
00:03:10,157 --> 00:03:11,990
the thing that we want to slide out. And

59
00:03:12,058 --> 00:03:14,626
what I'm gonna set it is kind of an unusual place.

60
00:03:14,695 --> 00:03:18,463
I'm gonna set it in viewWillLayoutSubviews. And

61
00:03:18,532 --> 00:03:20,531
you might be like, whoa, viewWillLayoutSubviews,

62
00:03:20,600 --> 00:03:22,801
that seems like a weird place to set that. Well,

63
00:03:22,869 --> 00:03:25,770
the reason I'm gonna set it there is cuz when the layout

64
00:03:25,839 --> 00:03:28,907
changes, of a splitView, it often resets that preferred

65
00:03:28,976 --> 00:03:32,577
mode. So if I wanna keep enforcing this thing of it,

66
00:03:32,646 --> 00:03:35,814
the master being in slide on top mode, I have to keep

67
00:03:35,883 --> 00:03:38,950
telling it to do that, but I also have to be careful

68
00:03:39,018 --> 00:03:42,587
because setting that preferred mode can cause it to relay

69
00:03:42,656 --> 00:03:44,989
out. So I don't wanna end up in an infinite loop here,

70
00:03:45,058 --> 00:03:46,458
right, where in LayoutSubViews,

71
00:03:46,526 --> 00:03:48,760
I'm setting preferred mode, it's causing a layout,

72
00:03:48,828 --> 00:03:52,697
I'm coming back in. So I'm gonna do this by saying, if my

73
00:03:52,766 --> 00:03:56,034
splitViewController?.prefer- red,

74
00:03:56,103 --> 00:03:59,671
to call preferredDisplayMode != the one I

75
00:03:59,740 --> 00:04:03,008
want. And you can see there's quite a few here,

76
00:04:03,077 --> 00:04:06,311
there's primaryOverlay, there's primaryHidden,

77
00:04:06,380 --> 00:04:09,681
there's Automatic, there's alwaysShowBoth, etc.

78
00:04:09,750 --> 00:04:13,318
But the one I want is primaryOverlay, so if it's not

79
00:04:13,387 --> 00:04:18,156
primaryOverlay, then I'm gonna set my splitViewControllers,

80
00:04:18,225 --> 00:04:22,394
preferredDisplayMode = .primaryOverlay. And so

81
00:04:22,463 --> 00:04:25,897
that'll keep enforcing it every time, even if,

82
00:04:25,965 --> 00:04:28,300
every time we rotate or whatever,

83
00:04:28,368 --> 00:04:32,303
I'm gonna keep forcing this cuz I always want that, this

84
00:04:32,372 --> 00:04:36,408
table view to be appearing on top of my emoji art view.

85
00:04:36,477 --> 00:04:40,211
But I also wanna be able to swipe it out of the way,

86
00:04:40,280 --> 00:04:42,614
I just swiped it out of the way.

87
00:04:42,682 --> 00:04:46,785
Wait, you can't see, hold on, I'll show you. Let me hide

88
00:04:46,853 --> 00:04:50,522
here, Hide Others, okay, so here, I'm swiping it in, and

89
00:04:50,591 --> 00:04:53,624
then I'm swiping it away. Swiping it in, swiping it

90
00:04:53,693 --> 00:04:56,828
away, and I always want it to be that way because it's very

91
00:04:56,897 --> 00:04:59,830
unimportant to access this table. I just go in here,

92
00:04:59,899 --> 00:05:03,234
pick the document I want, now that the document's in there,

93
00:05:03,303 --> 00:05:05,570
I wanna be having as much room to you know,

94
00:05:05,639 --> 00:05:08,473
to drag my stuff in and work here as possible.

95
00:05:08,541 --> 00:05:12,110
Do you understand that primary overlay thing?

96
00:05:12,179 --> 00:05:14,312
And I'm gonna ask you to do that in your homework, just so

97
00:05:14,381 --> 00:05:18,082
you kinda see, what it's all about there. All right,

98
00:05:18,151 --> 00:05:21,686
the next thing I wanna do is to make it so

99
00:05:21,755 --> 00:05:24,956
that my EmojiArtView is scrollable and

100
00:05:25,024 --> 00:05:29,026
zoomable, right, cuz right now, it's just a fixed image.

101
00:05:29,095 --> 00:05:30,262
And we already know how to do that, so

102
00:05:30,330 --> 00:05:32,830
I'm not gonna waste too much time showing you how to make

103
00:05:32,899 --> 00:05:35,800
it scrollable, I'm gonna do it quickly. I'm gonna have some

104
00:05:35,869 --> 00:05:39,170
precanned code to do it, but it's nothing new, it's nothing

105
00:05:39,239 --> 00:05:42,140
that you haven't seen before, in our previous demos.

106
00:05:42,208 --> 00:05:44,576
So I'm gonna go back to my storyboard, here it is,

107
00:05:44,645 --> 00:05:48,346
right here. I'm gonna go down to this viewController right

108
00:05:48,415 --> 00:05:51,750
here, and instead of, right now, what we have,

109
00:05:51,819 --> 00:05:54,953
just to remind you, is we have this drop zone.

110
00:05:55,021 --> 00:05:57,222
And inside the drop zone, we just put our EmojiArtView.

111
00:05:57,290 --> 00:05:59,925
That's why it's not scrollable right there. So I'm gonna

112
00:05:59,993 --> 00:06:03,427
delete it, and instead I'm gonna put a scrollView there,

113
00:06:03,496 --> 00:06:06,631
so I'm gonna go down here and search for a scrollView,

114
00:06:06,700 --> 00:06:09,667
here it is. I'm gonna drag the scrollView in here, I'm gonna

115
00:06:09,736 --> 00:06:12,070
pin the the scrollView to the edges of the drop zone,

116
00:06:12,139 --> 00:06:13,605
of course. So I'll go here and

117
00:06:13,674 --> 00:06:16,241
just pin it right up to the edges. We know how to do that

118
00:06:16,309 --> 00:06:18,809
with this little pin thing, bloop, it spins out, that's

119
00:06:18,878 --> 00:06:23,048
great. Now I'm going to create an outlet to this scrollView,

120
00:06:23,116 --> 00:06:26,884
put it up, where are we gonna put it? Let's put it right

121
00:06:26,953 --> 00:06:29,754
under the drop zone, in here. So I'll Ctrl+drag,

122
00:06:29,823 --> 00:06:34,993
create that scrollView. Now we know that when we

123
00:06:35,062 --> 00:06:39,064
have a scrollView outlet like this, by the way, down here,

124
00:06:39,132 --> 00:06:42,767
this emojiArtView is no longer gonna be an outlet. Okay,

125
00:06:42,836 --> 00:06:45,337
it's just gonna be a regular var and

126
00:06:45,405 --> 00:06:49,006
I'll just set it = creating one. This is exactly what we

127
00:06:49,075 --> 00:06:52,276
did with our image view in our other demo. So we haven't done

128
00:06:52,345 --> 00:06:55,780
anything new here. And when we have a scrollView like this,

129
00:06:55,849 --> 00:06:57,815
we remember we've got to set its minimum scroll view,

130
00:06:57,884 --> 00:06:59,817
maximum. We've gotta set the delegate,

131
00:06:59,886 --> 00:07:01,419
we've gotta implement that view for zoom.

132
00:07:01,487 --> 00:07:04,188
Remember all that? So I'm gonna do all that really quick

133
00:07:04,257 --> 00:07:08,259
here. Trying to remember what I called, yeah, emojiscroll.

134
00:07:08,328 --> 00:07:11,029
So here it is, here's all that code. I just pop it in there.

135
00:07:11,098 --> 00:07:14,932
In fact, let me go over here and show it in big, so

136
00:07:15,001 --> 00:07:16,701
you can see it. So here's the ScrollView Outlet.

137
00:07:16,770 --> 00:07:20,037
So I just added a didSet to it, to set those things,

138
00:07:20,106 --> 00:07:22,173
right, the delegate. And then I added it as a subview.

139
00:07:22,241 --> 00:07:23,875
Here's viewForZooming.

140
00:07:23,943 --> 00:07:26,378
We're obviously zooming in our emojiArtView.

141
00:07:26,446 --> 00:07:29,180
Then I added a var here, emojiArt background image,

142
00:07:29,249 --> 00:07:31,816
which does the stuff we need to do like setting our content

143
00:07:31,885 --> 00:07:33,918
size equal to the frame.

144
00:07:33,987 --> 00:07:36,454
Right, remember we want that. We always want that frame of

145
00:07:36,523 --> 00:07:39,023
our image view to the same as our content size.

146
00:07:39,092 --> 00:07:41,025
I put a little bit of zooming code in here you can go

147
00:07:41,094 --> 00:07:42,360
look at later, which is kind of fun,

148
00:07:42,429 --> 00:07:46,364
to give it an initial zoom that's good. And then,

149
00:07:46,433 --> 00:07:48,700
of course, we need to go down here and use this.

150
00:07:48,769 --> 00:07:51,503
So instead of just setting the emoji art, we use background

151
00:07:51,571 --> 00:07:54,839
image directly, I'm gonna use this emoji art background

152
00:07:54,908 --> 00:07:59,811
image var that I just created. That's this var right here.

153
00:08:01,114 --> 00:08:03,448
Hey everybody. See everything I did right there?

154
00:08:03,517 --> 00:08:06,784
And of course it's complaining that I'm not a UI split view

155
00:08:06,853 --> 00:08:09,954
or UI scroll view delegate by the way, so I'll do that.

156
00:08:10,023 --> 00:08:14,592
UI scroll view delegate, now I implement that. So

157
00:08:14,661 --> 00:08:19,397
let's make sure this all works. So here I am in my app,

158
00:08:19,466 --> 00:08:21,599
I'm just gonna swipe that thing out of the way.

159
00:08:21,668 --> 00:08:23,968
I'm gonna grab an image here and drag and

160
00:08:24,036 --> 00:08:28,072
drop it in. Here it is and hopefully I can scroll. Whew!

161
00:08:28,141 --> 00:08:31,809
I can I can scroll way in scroll pan around

162
00:08:31,878 --> 00:08:35,413
scroll in but you know what? That looks incredibly ugly

163
00:08:35,482 --> 00:08:37,782
to have that thing in the upper left. Like that,

164
00:08:37,850 --> 00:08:40,185
if I really were working on this thing, and I have

165
00:08:40,253 --> 00:08:41,385
to all my work in the upper left,

166
00:08:41,454 --> 00:08:43,654
that would be absolutely ridiculous. So

167
00:08:43,723 --> 00:08:46,824
what I really want is, I want this thing to stay centered.

168
00:08:46,893 --> 00:08:49,693
As I'm zooming in and out, when I'm zoomed out here.

169
00:08:49,762 --> 00:08:52,697
And when I zoom in, I want to say in the center. Not jump up

170
00:08:52,766 --> 00:08:55,767
there to the left like that. So how am I going to do that?

171
00:08:55,836 --> 00:08:58,769
Well, there's a lot of ways to do that, actually. I'm gonna

172
00:08:58,838 --> 00:09:01,272
do it in a simple way that lets me teach your about how

173
00:09:01,340 --> 00:09:05,377
to control the constraints in your storyboard from code.

174
00:09:07,047 --> 00:09:09,247
That's what this little thing is all about that I'm gonna

175
00:09:09,315 --> 00:09:12,117
show you here. So what I'm gonna do is I'm gonna go back

176
00:09:12,185 --> 00:09:16,954
to my storyboard. And I'm going to

177
00:09:17,023 --> 00:09:22,093
have this scroll view right here always be centered.

178
00:09:22,162 --> 00:09:24,028
So I'm going to keep this scroll view in the center,

179
00:09:24,097 --> 00:09:26,498
now, normally that's already happening, because I'm pinned

180
00:09:26,566 --> 00:09:29,500
to the edges. So of course it's in the center, but

181
00:09:29,569 --> 00:09:33,370
what I'm gonna do then is have the scroll view's width and

182
00:09:33,439 --> 00:09:37,008
height stick to its content size. So if you zoom in so

183
00:09:37,077 --> 00:09:38,843
that the content area gets really small,

184
00:09:38,912 --> 00:09:40,945
the scroll view is gonna get small and it's gonna stay

185
00:09:41,014 --> 00:09:42,947
centered. So that's how we're gonna do this, that's

186
00:09:43,016 --> 00:09:46,251
the trick. So how we gonna do that? Well, of course we need

187
00:09:46,319 --> 00:09:48,553
to make it to our scroll view right here stays centered.

188
00:09:48,622 --> 00:09:51,789
So I'm gonna click down here and just pick horizontally and

189
00:09:51,858 --> 00:09:54,392
vertically in the containers, so now it's centered.

190
00:09:54,461 --> 00:09:56,494
Again, that's not doing anything because those other

191
00:09:56,563 --> 00:09:59,864
constraints. But I still want these other constraints over

192
00:09:59,933 --> 00:10:02,600
here. I just don't want them to be fixed.

193
00:10:02,669 --> 00:10:04,935
I want them to be greater than or equal. This is something

194
00:10:05,004 --> 00:10:07,638
we did in the previous one, as well. So I'm gonna edit all of

195
00:10:07,707 --> 00:10:10,875
these ones about the edges to just be greater than equals,

196
00:10:10,944 --> 00:10:13,978
because I really just want my scroll view to never go

197
00:10:14,047 --> 00:10:15,546
outside the bounds.

198
00:10:15,615 --> 00:10:18,682
But I'm fine if my scroll view gets smaller than the bounds,

199
00:10:18,751 --> 00:10:20,318
I just don't want it to get bigger than the bounds, so

200
00:10:20,386 --> 00:10:22,921
that's why I'm putting this greater than or equals into

201
00:10:22,989 --> 00:10:27,358
here. Now you can see that things have turned red. That's

202
00:10:27,426 --> 00:10:31,429
because it's undetermined right now what size the scroll

203
00:10:31,498 --> 00:10:36,100
view is. Because we turned those equals to be

204
00:10:36,169 --> 00:10:39,103
greater than or equal, so it doesn't know how big it is. So

205
00:10:39,171 --> 00:10:41,473
I'm going to fix the size to start.

206
00:10:41,541 --> 00:10:43,641
I'm gonna ctrl drag to itself. And

207
00:10:43,709 --> 00:10:47,612
fix both it's width and height. That fixes it, but

208
00:10:47,681 --> 00:10:51,148
of course now the scroll view is always gonna be this size

209
00:10:51,217 --> 00:10:55,019
which is, we'll look over here and find out. 748 by 703 and

210
00:10:55,088 --> 00:10:57,922
a half. So I clearly don't want that. What I want to be

211
00:10:57,991 --> 00:11:00,091
able to do is make this is make this width and

212
00:11:00,159 --> 00:11:03,694
height equal to the scroll views content size. Now,

213
00:11:03,763 --> 00:11:05,563
unfortunately I can't do that here.

214
00:11:05,632 --> 00:11:08,032
I just know the way to control drag. To do that,

215
00:11:08,101 --> 00:11:11,936
I have to do that in code. So, I'm going to make outlets to

216
00:11:12,005 --> 00:11:16,907
these two constraints and then modify those outlets in code.

217
00:11:16,976 --> 00:11:19,310
So, that that within height is controlled by my code.

218
00:11:19,378 --> 00:11:21,312
So, that is the trickery here. And

219
00:11:21,381 --> 00:11:23,982
the last thing I wanna do though is I'm gonna try and

220
00:11:24,050 --> 00:11:27,285
set the scroll view size to its content size. But if it

221
00:11:27,353 --> 00:11:30,888
gets really big, I want these other constraints to win.

222
00:11:30,957 --> 00:11:32,890
I want the constraints that keep it from going out, so

223
00:11:32,959 --> 00:11:33,591
the edge is to win.

224
00:11:33,659 --> 00:11:36,194
So that's why I'm going to set the priority of these two

225
00:11:36,263 --> 00:11:37,461
height ones, the height and

226
00:11:37,530 --> 00:11:41,765
width ones, to be lower. So here's the priority over here.

227
00:11:41,834 --> 00:11:43,534
It's currently at the required level.

228
00:11:43,603 --> 00:11:47,705
I'm gonna move it down to low priority for both of them. And

229
00:11:47,774 --> 00:11:50,841
so that will be fine when it's inside the bounds because it

230
00:11:50,910 --> 00:11:53,544
won't be conflicting. But once the scroll view gets big cuz I

231
00:11:53,613 --> 00:11:56,247
zoomed way in then it will get pinned to the edges which is

232
00:11:56,316 --> 00:11:59,884
perfect. All right so how do I make outlets to these?

233
00:11:59,953 --> 00:12:01,552
Just control drag of course. So

234
00:12:01,621 --> 00:12:04,689
I'm going to bring up my code and we'll put it right there.

235
00:12:04,757 --> 00:12:06,891
So I'm gonna ctrl drag from with.

236
00:12:06,959 --> 00:12:10,094
Over here you can see that the type of this outlet is NS

237
00:12:10,163 --> 00:12:14,666
layout constraint. I'll call this my scroll view width.

238
00:12:16,135 --> 00:12:19,204
Same thing here with the height. We'll ctrl drag.

239
00:12:19,272 --> 00:12:24,108
This one's going to be my scroll view height. Now

240
00:12:24,177 --> 00:12:26,410
what are we going to change about these constraints?

241
00:12:26,479 --> 00:12:28,612
So if you look at the constraints in the inspector,

242
00:12:28,681 --> 00:12:30,014
let's inspect these constraints,

243
00:12:30,083 --> 00:12:32,416
like constraint width. These are all the things you can

244
00:12:32,485 --> 00:12:34,953
set in a constraint, right, the items involved,

245
00:12:35,021 --> 00:12:37,055
the relationship whether it's equal to, greater than or

246
00:12:37,123 --> 00:12:40,224
less than. And look you can set the constant

247
00:12:40,293 --> 00:12:43,861
which is currently 703 and a half. This is the thing I want

248
00:12:43,930 --> 00:12:47,165
to change to fix my width, this constant right here. So

249
00:12:47,233 --> 00:12:49,200
I'm just going to change that constant in my code.

250
00:12:49,268 --> 00:12:53,304
Now when do I need to change it? Get so you can see here.

251
00:12:53,373 --> 00:12:55,406
When do I need to change these constants?

252
00:12:55,475 --> 00:12:58,409
Well anytime I zoom I definitely need to change it,

253
00:12:58,478 --> 00:12:59,710
right? Because as I'm zooming,

254
00:12:59,779 --> 00:13:02,213
I want my scroll view to be changing size. So,

255
00:13:02,281 --> 00:13:06,918
let that's in scroll view did zoom delegate method. And

256
00:13:06,986 --> 00:13:11,121
all I'm going to do in here is set my scroll view height

257
00:13:11,190 --> 00:13:15,360
constant equal to the scroll view's content size.

258
00:13:16,429 --> 00:13:18,796
ContentSize.height.

259
00:13:18,865 --> 00:13:22,199
And same thing here, the scrollViewWidth.constant is

260
00:13:22,268 --> 00:13:25,703
equal to the scrollView.contentSize.Width.

261
00:13:25,772 --> 00:13:29,340
So now I'm just fixing the width of the scrollView to

262
00:13:29,409 --> 00:13:32,343
its content size. Now again, if it gets too big, this,

263
00:13:32,412 --> 00:13:35,513
this constraint is gonna lose, cuz it's low priority.

264
00:13:35,582 --> 00:13:37,014
The other place I need to do it is, obviously,

265
00:13:37,083 --> 00:13:39,850
when I first set up the image down here,

266
00:13:39,919 --> 00:13:41,719
when I'm first setting all these content size and

267
00:13:41,788 --> 00:13:45,222
all that. So right here I'm gonna be careful and

268
00:13:45,291 --> 00:13:48,426
optionally chain in case this gets called during a prepare.

269
00:13:48,495 --> 00:13:51,729
Might, get, do that and then the, I have the content size,

270
00:13:51,798 --> 00:13:53,998
actually, in a local variable here, size,

271
00:13:54,067 --> 00:13:57,635
from setting these things up here. Okay. And that's it.

272
00:13:57,703 --> 00:14:02,506
So let's go see if this is enough to make this work. And

273
00:14:02,575 --> 00:14:05,742
controlling your constraints from code, I'm gonna show you

274
00:14:05,811 --> 00:14:07,978
another example. I'm not gonna actually do the other example,

275
00:14:08,047 --> 00:14:09,680
cuz I don't wanna, I don't have time in the demo

276
00:14:09,749 --> 00:14:13,251
to show you things twice. But, we'll see another place where

277
00:14:13,320 --> 00:14:15,185
it would make sense in this very app. So

278
00:14:15,254 --> 00:14:18,322
here I'm going to drag in, it's sizing it to this size,

279
00:14:18,391 --> 00:14:21,592
now watch, I'm going to zoom in, the scroll view

280
00:14:21,661 --> 00:14:24,495
is staying the size of it's content size. I'm sorry,

281
00:14:24,564 --> 00:14:28,132
you guys can't see, recall, always remind me of that,

282
00:14:28,201 --> 00:14:31,001
because it's hard for me to remember that. So what I did,

283
00:14:31,070 --> 00:14:34,505
I dragged this in, started here, and

284
00:14:34,574 --> 00:14:38,343
now I just shrink it down and you can see that the scroll

285
00:14:38,411 --> 00:14:41,345
views' bounds are staying hooked to its contents.

286
00:14:41,414 --> 00:14:43,881
And even if I make it very large, now the scroll view's

287
00:14:43,950 --> 00:14:45,850
bounds are way bigger than the borders but

288
00:14:45,918 --> 00:14:48,085
those other constraints are higher priority.

289
00:14:48,154 --> 00:14:50,621
So the scroll view is actually, you can see it

290
00:14:50,690 --> 00:14:53,725
the scroll view indicator's there on the right edge,

291
00:14:53,793 --> 00:14:58,829
it's actually staying inside the bounds. Okay. So

292
00:14:58,898 --> 00:15:01,665
pretty simple, cool fix for

293
00:15:01,734 --> 00:15:04,869
keeping this thing centered right here. All right so

294
00:15:04,938 --> 00:15:08,839
that's that little trick to get back to our code and start

295
00:15:08,908 --> 00:15:13,144
talking about our collection view, here it is. So we're

296
00:15:13,213 --> 00:15:16,747
gonna add that collection view along the top that just has

297
00:15:16,816 --> 00:15:20,184
a bunch of emoji that we're going to use to drag in to our

298
00:15:20,253 --> 00:15:24,055
little UI. And how are we gonna do that? Well, it's

299
00:15:24,123 --> 00:15:29,060
pretty easy actually. Let's start in the storyboard. And

300
00:15:29,129 --> 00:15:30,961
here's our, this is where we're gonna be adding it.

301
00:15:31,030 --> 00:15:34,799
Right here, same place we just were. Now,

302
00:15:34,868 --> 00:15:39,503
one thing about when you're manipulating your views,

303
00:15:39,572 --> 00:15:44,075
there's a really strong tendency to dive right in here

304
00:15:44,144 --> 00:15:47,811
to these things and just start grabbing the handles.

305
00:15:47,880 --> 00:15:50,381
Grab this, like I wanna put this collectionView on top, so

306
00:15:50,450 --> 00:15:52,583
I really just wanna grab this handle and

307
00:15:52,652 --> 00:15:55,819
pull it down to make room. But you cannot do that. Because

308
00:15:55,888 --> 00:15:58,823
you have constraints that are holding that thing to the top.

309
00:15:58,892 --> 00:16:00,391
And if you just start dragging it down,

310
00:16:00,460 --> 00:16:01,959
all your constraints are gonna turn red and

311
00:16:02,028 --> 00:16:02,960
yellow Things like this can be terrible.

312
00:16:03,029 --> 00:16:06,296
So if you really want to pull that down, you've gotta unhook

313
00:16:06,365 --> 00:16:09,766
it first. And really, this requires you go a little bit

314
00:16:09,835 --> 00:16:12,970
slower on your kind of editing to think ahead, am I going to

315
00:16:13,038 --> 00:16:16,140
have to unhook something? So we definitely have to unhook

316
00:16:16,209 --> 00:16:18,308
this top connection here of the drop zone

317
00:16:18,377 --> 00:16:20,844
to the top of the view, because we're gonna put

318
00:16:20,913 --> 00:16:23,581
a a collection view in between there, all right?

319
00:16:23,650 --> 00:16:27,584
So where is that connection to the top? I've got the drop

320
00:16:27,653 --> 00:16:30,721
zones collect, selected here in the outline, and

321
00:16:30,790 --> 00:16:35,125
here we got right here. Align top to the safe area, I'm just

322
00:16:35,194 --> 00:16:39,630
going to delete that. Now it's no longer hooked to the top.

323
00:16:39,699 --> 00:16:42,899
Now I can safely drag it down to make room for my collection

324
00:16:42,968 --> 00:16:45,803
view. And eventually I'm gonna put my collection view in and

325
00:16:45,872 --> 00:16:48,172
put a constraint that hooks the collection view in.

326
00:16:48,241 --> 00:16:52,409
All right, so how do we get a collection view? We just go

327
00:16:52,478 --> 00:16:55,379
down here and search for collection view, this is the,

328
00:16:55,448 --> 00:16:58,316
you know, pre-packaged MVC but I already got my MVC so

329
00:16:58,384 --> 00:17:01,052
I just want this one which is the collection view.

330
00:17:01,121 --> 00:17:04,788
We're gonna drop it in here. Let's go ahead and

331
00:17:04,857 --> 00:17:08,358
do its constraints. So I want it hooked right up to the top,

332
00:17:08,427 --> 00:17:11,762
I want it right to the left, right to the right.

333
00:17:11,830 --> 00:17:14,331
I actually want some standard spacing here to the bottom

334
00:17:14,400 --> 00:17:17,134
which I'm hoping it's going to say it's nearest neighbor is

335
00:17:17,202 --> 00:17:17,902
that drop zone.

336
00:17:17,970 --> 00:17:21,138
So let's try that. Looks like it worked, but

337
00:17:21,207 --> 00:17:24,408
what happened to my collection view? It disappeared. Why did

338
00:17:24,477 --> 00:17:27,678
my collection disappear? Let's look at its constraints.

339
00:17:29,915 --> 00:17:32,783
Here's its constraints. It's got the trailing, leading,

340
00:17:32,852 --> 00:17:36,520
bottom space to the drop zone, top to the safe area. What's

341
00:17:36,588 --> 00:17:39,957
the height of the collection view? Not specified, right?

342
00:17:40,026 --> 00:17:42,526
It's like zero. We never set the height.

343
00:17:42,595 --> 00:17:44,395
Now, what do we want the height to be?

344
00:17:44,463 --> 00:17:47,731
Actually we want the height to kind of be big enough to

345
00:17:47,800 --> 00:17:51,202
include those emoji and want those emoji to be whatever

346
00:17:51,271 --> 00:17:54,538
size the user's accessibility font is, right?

347
00:17:54,607 --> 00:17:56,274
That's what we really want. I don't have time to show you

348
00:17:56,342 --> 00:17:58,776
that but you know what you need to know to make that work

349
00:17:58,844 --> 00:18:01,378
because what we would do is create the height constraint

350
00:18:01,447 --> 00:18:04,314
in here. And then wire it up into our code and

351
00:18:04,383 --> 00:18:07,784
then we would set it based on the size that is necessary to

352
00:18:07,853 --> 00:18:10,287
fit the font, the accessibility font.

353
00:18:10,356 --> 00:18:13,557
But in this case what we're going to do is we're just

354
00:18:13,626 --> 00:18:15,826
going to fix its height. So I'm gonna go here.

355
00:18:15,895 --> 00:18:19,696
I've got the collection view selected. Oops wrong one.

356
00:18:19,765 --> 00:18:20,764
I'm gonna go here and fix its height.

357
00:18:20,833 --> 00:18:25,536
I'm gonna fix its height to be about 80 points high or

358
00:18:25,604 --> 00:18:28,505
so. 80 points is enough to make an emoji that kinda fits

359
00:18:28,574 --> 00:18:31,242
under your finger nicely and it's a good default size.

360
00:18:31,310 --> 00:18:36,113
So there's my collection view reappearing. Another

361
00:18:36,182 --> 00:18:39,316
thing we wanna do is set the size of these cells. Cuz we're

362
00:18:39,385 --> 00:18:41,251
gonna have a bunch of cells in our collection view,

363
00:18:41,320 --> 00:18:43,487
that's what a collection view is a bunch of cells in there.

364
00:18:43,555 --> 00:18:45,623
Remember from the food demos, all the food things?

365
00:18:45,691 --> 00:18:48,325
So you do that by inspecting the collection

366
00:18:48,394 --> 00:18:51,762
view under the size inspector over here. And you can see our

367
00:18:51,830 --> 00:18:54,531
cell size is 50 by 50, I'm gonna make it a little bigger.

368
00:18:54,600 --> 00:18:56,066
Let's go whoops, 80 by 80.

369
00:18:56,135 --> 00:18:59,737
And there's one other thing we wanna do about this collection

370
00:18:59,806 --> 00:19:02,973
view, is that we want it be scrollable horizontally.

371
00:19:03,041 --> 00:19:06,510
We want all those emojis to be falling off to the right,

372
00:19:06,579 --> 00:19:09,580
or to the side of the screen. We don't want them

373
00:19:09,648 --> 00:19:12,282
going down, so I'm gonna go back to the normal inspector

374
00:19:12,351 --> 00:19:14,952
collection view and make sure that my scroll direction is

375
00:19:15,021 --> 00:19:17,954
horizontal. So that it's scrolling horizontally.

376
00:19:18,023 --> 00:19:18,723
In collection view,

377
00:19:18,791 --> 00:19:20,291
you can only scroll in one of two directions,

378
00:19:20,359 --> 00:19:21,625
either vertically or horizontally.

379
00:19:21,693 --> 00:19:25,296
It doesn't do them both. The other thing about collection

380
00:19:25,365 --> 00:19:28,366
view, very important to understand, never make your

381
00:19:28,434 --> 00:19:31,201
cell size bigger than the non-scrollable width or

382
00:19:31,270 --> 00:19:34,939
height of the collection view. Collection view does not

383
00:19:35,007 --> 00:19:37,674
know how to have cells that are bigger than will fit in

384
00:19:37,743 --> 00:19:41,412
the direction it doesn't scroll. So you have to ensure,

385
00:19:41,480 --> 00:19:43,948
like in your homework you're gonna be making your

386
00:19:44,016 --> 00:19:46,483
cells different sizes, make sure you make it bigger than

387
00:19:46,552 --> 00:19:48,319
the width of the collection view.

388
00:19:48,387 --> 00:19:52,089
It doesn't really know how to deal with that. So this is

389
00:19:52,158 --> 00:19:55,492
nice now. These cells are just gonna have an emoji in them,

390
00:19:55,561 --> 00:19:59,463
remember? So let's go ahead and put a UI label in there so

391
00:19:59,532 --> 00:20:04,401
we can put our emoji in there. We'll just put this in here.

392
00:20:04,470 --> 00:20:07,838
Let's go ahead and just do, how about vertically and

393
00:20:07,906 --> 00:20:11,509
horizontally centered? Let's make the font a lot bigger,

394
00:20:11,578 --> 00:20:13,910
although I'm gonna set the font in code,

395
00:20:13,979 --> 00:20:17,648
again because I want it to be accessibility friendly there,

396
00:20:17,717 --> 00:20:20,650
but just so that it looks nice in my storyboard,

397
00:20:20,719 --> 00:20:22,286
I'll set it to 64 points,

398
00:20:22,354 --> 00:20:25,222
nice and big. And then I'm also going to put just a nice

399
00:20:25,291 --> 00:20:27,057
little smiley face or something in there.

400
00:20:27,126 --> 00:20:29,961
So, again, this is mostly, I'm doing this just so

401
00:20:30,029 --> 00:20:32,530
it looks nice in the storyboard, right here.

402
00:20:32,598 --> 00:20:35,933
So, I can kind of imagine what my thing is gonna,

403
00:20:36,001 --> 00:20:40,237
look like right here. Now, let's go to our code and start

404
00:20:40,306 --> 00:20:43,607
loading up this collection view with some emoji.

405
00:20:43,676 --> 00:20:47,143
All right, let's go over here. Let's bring up our code,

406
00:20:47,212 --> 00:20:50,481
we have to create an outlet to it of course. So let's go down

407
00:20:50,550 --> 00:20:52,483
there, right before all our drop business and

408
00:20:52,552 --> 00:20:54,417
we'll put our collection view stuff here.

409
00:20:54,486 --> 00:20:57,921
So I'm just gonna Control drag from the collection view into

410
00:20:57,990 --> 00:21:01,525
my code, make sure that it's in the collection view, it is.

411
00:21:01,594 --> 00:21:06,797
I'm gonna call it, I'll call it emojiCollectionView.

412
00:21:06,865 --> 00:21:08,766
So there's my emojiCollectionView.

413
00:21:08,835 --> 00:21:12,603
Now whenever you wire up a collection view like this,

414
00:21:12,672 --> 00:21:14,905
where you've dropped it in to a MVC,

415
00:21:14,974 --> 00:21:19,643
the very first thing you're gonna wanna do. All the time,

416
00:21:19,712 --> 00:21:24,948
is go and do didSet. And set you new collection view's

417
00:21:25,017 --> 00:21:30,154
data source, To be yourself and

418
00:21:30,223 --> 00:21:35,893
the emoji collection view's delegate to be yourself.

419
00:21:35,962 --> 00:21:38,462
Now if you do that prepackaged collection view thing where

420
00:21:38,531 --> 00:21:40,397
you get the whole MVC it will do this for you.

421
00:21:40,466 --> 00:21:42,065
But if you drag your own collection view in

422
00:21:42,134 --> 00:21:44,635
your definitely wanna do this, and of course it's complaining

423
00:21:44,703 --> 00:21:46,937
that I don't implement those protocols so we'll go up to

424
00:21:47,005 --> 00:21:52,042
the top and say. UICollectionViewDataSource,

425
00:21:52,110 --> 00:21:56,847
and UICollectionViewDelegate. And

426
00:21:56,916 --> 00:22:00,717
by the way, while you're here you probably also want to do

427
00:22:00,786 --> 00:22:04,488
UICollectionViewDelegateFlowL- ayout.

428
00:22:04,557 --> 00:22:06,423
This one you automatically get to be if you're

429
00:22:06,492 --> 00:22:08,826
the CollectionViewDelegate. This is the delegate

430
00:22:08,894 --> 00:22:12,062
of the thing that does all that text-like flowing layout.

431
00:22:12,131 --> 00:22:13,597
Remember the collection's layout is completely

432
00:22:13,666 --> 00:22:16,600
configurable? But this is the default one so I usually throw

433
00:22:16,668 --> 00:22:19,336
this in here, too. It just helps with escape completion,

434
00:22:19,404 --> 00:22:22,039
and all those kinda things. Now it's complaining because

435
00:22:22,107 --> 00:22:24,274
I don't implement one of these protocols. Let's find out

436
00:22:24,343 --> 00:22:27,911
which one. It's the one UICollectionViewDataSource.

437
00:22:27,980 --> 00:22:30,448
I don't implement that. It has required methods in its

438
00:22:30,516 --> 00:22:32,916
protocol, even though it's an Objective-C protocol.

439
00:22:32,985 --> 00:22:34,851
Let's see what they are. I'm gonna hit Fix and

440
00:22:34,920 --> 00:22:37,688
it added them for me right at the top of my file.

441
00:22:37,757 --> 00:22:40,757
I'm gonna move them, but the two are numberOfItemsInSection

442
00:22:40,826 --> 00:22:41,825
and cellForItemAt.

443
00:22:41,894 --> 00:22:44,662
Of course, those are two of the three we talked about.

444
00:22:44,730 --> 00:22:46,329
The other was number of sections.

445
00:22:46,398 --> 00:22:48,832
We don't have to implement that because it defaults to

446
00:22:48,901 --> 00:22:50,968
one. That's true for tableView, true for

447
00:22:51,036 --> 00:22:53,703
collectionView as well. So I'm gonna move these back down

448
00:22:53,772 --> 00:22:56,774
here where the rest of my collectionView stuff is, and

449
00:22:56,842 --> 00:23:00,644
we're gonna implement those. So we need a model for

450
00:23:00,712 --> 00:23:05,882
this part of our MVC. And I have this as my model, which

451
00:23:05,951 --> 00:23:10,855
is an array of emojis strings so I actually took a string

452
00:23:10,923 --> 00:23:16,059
of emojis and I mapped it to an array of strings.

453
00:23:16,128 --> 00:23:17,727
Hopefully everybody's getting comfortable with map.

454
00:23:17,796 --> 00:23:21,164
Map just takes a collection and turns it into an array

455
00:23:21,233 --> 00:23:25,335
where it executes this closure on each of the items. So

456
00:23:25,404 --> 00:23:28,705
now emojis if you look at its type is array of string, and

457
00:23:28,774 --> 00:23:30,273
each string is one emoji.

458
00:23:30,342 --> 00:23:35,111
Okay, so how many items do I have in my only section? Well,

459
00:23:35,180 --> 00:23:39,049
of course, it's the number of emojis. That's how many items

460
00:23:39,118 --> 00:23:42,619
there are in the collection view. I only have one section,

461
00:23:42,688 --> 00:23:46,456
and that brings us down here to the all-important sell for

462
00:23:46,525 --> 00:23:48,492
item at where we have to let some

463
00:23:48,561 --> 00:23:51,294
cell = collectionView.dequeueReusabl-

464
00:23:51,363 --> 00:23:55,165
eCell with ReuseIdentifier, right? And we're gonna have to

465
00:23:55,234 --> 00:23:59,402
specify something. I'll call it an EmojiCell, and for

466
00:23:59,471 --> 00:24:03,807
index path. There that's the index path we're creating

467
00:24:03,875 --> 00:24:06,310
the cell for. And we're gonna use the return cell.

468
00:24:08,247 --> 00:24:11,915
Now we need to load up this emoji into that cell.

469
00:24:11,983 --> 00:24:14,885
And for collection view, all the cells are custom cells.

470
00:24:14,953 --> 00:24:17,787
You have to have a subclass of, if you're gonna have any

471
00:24:17,856 --> 00:24:20,457
outlets to anything, you have to have a subclass.

472
00:24:20,526 --> 00:24:24,027
Because we couldn't have an outlook in our collection

473
00:24:24,096 --> 00:24:26,430
view itself that pointed to the emoji

474
00:24:26,499 --> 00:24:29,499
because there could be a hundred cells. And so

475
00:24:29,568 --> 00:24:32,969
we just can't do it, and so instead, we have to go and

476
00:24:33,038 --> 00:24:36,807
create a new file, which is a subclass of UI collection view

477
00:24:36,875 --> 00:24:39,143
cell. This one is actually on the right one.

478
00:24:39,211 --> 00:24:42,846
I'm gonna call this an emoji collection view cell, right?

479
00:24:42,915 --> 00:24:47,251
Subclass of UI collection view cell. So it was created here,

480
00:24:47,319 --> 00:24:50,955
let's put it in the right place. Okay, here it is,

481
00:24:51,023 --> 00:24:54,959
right here. I'm gonna mutely go to my story board,

482
00:24:55,928 --> 00:24:56,994
where's my story board?

483
00:24:57,063 --> 00:25:00,865
Here it is, and I'm going to inspect this cell. And

484
00:25:02,300 --> 00:25:07,070
I'm gonna set its reuse identifier to emoji cell,

485
00:25:07,139 --> 00:25:09,472
that was the thing I dequeue, whatever,

486
00:25:09,541 --> 00:25:10,874
do reusable cell with, and

487
00:25:10,943 --> 00:25:14,411
I'm gonna set its identity to be an emoji collectivity cell.

488
00:25:14,479 --> 00:25:19,650
All right? So this cell is of type my subclass, and

489
00:25:19,718 --> 00:25:23,854
its identifier of this cell, didn't I type that in there?

490
00:25:23,923 --> 00:25:27,491
Emoji cell? Emoji cell, that's its type.

491
00:25:30,362 --> 00:25:33,530
All right, so now that we have this, let's go ahead and wire

492
00:25:33,599 --> 00:25:37,000
up this little label where we're gonna put the emoji to

493
00:25:37,068 --> 00:25:40,704
that custom cell. Now, a lot of times, Interface Builder

494
00:25:40,773 --> 00:25:42,940
will not get this right, but it did this time.

495
00:25:43,008 --> 00:25:44,808
Where if you go to automatic mode,

496
00:25:44,877 --> 00:25:48,211
it kinda realizes that that thing that you have selected,

497
00:25:48,280 --> 00:25:50,280
could be hooked up to the controller,

498
00:25:50,349 --> 00:25:53,417
if there were just one of them or more likely, it's hooked up

499
00:25:53,485 --> 00:25:57,454
to this custom cell. So you don't have to use automatic,

500
00:25:57,523 --> 00:25:59,756
you could use manual and go find the file. But

501
00:25:59,825 --> 00:26:04,394
automatic sometimes will work, sometimes not. So here we go.

502
00:26:04,463 --> 00:26:07,264
We've got this label. I'm just going to create an outlet to

503
00:26:07,332 --> 00:26:10,901
it in my custom subclass, so here we go. And

504
00:26:10,970 --> 00:26:14,738
then there into UI label, I'll call it Label.

505
00:26:14,807 --> 00:26:17,974
It's this cell's label and that's it. Now,

506
00:26:18,043 --> 00:26:21,978
I'm not putting any other code in here, but I could. It would

507
00:26:22,047 --> 00:26:25,149
no be not unreasonable to put a bunch of logic in your cell.

508
00:26:25,217 --> 00:26:28,551
If you have logic that is per cell. Then putting it here

509
00:26:28,620 --> 00:26:31,288
could make a lot of sense. Just because this one

510
00:26:31,356 --> 00:26:33,590
only has an outlet, it's a very, very simple cell,

511
00:26:33,659 --> 00:26:36,126
doesn't mean you couldn't put other code in there. I don't

512
00:26:36,194 --> 00:26:39,296
want you to get the idea these are only outlet bags, they

513
00:26:39,365 --> 00:26:41,999
actually could have logic in them if it made sense as well.

514
00:26:42,067 --> 00:26:44,200
Probably will make sense in your homework test logic in

515
00:26:44,269 --> 00:26:48,072
your cells. All right? So we've got this cell. So

516
00:26:48,140 --> 00:26:53,109
let's go back now to our place where we're creating

517
00:26:53,178 --> 00:26:56,814
this cell. And we've got this dequeued reusable cell. For

518
00:26:56,882 --> 00:26:59,683
us to access the outlets of it, we have to cast it.

519
00:26:59,752 --> 00:27:04,020
We have to say, if let emojiCell equal the cell,

520
00:27:04,089 --> 00:27:08,859
as our custom subclass, EmojiCollectionViewCell.

521
00:27:08,928 --> 00:27:12,662
And if we can successfully cast it, then we can tell

522
00:27:12,731 --> 00:27:17,267
the emojiCell label, okay, to set its attributed text equal

523
00:27:17,336 --> 00:27:21,504
to something, text, so what is that something?

524
00:27:21,573 --> 00:27:24,775
Well, that something is gonna be taking one of these,

525
00:27:24,844 --> 00:27:27,277
whatever thing is at this index path, and

526
00:27:27,346 --> 00:27:30,246
set its font cuz I wanna control its font in code and

527
00:27:30,315 --> 00:27:33,250
then put it in there. So I'm just gonna let text equals

528
00:27:33,318 --> 00:27:37,887
NSAttributedString. The string of it is going to be

529
00:27:37,956 --> 00:27:43,894
the emojis sub indexPath dot item, that tells us which

530
00:27:43,963 --> 00:27:47,264
emoji we're talking about here. And the attributes,

531
00:27:47,332 --> 00:27:49,699
I'm going to just set the attributes of the font,

532
00:27:49,768 --> 00:27:52,436
that's the only attribute I'm gonna set. I'm gonna set it to

533
00:27:52,505 --> 00:27:54,571
this var font, which I'm gonna create up here,

534
00:27:54,639 --> 00:27:58,208
private var font, which is gonna be a UIFont. And

535
00:27:58,277 --> 00:28:01,477
I'm going to do the whole accessibility thing here.

536
00:28:01,546 --> 00:28:04,981
Which is, I have to use UIFontMetrics, all right? And

537
00:28:05,050 --> 00:28:10,154
I want the font metrics for the text style, dot body. And

538
00:28:10,222 --> 00:28:15,124
I'm going to scale the font. Scale font for,

539
00:28:15,193 --> 00:28:19,496
and the font I'm gonna use is UI font,

540
00:28:19,564 --> 00:28:25,669
preferred font body, but I'm going to scale it up.

541
00:28:29,007 --> 00:28:32,275
I'll say it with size, it's a little easier,

542
00:28:32,344 --> 00:28:36,279
with size 64. So I want 64 point, but I'm gonna have it

543
00:28:36,348 --> 00:28:39,783
scaled by whatever the accessibility thing is, right?

544
00:28:39,851 --> 00:28:42,619
So if your accessibility is in the middle, size of font,

545
00:28:42,687 --> 00:28:43,554
I'm gonna do 64 to make it bigger,

546
00:28:43,622 --> 00:28:45,121
it'll be bigger in 64 and smaller.

547
00:28:45,190 --> 00:28:48,191
Now, this is not going to work well right now because I don't

548
00:28:48,259 --> 00:28:51,361
change the collection view's size. So if I set this big,

549
00:28:51,430 --> 00:28:53,963
it's gonna be cut off, and if I set it really small,

550
00:28:54,032 --> 00:28:56,733
the collection view won't shrink up to kinda hold it,

551
00:28:56,802 --> 00:28:59,436
do you see what I'm saying? Do you see what I mean by that?

552
00:28:59,505 --> 00:29:01,137
So we'd have to add that later, but again,

553
00:29:01,206 --> 00:29:02,405
I don't wanna show you hooking up

554
00:29:02,474 --> 00:29:05,942
to a layout constraint twice. So that's it. This is

555
00:29:06,011 --> 00:29:08,345
all we need to do to get our collection view loaded up.

556
00:29:08,414 --> 00:29:11,314
We implemented those data source methods

557
00:29:11,383 --> 00:29:12,982
that are required, right? Number of sections,

558
00:29:13,051 --> 00:29:15,952
number of rows, items in section and then the cell, for

559
00:29:16,021 --> 00:29:20,623
a certain one. And so let's go over here, so you can see. And

560
00:29:20,692 --> 00:29:24,928
sure enough, along the top, we can see right there that we

561
00:29:24,996 --> 00:29:29,399
have our emojis. It's really nice scrolls. The collection

562
00:29:29,467 --> 00:29:31,835
view is a scroll view, so it's scrolling back and forth,

563
00:29:31,904 --> 00:29:34,570
it's very nice. Now, the next thing we wanna do

564
00:29:34,639 --> 00:29:37,874
is be able to pick these things up and drop them in our

565
00:29:37,943 --> 00:29:41,478
nice background, like if this is our background here,

566
00:29:41,547 --> 00:29:43,480
we wanna pick these things up.

567
00:29:43,549 --> 00:29:45,682
Remember, I dropped the bees in there, the apple, or

568
00:29:45,751 --> 00:29:49,386
whatever. We wanna do that. So how are we gonna do drag and

569
00:29:49,454 --> 00:29:51,855
drop? Well, we haven't done drag yet, we only did drop,

570
00:29:51,924 --> 00:29:53,856
the only thing we've done is dropping in there.

571
00:29:53,925 --> 00:29:56,893
So I'm gonna show you drag in collection view's world, which

572
00:29:56,962 --> 00:29:59,763
looks almost exactly as same as non collection view world.

573
00:29:59,832 --> 00:30:01,598
The only difference between drag in collection

574
00:30:01,667 --> 00:30:02,732
view world is,

575
00:30:02,801 --> 00:30:05,769
collection view helps you out with which index path are you

576
00:30:05,837 --> 00:30:09,306
dragging. It knows where your finger is, and it's like,

577
00:30:09,374 --> 00:30:12,242
you're dragging that index path and you're dropping it at

578
00:30:12,310 --> 00:30:15,045
that index path, so really just providing index path but

579
00:30:15,113 --> 00:30:18,148
otherwise, it's pretty much exactly the same. All right,

580
00:30:18,217 --> 00:30:20,984
any time you wanna do dragging in a collection view,

581
00:30:21,053 --> 00:30:23,953
the first thing you're always gonna do, just like you

582
00:30:24,022 --> 00:30:26,790
do a drop interaction is the first time you do drag and

583
00:30:26,859 --> 00:30:29,126
drop with a view, with a collection view,

584
00:30:29,194 --> 00:30:31,694
you're gonna set your collection view's drag

585
00:30:31,763 --> 00:30:34,431
delegate to be your self. And then, of course, that's,

586
00:30:34,499 --> 00:30:36,132
you're gonna go up here and you're gonna say, yes,

587
00:30:36,201 --> 00:30:40,970
I implement the UI collection view drag delegate. And

588
00:30:41,039 --> 00:30:44,308
as soon as you do that, it's gonna complain, no, you don't,

589
00:30:44,376 --> 00:30:46,943
and you're gonna click on this and it's gonna say,

590
00:30:47,012 --> 00:30:49,012
do you want me to add the protocol stuff?

591
00:30:49,080 --> 00:30:51,815
And you're gonna say, yeah, sure, what do I need to do?

592
00:30:51,884 --> 00:30:55,018
And it's gonna say, you have to implement items for

593
00:30:55,087 --> 00:30:58,555
beginning. If you remember from the lecture, items for

594
00:30:58,623 --> 00:31:01,491
beginning is the thing that tells the drag system,

595
00:31:01,559 --> 00:31:05,028
here's what we're dragging. So we have to provide these

596
00:31:05,097 --> 00:31:08,665
drag items to drag. So let's do that, let's move this down

597
00:31:08,734 --> 00:31:13,536
again. And in here, so what're,

598
00:31:13,605 --> 00:31:15,739
how are we gonna provide our items for beginning? Now,

599
00:31:15,808 --> 00:31:20,811
notice the collection view one has add index path, so

600
00:31:20,879 --> 00:31:25,716
it tells us which thing, which IndexPath we are dragging

601
00:31:25,784 --> 00:31:28,185
from, which is really, really convenient for us. So

602
00:31:28,253 --> 00:31:30,887
I'm gonna create, I'm gonna call a little function here.

603
00:31:30,956 --> 00:31:35,758
I'm just gonna return dragItems at indexPath.

604
00:31:35,827 --> 00:31:37,727
This is a function I'm gonna have to write,

605
00:31:37,796 --> 00:31:43,032
private func dragItems at indexPath,

606
00:31:43,101 --> 00:31:46,636
which is an indexPath, which is just the section, an item.

607
00:31:46,705 --> 00:31:50,874
And it returns this array of UIDragItem,

608
00:31:50,943 --> 00:31:53,476
those are the items that we have to return. So

609
00:31:53,545 --> 00:31:58,381
this all we have to do to get started with drag. And for us,

610
00:31:58,449 --> 00:32:00,984
again, it's really, really easy to implement this because

611
00:32:01,053 --> 00:32:04,220
what we're going to drag Is NSAttributedString,

612
00:32:04,289 --> 00:32:06,256
that's what we're gonna drag,

613
00:32:06,325 --> 00:32:08,858
that's an item provider just like NSURL,

614
00:32:08,927 --> 00:32:11,795
UIImage, NSAttributedString. Also, NSString we

615
00:32:11,863 --> 00:32:14,497
could, do but we're gonna do NSAttributedString, gives us

616
00:32:14,566 --> 00:32:17,600
a little more flexibility for what we're dragging around. So

617
00:32:17,669 --> 00:32:19,169
that's going to be our item provider.

618
00:32:19,237 --> 00:32:21,971
So all we have to do is get the attributedString we want

619
00:32:22,040 --> 00:32:24,274
to drag and then return it in the drag item and

620
00:32:24,342 --> 00:32:28,211
that's it. So how do we get that attributedString?

621
00:32:28,280 --> 00:32:31,681
So I'm gonna say, if I can let the attributedString =,

622
00:32:31,749 --> 00:32:36,652
and what I'm gonna have to do is look at this indexPath,

623
00:32:36,721 --> 00:32:40,690
find my custom cell, look at its outlet, get its

624
00:32:40,758 --> 00:32:43,793
attributedText. Everybody cool with that? That's how I'm

625
00:32:43,861 --> 00:32:46,462
gonna do this. So let's do this all in one line of code,

626
00:32:46,531 --> 00:32:51,668
right? So I'm going to first ask my CollectionView for

627
00:32:51,737 --> 00:32:56,673
the cell for this item at indexPath.

628
00:32:56,742 --> 00:33:01,144
Now this is like TableView's cell for

629
00:33:01,212 --> 00:33:03,647
row at indexPath. Thing, this only works for

630
00:33:03,715 --> 00:33:06,216
visible cells but, of course, that's going to work here.

631
00:33:06,285 --> 00:33:09,886
I'm dragging this thing, it's got to be visible, right? So

632
00:33:09,954 --> 00:33:13,122
I've got this cell that we're dragging from right here.

633
00:33:13,191 --> 00:33:19,695
Now I'm going to as it to be my custom subclass.

634
00:33:19,764 --> 00:33:23,333
And if that works, hopefully it will, I'm gonna get its

635
00:33:23,402 --> 00:33:28,971
outlet, and I'm gonna grab its attributedText.

636
00:33:29,040 --> 00:33:32,976
So if all that works, I just grabbed the emoji at that

637
00:33:33,045 --> 00:33:35,578
indexPath. So now that I have the emoji,

638
00:33:35,647 --> 00:33:38,481
all I need to do is create one of these UI drag items,

639
00:33:38,550 --> 00:33:41,584
using that attributedString as the provider, right?

640
00:33:41,653 --> 00:33:44,988
The thing that provides the data. So

641
00:33:45,056 --> 00:33:50,326
I can do that by saying let dragItem = UIDragItem.

642
00:33:50,395 --> 00:33:53,863
And the drag item creator, you can see it right there,

643
00:33:53,932 --> 00:33:58,368
takes an ItemProvider. And we can create an ItemProvider for

644
00:33:58,437 --> 00:34:01,570
an attributedString by saying ItemProvider.

645
00:34:01,639 --> 00:34:04,407
And it has a few constructors but a really nice one is this

646
00:34:04,476 --> 00:34:06,710
one object where you just give it an object and

647
00:34:06,778 --> 00:34:08,878
it knows how to be provider like a UIImage or

648
00:34:08,947 --> 00:34:12,115
NSAttributedString. So that's what I'm gonna do.

649
00:34:12,183 --> 00:34:16,018
And I'm gonna give it this attributedString that I found

650
00:34:16,087 --> 00:34:19,389
in my cell. And that's it. This creates the drag item,

651
00:34:19,457 --> 00:34:22,292
and now we just return this. We return an array of them,

652
00:34:22,360 --> 00:34:24,694
but we're only dragging this one thing. But

653
00:34:24,762 --> 00:34:26,729
before I return it, I'm gonna do one other thing,

654
00:34:26,798 --> 00:34:30,433
I'm gonna set the drag item's local object

655
00:34:30,502 --> 00:34:33,836
to be that attributedString. Now what does this mean? Well,

656
00:34:33,905 --> 00:34:36,739
if your drag is local within your app, you don't have to go

657
00:34:36,808 --> 00:34:39,742
through all that itemProvider stuff, right? The asynchronous

658
00:34:39,811 --> 00:34:41,711
getting the data from that, remember all the stuff we

659
00:34:41,779 --> 00:34:43,779
had to do in the drop? You don't have to do any of that,

660
00:34:43,848 --> 00:34:45,015
you just grab the local object.

661
00:34:45,083 --> 00:34:47,016
So this is a way of like short-circuiting all that,

662
00:34:47,085 --> 00:34:49,518
if it's a local drag. But it's gonna work to actually drag

663
00:34:49,587 --> 00:34:52,088
out of our CollectionView to other apps, but when we're

664
00:34:52,157 --> 00:34:54,591
dragging locally, we're going to be able to use this.

665
00:34:54,659 --> 00:34:57,860
So here I'm just gonna return an array of just this one

666
00:34:57,929 --> 00:35:00,397
drag item. By the way, if I couldn't

667
00:35:00,465 --> 00:35:03,433
get the attributedString out of that cell for

668
00:35:03,502 --> 00:35:07,737
some reason. Then I'm just gonna return empty, so no,

669
00:35:07,806 --> 00:35:10,573
don't do any drag then. So

670
00:35:10,642 --> 00:35:14,143
it's gonna know from this not to begin a drag. Now,

671
00:35:14,212 --> 00:35:16,412
remember I also told you that once you start to drag,

672
00:35:16,481 --> 00:35:19,281
you can add more items by just tapping on them. So you could

673
00:35:19,350 --> 00:35:22,051
be dragging multiple things at once. That's easy to implement

674
00:35:22,120 --> 00:35:25,989
as well. Just like we have this items for beginning,

675
00:35:26,057 --> 00:35:30,560
we have another one called itemsforaddingto, which looks

676
00:35:30,628 --> 00:35:33,796
exactly the same as this. And we're gonna return exactly

677
00:35:33,865 --> 00:35:36,766
the same thing. Because it's giving us the indexPath

678
00:35:36,835 --> 00:35:38,935
that someone tapped on while I was dragging and

679
00:35:39,003 --> 00:35:41,404
I'm just going to get the emoji out of it and return it,

680
00:35:41,472 --> 00:35:43,839
and this is all that's required to do the dragging.

681
00:35:43,908 --> 00:35:49,078
Watch this. I can drag just from that.

682
00:35:49,147 --> 00:35:53,383
Watch, here's the bee hold down and drag. And

683
00:35:53,452 --> 00:35:57,621
the thing about this is if I'm dragging, I can't drop in my

684
00:35:57,689 --> 00:35:59,889
CollectionView because I haven't implemented drop.

685
00:35:59,958 --> 00:36:02,592
But I can drop other places. I'm going to go over here and

686
00:36:02,660 --> 00:36:06,329
just drop this bee in the Google search bar.

687
00:36:06,398 --> 00:36:10,734
And it searched for bee, believe it or not. So that's

688
00:36:10,802 --> 00:36:13,302
pretty cool. So I got dragged up working to other apps,

689
00:36:13,371 --> 00:36:15,037
so I hardly had to do anything in my app,

690
00:36:15,106 --> 00:36:17,206
just provide that attributedString and drag and

691
00:36:17,275 --> 00:36:18,708
drop. So that's one of the cool thing about drag and

692
00:36:18,776 --> 00:36:22,512
drop, it's so easy to get it going in both directions. So

693
00:36:22,580 --> 00:36:23,813
now, we want to drop.

694
00:36:23,881 --> 00:36:26,616
Now we want to be able to pick this bee up right here and

695
00:36:26,685 --> 00:36:30,220
drop it somewhere else in our CollectionView, so

696
00:36:30,289 --> 00:36:34,890
let's go do that. All right,

697
00:36:34,959 --> 00:36:39,229
so to do the drop part of this just like we did when we went

698
00:36:39,297 --> 00:36:42,532
to do the drag delegate here, we have to do

699
00:36:42,601 --> 00:36:46,402
emojiCollectionView.dropDele- gate = self.

700
00:36:46,471 --> 00:36:49,538
And up to the top, look at how many protocols we implement.

701
00:36:49,607 --> 00:36:52,708
Woo, we're cruising today. So let's do

702
00:36:52,777 --> 00:36:58,348
UICollectionViewDropDelegate and when we do that,

703
00:36:58,416 --> 00:37:01,017
wait for it to compile. It's gonna complain, it says you

704
00:37:01,086 --> 00:37:04,921
don't implement that protocol. Sure, fix. And it says, this

705
00:37:04,989 --> 00:37:09,192
one you must implement which is performDrop. Makes sense,

706
00:37:09,260 --> 00:37:12,662
right, you have to do perform drop or you're not even in

707
00:37:12,730 --> 00:37:15,798
doing drop. So let's copy and paste that one down here.

708
00:37:15,867 --> 00:37:20,636
I'm actually gonna implement perform drop last.

709
00:37:20,705 --> 00:37:23,305
Because there's a couple other ones that I need to implement,

710
00:37:23,374 --> 00:37:26,275
if you remember from what we did before? CanHandle and

711
00:37:26,344 --> 00:37:30,379
session moved, the session updated. Gotta, we can

712
00:37:30,448 --> 00:37:33,883
implement those two so that we get the right little plus sign

713
00:37:33,952 --> 00:37:36,052
when we're dragging it around. And so that we don't try and

714
00:37:36,121 --> 00:37:38,321
accept drops that we don't understand. So

715
00:37:38,389 --> 00:37:42,191
let's do the canHandle. Here's canHandle's collectionView

716
00:37:42,260 --> 00:37:46,263
version. Calling it canHandle looks almost exactly the same

717
00:37:46,331 --> 00:37:48,931
and it will be implemented exactly the same,

718
00:37:49,000 --> 00:37:52,535
which is I'm just gonna say if the session.canLoadObjects

719
00:37:52,603 --> 00:37:57,306
ofClass NSAttributedString, then I'm in. Cuz that's what

720
00:37:57,375 --> 00:38:00,643
my CollectionView can accept. This, by the way, means we're

721
00:38:00,712 --> 00:38:03,847
going to be able to drag just random strings into

722
00:38:03,915 --> 00:38:07,049
our CollectionView. Not just emoji, and first I was like,

723
00:38:07,118 --> 00:38:09,085
I don't want that but then I was like that's kind of cool.

724
00:38:09,154 --> 00:38:11,621
What if I wanted to put a label on something down in

725
00:38:11,690 --> 00:38:14,891
my picture. So I decided that's good, so I'm going to

726
00:38:14,959 --> 00:38:18,394
keep doing that. Then we have the sessiondidupdate,

727
00:38:18,463 --> 00:38:21,164
that we have to do, sessiondidupdate.

728
00:38:21,233 --> 00:38:24,700
Is that what is called? DidUpdate, is this the one?

729
00:38:24,769 --> 00:38:28,505
Yes, dropSessionDidUpdate and what do we need to do in here?

730
00:38:28,573 --> 00:38:31,407
This is where we need to return that drop proposal,

731
00:38:31,476 --> 00:38:34,744
either copy move or cancel, that's all we have to do. And

732
00:38:34,813 --> 00:38:38,647
you can see that here it's a UICollectionViewDropProposal.

733
00:38:38,716 --> 00:38:40,517
And why is that different? Well, let take a look at it.

734
00:38:40,585 --> 00:38:45,688
Let to return a UICollectionView,

735
00:38:45,757 --> 00:38:50,527
CollectionViewDropProposal.

736
00:38:50,595 --> 00:38:53,963
[BLANK AUDIO]. And look at the constructors.

737
00:38:54,031 --> 00:38:57,032
And there's another constructor, second one,

738
00:38:57,101 --> 00:39:00,736
look at that, intent UICollectionViewDropIntent.

739
00:39:00,805 --> 00:39:02,872
Well, the intent in a CollectionView says,

740
00:39:02,941 --> 00:39:06,142
are you dropping this into this cell or

741
00:39:06,211 --> 00:39:08,645
you want to add a cell? You see the difference?

742
00:39:08,713 --> 00:39:10,146
So that's what we have to specify.

743
00:39:10,215 --> 00:39:12,915
Now in our case, we always want to add a cell, so

744
00:39:12,984 --> 00:39:15,985
you'll see that our intent, let's, sorry,

745
00:39:16,054 --> 00:39:19,355
let's go back and pick that, we want this constructor.

746
00:39:19,424 --> 00:39:22,491
So the drop operation we're gonna do it first is copy,

747
00:39:22,560 --> 00:39:24,793
I'm gonna change that in a second. But

748
00:39:24,862 --> 00:39:28,865
then the drop intent we want is insertAt destination as

749
00:39:28,934 --> 00:39:33,903
opposed as to insert into the destination cell. Now,

750
00:39:33,972 --> 00:39:37,673
let's talk about copy. If I'm moving the bee around inside

751
00:39:37,742 --> 00:39:41,410
my collectionView, I'm not copying it. And I don't want

752
00:39:41,479 --> 00:39:43,512
the user to think that the bee is going to now be copied and

753
00:39:43,581 --> 00:39:46,382
there will be two bees. So it's move.

754
00:39:46,451 --> 00:39:52,188
So I have to know, somehow, that I am inside my own

755
00:39:52,256 --> 00:39:56,993
CollectionView. Okay, so how am I going to do that? Well,

756
00:39:57,061 --> 00:40:00,830
what I'm gonna do, what's this problem by the way?

757
00:40:00,899 --> 00:40:06,569
Just the indexPath. Yeah, so how I'm gonna do that?

758
00:40:06,638 --> 00:40:09,973
What I'm gonna do is when I start my drag up here in

759
00:40:10,041 --> 00:40:14,310
itemsForBeginning, I'm gonna set something in the session

760
00:40:14,379 --> 00:40:18,147
called the localContext, and this is in any type any.

761
00:40:18,215 --> 00:40:22,451
And I'm gonna set it to be my collectionView. So this is

762
00:40:22,520 --> 00:40:25,588
just something in the drag session that lets droppees,

763
00:40:25,656 --> 00:40:27,089
people who have dropped know, hey,

764
00:40:27,158 --> 00:40:28,357
this is a local drag, and

765
00:40:28,426 --> 00:40:30,059
here's the context of it. Well,

766
00:40:30,127 --> 00:40:31,894
since this drag is coming from the collectionView,

767
00:40:31,963 --> 00:40:34,597
I'm gonna use the collectionView as the context.

768
00:40:34,666 --> 00:40:37,533
All right, so now I can look at this local context down

769
00:40:37,602 --> 00:40:40,636
here to determine whether my drag variables should be

770
00:40:40,705 --> 00:40:45,474
a copy or a move. So I wanna say something like,

771
00:40:45,543 --> 00:40:50,947
let isSelf is myself or whatever, = the session,

772
00:40:52,783 --> 00:40:57,753
Session, it has a thing called a local drop DragSession.

773
00:40:57,822 --> 00:41:03,226
That's the session with discharged it, .localContext,

774
00:41:03,294 --> 00:41:07,597
oops, localContext. I really wanna say if that = my

775
00:41:07,665 --> 00:41:11,834
collectionView. This is what I'd like to do,

776
00:41:11,902 --> 00:41:16,038
but I cannot do this because this, what type is it?

777
00:41:16,107 --> 00:41:20,909
Any, and you cannot do == with any, because remember,

778
00:41:20,978 --> 00:41:24,647
the == is just using the equatable protocol, right? And

779
00:41:24,716 --> 00:41:27,616
any can't have any methods or vars, it has to be casted to

780
00:41:27,685 --> 00:41:29,886
something before you can do anything on it.

781
00:41:29,954 --> 00:41:31,854
So you certainly can have equitable for any,

782
00:41:31,923 --> 00:41:34,189
you can't have anything for any. So

783
00:41:34,258 --> 00:41:37,927
what I'm gonna do is take this little thing and

784
00:41:37,996 --> 00:41:41,697
attempt to cast it as a UICollectionView. I mean if

785
00:41:41,766 --> 00:41:44,200
it's not a UICollectionView it's not to be equal anyway so

786
00:41:44,269 --> 00:41:47,303
I might as well try it. Now if that's nil, we can do

787
00:41:47,372 --> 00:41:50,106
equatable with nil because optional can do equatable,

788
00:41:50,175 --> 00:41:53,976
all right? So now I know whether it's myself or not.

789
00:41:54,045 --> 00:41:57,547
So if it's myself, then I'm just gonna do move,

790
00:41:57,616 --> 00:42:00,283
otherwise I'm gonna do copy. Now I'm not,

791
00:42:00,352 --> 00:42:02,451
I haven't even implemented performed drop yet.

792
00:42:02,520 --> 00:42:05,855
But let's take a look at what the collectionView does just

793
00:42:05,924 --> 00:42:08,758
with this small amount of information from us.

794
00:42:14,465 --> 00:42:16,398
So here's my collectionView right here,

795
00:42:16,467 --> 00:42:19,502
now watch I'm gonna drag, click the coffee here.

796
00:42:19,570 --> 00:42:22,405
Look at the collectionView, look what it's doing,

797
00:42:22,473 --> 00:42:25,074
it's making space for me to drop in the new spot.

798
00:42:25,143 --> 00:42:29,111
Do you see that? I can still drop drag over here but

799
00:42:29,180 --> 00:42:31,948
now I'm dragging over here. And it knows that, I might

800
00:42:32,016 --> 00:42:35,518
be dropping there. And in fact if I drop, it doesn't work

801
00:42:35,587 --> 00:42:38,054
because I haven't implemented perform drop. But you

802
00:42:38,122 --> 00:42:40,723
could see the collectionView is already knowing what I'm

803
00:42:40,792 --> 00:42:43,493
doing. So collectionView really cool for

804
00:42:43,561 --> 00:42:46,562
doing drag and drop, it's so powerful. We hardly do any,

805
00:42:46,630 --> 00:42:50,666
we bring four lines of code, to get this far in the drop.

806
00:42:50,735 --> 00:42:53,135
So let's go back here and do perform drop.

807
00:42:53,204 --> 00:42:55,871
Well, our string of four lines that go is going to end,

808
00:42:55,940 --> 00:42:58,507
because perform drop is a little bit more complicated,

809
00:42:58,576 --> 00:43:02,244
not a lot. But when the perform drop happens, we have

810
00:43:02,313 --> 00:43:06,381
to update our model, which is our list of emojis and

811
00:43:06,450 --> 00:43:08,384
we have to update the collectionView,

812
00:43:08,453 --> 00:43:11,353
all right. Also there's two different kinds of drops here,

813
00:43:11,422 --> 00:43:14,957
there's the drop where it's coming from my collectionView.

814
00:43:15,026 --> 00:43:17,426
In which case, I have to drop in the menu place, and

815
00:43:17,495 --> 00:43:19,962
remove it from the old place because I'm moving. And then,

816
00:43:20,031 --> 00:43:23,165
there's a dropping it's coming from some other app.

817
00:43:23,234 --> 00:43:25,667
Which is allowed, watch this, let's go over here and

818
00:43:25,736 --> 00:43:28,136
select some text. >> [INAUDIBLE]

819
00:43:28,205 --> 00:43:28,705
>> Sorry you're not on the

820
00:43:28,773 --> 00:43:33,475
screen? Yeah, thank you. I will show you this, hide

821
00:43:33,544 --> 00:43:37,847
others. Okay, so I can go over here, and select this bee, and

822
00:43:37,915 --> 00:43:41,250
drag and drop it over here. And look, it's saying plus,

823
00:43:41,319 --> 00:43:45,054
and it's making room for it, and, I didn't do perform drop.

824
00:43:45,123 --> 00:43:47,055
So I have those two cases to do perform drop.

825
00:43:47,124 --> 00:43:50,192
The local case and Mac case so let's go do both those cases.

826
00:43:50,261 --> 00:43:51,661
We'll do the local case first.

827
00:43:53,164 --> 00:43:55,531
Now when we drop, collectionView has

828
00:43:55,599 --> 00:43:58,567
gives us this coordinator. This coordinator,

829
00:43:58,636 --> 00:44:01,070
I'm gonna make this a little easier to read because it's so

830
00:44:01,138 --> 00:44:04,373
long the name here, you can see there's two arguments to

831
00:44:04,442 --> 00:44:07,443
this thing. One, it's just the collectionView is involved and

832
00:44:07,512 --> 00:44:09,344
the one is this coordinator. Now this coordinator is gonna

833
00:44:09,413 --> 00:44:12,948
give us all the information we need to know to do this drop.

834
00:44:13,017 --> 00:44:15,551
The first thing it's gonna tell us,

835
00:44:15,620 --> 00:44:20,857
the most important thing is the destinationIndexPath.

836
00:44:20,925 --> 00:44:23,992
Okay, this is obviously the IndexPath where we're

837
00:44:24,061 --> 00:44:25,661
dropping. And

838
00:44:25,730 --> 00:44:30,866
that = to the coordinator, destinationIndexPath.

839
00:44:30,935 --> 00:44:33,769
But that might be nil, because you might be dragging it in

840
00:44:33,837 --> 00:44:35,972
a part of the collectionView that's not in between any of

841
00:44:36,040 --> 00:44:38,741
the existing cell so this could be nil. So if that

842
00:44:38,810 --> 00:44:43,045
happens, I'm just gonna create an IndexPath with item 0 and

843
00:44:43,114 --> 00:44:49,752
section 0. Okay, I could pick some other IndexPath but

844
00:44:49,821 --> 00:44:52,822
that's what I'm using my default. Okay, so

845
00:44:52,891 --> 00:44:56,625
now we know where we are dropping this drop. And now,

846
00:44:56,694 --> 00:44:58,428
it's just a matter of going through all

847
00:44:58,496 --> 00:45:03,332
these items in the coordinators items. These

848
00:45:03,401 --> 00:45:07,403
items are UICollectionViewDrop items and they have some very

849
00:45:07,471 --> 00:45:09,205
interesting pieces of information.

850
00:45:09,274 --> 00:45:13,876
For example, if I can let sourceIndexPath

851
00:45:13,945 --> 00:45:17,580
= this item's sourceIndexPath,

852
00:45:17,649 --> 00:45:21,817
then I know that this drag is coming from myself, and

853
00:45:21,885 --> 00:45:24,787
this is the sourceIndexPath of it. So I don't even need

854
00:45:24,855 --> 00:45:27,356
to look at the local context in this case to know this is

855
00:45:27,425 --> 00:45:28,791
coming from me, awesome.

856
00:45:28,860 --> 00:45:31,327
And I know now the source and the destination,

857
00:45:31,396 --> 00:45:34,197
this is trivial. All I need to do here is update my model

858
00:45:34,265 --> 00:45:36,499
to have the source going to the destination.

859
00:45:36,568 --> 00:45:39,134
And then update the collectionView to removed

860
00:45:39,203 --> 00:45:42,704
the one from the source and add it to the other one.

861
00:45:42,773 --> 00:45:46,008
So, this is probably the easiest case, this local case

862
00:45:46,077 --> 00:45:49,645
so let's do it. First, lets get the attributed string

863
00:45:49,714 --> 00:45:53,382
that we need so I can say, if I can let the attributed,

864
00:45:53,451 --> 00:45:56,118
this is the attributed string that we're dragging around.

865
00:45:56,187 --> 00:45:58,821
And luckily, I stashed it in that local object,

866
00:45:58,889 --> 00:46:03,492
remember that? So I'm gonna get the drag item, Item and

867
00:46:03,560 --> 00:46:07,929
get it local object. Remember, I can stashed it in local

868
00:46:07,998 --> 00:46:11,033
object up here when I made the drag item. I don't have to do

869
00:46:11,102 --> 00:46:14,169
any of that provider stuff to get it but I am going to have

870
00:46:14,238 --> 00:46:17,773
to say as NSAttributed string because its in any. So I will

871
00:46:17,842 --> 00:46:20,442
get to the attributed string which I'm going to be able to

872
00:46:20,511 --> 00:46:23,612
cuz I know I set that. Then I can put the attributed string

873
00:46:23,681 --> 00:46:27,950
in the new place and move the other one from the old place.

874
00:46:28,019 --> 00:46:31,720
So here we go, I'm gonna say emojis, this is my model,

875
00:46:31,789 --> 00:46:37,994
remove at the sourceIndexPath.item so

876
00:46:38,062 --> 00:46:42,198
remove where the thing came from. And emojis

877
00:46:42,266 --> 00:46:46,468
insert this attributedString that's being dragged around

878
00:46:46,537 --> 00:46:51,239
at the destinationIndex path.item. Voila, I've updated

879
00:46:51,308 --> 00:46:55,578
my model. Okay, I moved b from one place to the other.

880
00:46:55,646 --> 00:47:02,718
Okay, destinationIndexPath, Path.

881
00:47:02,786 --> 00:47:07,857
This one probably also up here, curly brace.

882
00:47:07,925 --> 00:47:14,029
Okay, so now I have to update the collectionView itself,

883
00:47:14,098 --> 00:47:18,334
which is no, that's not a curly brace.

884
00:47:18,402 --> 00:47:21,570
What'd I do up there? Item, yeah, thank you,

885
00:47:21,639 --> 00:47:24,773
item. All right, so now we've built the model.

886
00:47:24,842 --> 00:47:26,341
Now we're gonna update the collectionView.

887
00:47:26,410 --> 00:47:27,944
So that's collectionView.

888
00:47:28,012 --> 00:47:30,345
Now I could, one thing I don't wanna do here,

889
00:47:30,414 --> 00:47:33,749
very important to understand, don't reload data here.

890
00:47:33,818 --> 00:47:36,718
Do not reload data in the middle of a drag, because it

891
00:47:36,787 --> 00:47:40,222
resets the whole world, it's bad, don't do it. So instead,

892
00:47:40,291 --> 00:47:43,558
I gotta remove the rows and insert the rows separately. So

893
00:47:43,627 --> 00:47:48,831
I'm gonna delete the rows at the sourceIndexPath. And

894
00:47:48,900 --> 00:47:53,369
then I'm going to, Insert rows,

895
00:47:54,906 --> 00:47:58,173
InsertItems, sorry, I keep saying rows,

896
00:47:58,242 --> 00:48:03,712
use the table view at the destinationIndexPath. Now,

897
00:48:03,780 --> 00:48:07,649
This looks like it's.

898
00:48:07,718 --> 00:48:12,220
Insert items. So this looks like this would work fine but

899
00:48:12,289 --> 00:48:13,923
actually this would probably crash your program.

900
00:48:13,991 --> 00:48:18,894
And the reason for that is when you do multiple. This is

901
00:48:18,963 --> 00:48:22,898
indexpath.string. When you do multiple changes to your

902
00:48:22,967 --> 00:48:27,102
collection view, each step would normally have to have

903
00:48:27,171 --> 00:48:30,438
your model completely in sync which it wouldn't be because

904
00:48:30,507 --> 00:48:32,041
until I do both of these,

905
00:48:32,110 --> 00:48:34,109
the table won't be in sync with the model. But

906
00:48:34,178 --> 00:48:36,045
there's a really cool way to get around that,

907
00:48:36,114 --> 00:48:38,013
which is collectionView and

908
00:48:38,082 --> 00:48:41,883
tableView have this method called performBatchUpdates.

909
00:48:41,952 --> 00:48:45,887
And performBatchUpdates just has a closure. Inside that

910
00:48:45,956 --> 00:48:50,159
closure, you can put any number of these delete items,

911
00:48:50,228 --> 00:48:52,761
insert items, move items, whatever you wanna do. And

912
00:48:52,830 --> 00:48:55,464
it will do them all as one operation so

913
00:48:55,533 --> 00:48:57,733
that it never gets out of sync with your model.

914
00:48:57,802 --> 00:49:00,469
See what's happening there? It also has a nice completion

915
00:49:00,537 --> 00:49:02,605
thing here which we don't need in this case.

916
00:49:02,673 --> 00:49:04,739
But when it's all done with all the updates,

917
00:49:04,808 --> 00:49:06,909
it'll call that completion closer. So

918
00:49:06,977 --> 00:49:10,245
don't forget to do batch updates if you do multiple

919
00:49:10,314 --> 00:49:14,150
adjustments to your tableView or collectionView. And

920
00:49:14,218 --> 00:49:16,952
then the last thing we need to do is ask the coordinator

921
00:49:17,021 --> 00:49:20,889
to do the drop. The reason we need to do this is,

922
00:49:20,958 --> 00:49:24,459
we need to animate the drop happening, right there. So

923
00:49:24,528 --> 00:49:28,697
we're gonna do the drop. The dragItem is the item.dragItem.

924
00:49:28,766 --> 00:49:34,904
And the ItemAt is the destinationIndexPath. So

925
00:49:34,972 --> 00:49:36,672
that's gonna actually make the drop happen.

926
00:49:36,740 --> 00:49:40,809
So this is going to animate and move the bee over.

927
00:49:40,878 --> 00:49:44,213
This is going to, at the same time, be dropping the thing

928
00:49:44,281 --> 00:49:47,682
that's on your finger is going to disappear, and the plus

929
00:49:47,751 --> 00:49:52,387
sign will go away, and all that business. All right, so

930
00:49:52,456 --> 00:49:57,659
let's take a look at this. All right, here we go.

931
00:49:57,728 --> 00:50:01,764
Now we've only done the local case, but here it is, the bee,

932
00:50:01,832 --> 00:50:07,069
moving it around and drop. Woo-hoo, it worked, all right?

933
00:50:07,137 --> 00:50:12,641
This over here, drop. Now this one over here from outside

934
00:50:12,710 --> 00:50:16,144
is still not gonna work. Doesn't work because that's

935
00:50:16,213 --> 00:50:19,949
not the local case, right? So let's do the local case.

936
00:50:22,953 --> 00:50:27,723
All right, so that's the else of this right here. Yeah,

937
00:50:27,791 --> 00:50:31,894
it's the else of, not that one, the else of.

938
00:50:31,963 --> 00:50:34,930
This one, the else of this source index path.

939
00:50:34,999 --> 00:50:37,933
So we don't have a source index path, which means this

940
00:50:38,001 --> 00:50:40,803
thing comes from somewhere else, so how we do this?

941
00:50:40,871 --> 00:50:43,405
Now this turns out to be quite easy to do too amazingly,

942
00:50:43,473 --> 00:50:45,774
but there's a little problem here.

943
00:50:45,843 --> 00:50:49,144
If you're dragging something from outside and you drop it,

944
00:50:49,213 --> 00:50:52,347
is that information immediately available? No,

945
00:50:52,416 --> 00:50:54,950
you have to asynchronously go fetch it from that thing.

946
00:50:55,019 --> 00:50:55,617
Well, what the heck are you

947
00:50:55,686 --> 00:50:58,286
gonna do with your table while you're off fetching it?

948
00:50:58,355 --> 00:51:00,422
What if it takes ten seconds? So

949
00:51:00,490 --> 00:51:03,425
what you do is you put a placeholder in your table.

950
00:51:03,493 --> 00:51:06,128
And collection view manages all of that for you, so that

951
00:51:06,196 --> 00:51:08,330
all you have to do is when the data finally does arrive.

952
00:51:08,399 --> 00:51:10,633
You tell the placeholder, context it's called.

953
00:51:10,701 --> 00:51:13,001
Okay, I got the info. Update your model, and

954
00:51:13,070 --> 00:51:16,171
it'll automatically swap out the placeholder cell for

955
00:51:16,240 --> 00:51:20,375
one of your cells that matches the kind of data you have. So

956
00:51:20,444 --> 00:51:21,844
let's see how we do that.

957
00:51:21,912 --> 00:51:24,413
We do this by creating a placeholder context.

958
00:51:24,481 --> 00:51:27,816
This is a thing that's gonna manage that placeholder. And

959
00:51:27,884 --> 00:51:32,821
placeholderContext, you get from the coordinator,

960
00:51:32,890 --> 00:51:38,260
oops, coordinator, by asking it to drop the item

961
00:51:38,328 --> 00:51:42,764
to a placeholder. You see the second initializer there,

962
00:51:42,833 --> 00:51:45,934
dropped item to a placeholder. So I'm gonna do this one. So

963
00:51:46,003 --> 00:51:48,737
the item I'm gonna drag is the item.drag item.

964
00:51:48,806 --> 00:51:51,407
Remember, we're still in this for loop where we're dropping,

965
00:51:51,476 --> 00:51:53,174
cuz we could be dropping multiple items.

966
00:51:53,243 --> 00:51:55,777
So we're dropping them one by one. So that's what we're

967
00:51:55,846 --> 00:51:57,913
dragging. And then here's the placeholder right here.

968
00:51:57,982 --> 00:51:59,081
So I gotta create one of these.

969
00:51:59,150 --> 00:52:05,020
Let me make this a little more readable for you here. Okay,

970
00:52:05,088 --> 00:52:09,257
let me put this on another line. All right, so I've gotta

971
00:52:09,326 --> 00:52:12,494
create a UIDropPlaceholder. And to do that, I, it needs to

972
00:52:12,563 --> 00:52:15,730
know where you're gonna insert the placeholder. And

973
00:52:15,799 --> 00:52:19,034
then it has a reuseIdentifier, and I'm gonna talk about that

974
00:52:19,102 --> 00:52:21,970
in a second. So let's put the insertionPathIndex to be,

975
00:52:22,039 --> 00:52:24,939
obviously the destination. Okay. Where

976
00:52:25,008 --> 00:52:28,310
we're putting this in. That's this thing we calculated right

977
00:52:28,379 --> 00:52:30,812
at the beginning up here. That's the destination. And

978
00:52:30,881 --> 00:52:33,582
look at this reuse identifier. What the heck is that?

979
00:52:33,651 --> 00:52:36,885
Well you get to decide what kind of cell

980
00:52:36,954 --> 00:52:40,388
is the placeholder. It doesn't put some prepackaged one in.

981
00:52:40,457 --> 00:52:43,258
You get to decide. So this is asking you for the reuse

982
00:52:43,327 --> 00:52:47,162
identifier in your storyboard to use to create that thing.

983
00:52:47,231 --> 00:52:52,367
So I'm gonna call mine DropPlaceholderCell.

984
00:52:52,436 --> 00:52:55,137
I can call it anything I want. This is just the string that

985
00:52:55,205 --> 00:52:58,773
I'm gonna use in my storyboard to create this thing. Now

986
00:52:58,842 --> 00:53:02,444
what's interesting also is you can also include at the end of

987
00:53:02,513 --> 00:53:07,549
this a closure. And in that closure you can basically,

988
00:53:07,618 --> 00:53:10,186
initialize this cell or do the same kinda thing you would do,

989
00:53:10,254 --> 00:53:12,154
where you do the dequeueReusableCell, because

990
00:53:12,222 --> 00:53:14,089
that dequeueReusableCell's never gonna be called. This is

991
00:53:14,157 --> 00:53:16,291
the placeholder cell, it's not gonna call that thing. So

992
00:53:16,359 --> 00:53:18,427
here you could do the same kinda setup if you had outlets

993
00:53:18,496 --> 00:53:20,562
in your cell, or whatever, you could set them all up.

994
00:53:20,631 --> 00:53:21,663
We're not gonna have any outlets in our, so

995
00:53:21,731 --> 00:53:24,233
we're not gonna do it, but that's where you would do it.

996
00:53:25,802 --> 00:53:30,205
So did I remember, so I just wanna make sure we got this

997
00:53:30,274 --> 00:53:35,577
all right, no errors. So let's go back to our storyboard and

998
00:53:35,646 --> 00:53:37,346
make that placeholder cell.

999
00:53:37,415 --> 00:53:39,448
The way you make a cell in a collection view,

1000
00:53:39,517 --> 00:53:41,783
you just select the collection view and

1001
00:53:41,852 --> 00:53:44,486
go over to inspect it. And the very first thing is the items,

1002
00:53:44,555 --> 00:53:48,056
and I want from one item to two items. Okay, and

1003
00:53:48,124 --> 00:53:52,060
it makes a second item right here. And I'm gonna go make

1004
00:53:52,129 --> 00:53:57,999
sure I say it's not an emoji cell, it's a drop placeholder

1005
00:53:58,068 --> 00:54:02,504
cell. That's how I'm linking it to that line of code I

1006
00:54:02,572 --> 00:54:06,375
just wrote. Its type doesn't have to be emoji collection

1007
00:54:06,443 --> 00:54:08,977
view cell because it's not gonna have the emoji in there.

1008
00:54:09,045 --> 00:54:12,413
So I'm gonna make it just be a normal UI collection view

1009
00:54:12,482 --> 00:54:17,452
cell. Nothing special, and it doesn't need this little label

1010
00:54:17,521 --> 00:54:19,655
on the inside because it's a place holder for

1011
00:54:19,723 --> 00:54:22,724
the label, that information hasn't arrived yet. So

1012
00:54:22,793 --> 00:54:25,661
instead I'm gonna put an activity indicator in there.

1013
00:54:26,931 --> 00:54:28,230
So it's spinning there,

1014
00:54:28,298 --> 00:54:31,733
letting the user know I'm waiting on some dropped data.

1015
00:54:31,802 --> 00:54:34,103
So I'm gonna put it in there. Let's go ahead and center it.

1016
00:54:35,939 --> 00:54:39,374
And let's yeah, that's probably good enough.

1017
00:54:39,443 --> 00:54:41,543
And let's make it so it starts off animating. So,

1018
00:54:41,611 --> 00:54:43,545
I'm gonna click it right here. So it starts off animate,

1019
00:54:43,614 --> 00:54:47,416
so I don't even have to tell it to animate. All right,

1020
00:54:47,484 --> 00:54:52,054
all that. And what are we using here? Emoji,

1021
00:54:52,122 --> 00:54:54,389
I thought I changed that, I guess not. Yeah.

1022
00:54:54,458 --> 00:54:59,194
Didn't I change that already? I did. Placeholder cell.

1023
00:55:00,664 --> 00:55:03,932
So now that we have this setup for this placeholder cell,

1024
00:55:04,001 --> 00:55:09,771
we go back here to our Code. No, not there. Down here.

1025
00:55:09,840 --> 00:55:14,276
Okay, and we've got this nice placeholder ready to go.

1026
00:55:14,345 --> 00:55:16,011
All we need to do now is go get the data.

1027
00:55:16,080 --> 00:55:19,647
And when it arrives, we just tell the placeholder context,

1028
00:55:19,716 --> 00:55:22,084
here's the, go swap them out and

1029
00:55:22,152 --> 00:55:24,886
here's my model change. So, I'm gonna get the data

1030
00:55:24,955 --> 00:55:26,689
a little differently than we got before.

1031
00:55:26,757 --> 00:55:29,591
Last time we used that method's load objects,

1032
00:55:29,660 --> 00:55:32,827
plural, on session to load up the objects, remember that?

1033
00:55:32,896 --> 00:55:34,763
When we dropped the image in there.

1034
00:55:34,832 --> 00:55:39,534
This time I am just gonna grab one thing, not load objects,

1035
00:55:39,603 --> 00:55:41,837
but grab one object that was in my item.

1036
00:55:41,905 --> 00:55:45,474
So I'm gonna say here item.dragItem.itemProvider.

1037
00:55:45,542 --> 00:55:49,878
So this is the item provider, that thing that's provided

1038
00:55:49,947 --> 00:55:54,116
me the item, provides it asynchronously because it's

1039
00:55:54,185 --> 00:55:57,519
outside of my app. Load object,

1040
00:55:57,588 --> 00:56:02,725
I'm gonna say of class, I want an NSAttributedString.

1041
00:56:08,766 --> 00:56:11,934
And it gives it back to me asynchronously with

1042
00:56:12,002 --> 00:56:14,802
the provider. That's gonna be the attributed string, and

1043
00:56:14,871 --> 00:56:17,439
also possibly and error, which we're gonna ignore the error.

1044
00:56:17,507 --> 00:56:19,274
You can look at the documentation to see what kind

1045
00:56:19,343 --> 00:56:21,609
of errors you can get. But you can imagine right,

1046
00:56:21,678 --> 00:56:24,345
errors providing this data. Now

1047
00:56:24,414 --> 00:56:28,983
this particular closure is not executed on the main queue. So

1048
00:56:29,052 --> 00:56:31,019
this one we need to unfortunately

1049
00:56:31,088 --> 00:56:35,990
say DispatchQueue.main.async if we wanna do anything,

1050
00:56:36,059 --> 00:56:39,394
to our UI which we do. What we're gonna do here,

1051
00:56:39,463 --> 00:56:42,030
is we are going to change our model which are gonna cause

1052
00:56:42,099 --> 00:56:45,033
some UI stuff to happen.

1053
00:56:45,102 --> 00:56:47,636
Now, it could be actually that the change in this would not

1054
00:56:47,704 --> 00:56:50,271
affect the UI directly cuz we're only changing our model.

1055
00:56:50,340 --> 00:56:53,008
But the problem is we're gonna do it in the context of asking

1056
00:56:53,077 --> 00:56:54,976
the placeholder to replace that cell, and

1057
00:56:55,045 --> 00:56:58,213
that's certainly gonna cause UI. So how do we do this?

1058
00:56:58,282 --> 00:57:03,285
We just say placeholderContext.commitInse-

1059
00:57:03,353 --> 00:57:06,788
rtion of my data. And

1060
00:57:06,857 --> 00:57:11,960
this right here is the insertionIndexPath,

1061
00:57:12,029 --> 00:57:16,264
and here is the code to fix my model, and that's it.

1062
00:57:16,333 --> 00:57:17,866
This is all we need to do and

1063
00:57:17,935 --> 00:57:21,169
it will automatically replace that placeholder with

1064
00:57:21,238 --> 00:57:24,473
a cell by calling your normal self or item at methods.

1065
00:57:24,542 --> 00:57:27,309
Notice that this insertionIndexPath might

1066
00:57:27,377 --> 00:57:30,512
be different than this destinationIndexPath.

1067
00:57:30,581 --> 00:57:35,350
Why? Because this might have taken ten seconds, not likely,

1068
00:57:35,419 --> 00:57:37,953
but it might have. So it might have changed other things in

1069
00:57:38,021 --> 00:57:40,221
the collection view might have been going on. Okay, and

1070
00:57:40,290 --> 00:57:43,758
new cells adding, other things came faster whatever. So

1071
00:57:43,827 --> 00:57:46,794
always use the insertion index here, and you're only using it

1072
00:57:46,863 --> 00:57:49,764
to update your model. So how do I update my model here?

1073
00:57:49,833 --> 00:57:54,502
Well that's my emojis.insert the thing that

1074
00:57:54,571 --> 00:57:59,341
came back which is this provider as an attribute

1075
00:57:59,409 --> 00:58:04,779
of strings. So let's say if we can let attributedString

1076
00:58:04,848 --> 00:58:08,684
= provider as an NSAttributedString.

1077
00:58:10,988 --> 00:58:16,224
Okay, then we can do this. So, insert that

1078
00:58:16,293 --> 00:58:23,064
attributedString at the insertionIndexPath.item.

1079
00:58:23,133 --> 00:58:26,101
That updates our model, this thing handles the rest.

1080
00:58:26,170 --> 00:58:27,035
You don't have to do anything else,

1081
00:58:27,104 --> 00:58:29,204
you don't have to do any inserting rows,

1082
00:58:29,272 --> 00:58:33,741
any of that business. Yeah, this is attribution.string,

1083
00:58:33,810 --> 00:58:36,945
cuz we have just strings in our model, not attributive

1084
00:58:37,014 --> 00:58:39,347
strings. And of course we need you to do self.,

1085
00:58:39,416 --> 00:58:43,251
right here because we're inside a closure. Now if for

1086
00:58:43,320 --> 00:58:46,321
some reason you couldn't get that attributedString from

1087
00:58:46,390 --> 00:58:47,122
the provider,

1088
00:58:47,190 --> 00:58:50,325
maybe there's an error instead. Then you wanna let

1089
00:58:50,393 --> 00:58:55,496
the placeholderContext know to delete that placeholder.

1090
00:58:55,565 --> 00:58:57,832
Because you couldn't get the other string after all, so

1091
00:58:57,901 --> 00:59:00,735
you go, and that's it. So all you have to do to accept

1092
00:59:00,804 --> 00:59:03,037
stuff into a collectionView from somewhere else. So

1093
00:59:03,106 --> 00:59:08,577
let's see this in action right here. So we

1094
00:59:08,645 --> 00:59:11,947
haven't hopefully broken our local. Nope, still working,

1095
00:59:12,015 --> 00:59:14,683
and hopefully where you can get our bee and drop it in,

1096
00:59:14,751 --> 00:59:17,418
here we go. Woo-hoo, we got a bee, now our font is

1097
00:59:17,487 --> 00:59:20,488
really big, so we can't see it we'd probably wanna have our

1098
00:59:20,557 --> 00:59:23,891
font self-adjust or whatever. But this is, you know, just

1099
00:59:23,960 --> 00:59:27,529
like anything from now we can move this around, it's part of

1100
00:59:27,597 --> 00:59:31,800
our collectionView etc. So that's collectionView drag and

1101
00:59:31,869 --> 00:59:35,269
drop start to finish not really that complicated it's

1102
00:59:35,338 --> 00:59:39,507
actually they did a pretty good job. Now the next thing

1103
00:59:39,576 --> 00:59:44,145
we wanna do is to drag these things into our image, right?

1104
00:59:44,214 --> 00:59:47,749
We have our, oops let me go back to in my images here,

1105
00:59:47,818 --> 00:59:50,485
and, where's my favorite image?

1106
00:59:50,553 --> 00:59:53,054
And well, pick some random image here we go.

1107
00:59:53,123 --> 00:59:55,923
All right, so I have my image here, and

1108
00:59:55,992 --> 00:59:59,127
we want to be able to pick up an apple and put it

1109
00:59:59,196 --> 01:00:02,630
under the tree. So how are we gonna do that drag and drop?

1110
01:00:02,699 --> 01:00:05,633
Well, we just, all we need to do is implement dropping of

1111
01:00:05,702 --> 01:00:09,303
NSAttributedStrings in our EmojiArtView. That's all you

1112
01:00:09,372 --> 01:00:12,841
need to do and it's so simple let's do that quickly here as

1113
01:00:12,910 --> 01:00:16,211
time is running out. So, let's go to our emoji art view so

1114
01:00:16,280 --> 01:00:18,880
here's our EmojiArtView, it kind of looks very

1115
01:00:18,948 --> 01:00:22,684
simplistic at this point. And I'm going to add or

1116
01:00:22,753 --> 01:00:26,721
drop interaction to it, init's initializers. So

1117
01:00:26,789 --> 01:00:31,593
I have this nice thing I type which is the template for

1118
01:00:31,662 --> 01:00:34,295
having UI view initializers. Remember you have to override

1119
01:00:34,364 --> 01:00:36,598
both these inits, remember that? And

1120
01:00:36,666 --> 01:00:39,134
then I have this nice setup, so in the setup right here,

1121
01:00:39,203 --> 01:00:41,903
I'm just going to add interaction. And remember I'm

1122
01:00:41,972 --> 01:00:44,539
in the UI view now, so I'm adding it to myself.

1123
01:00:44,608 --> 01:00:50,578
UIDropInteraction with the delegate being myself,

1124
01:00:50,647 --> 01:00:55,917
now I'm a UIDropInteractionDelegate.

1125
01:00:55,986 --> 01:00:58,620
I also have a nice little thing here,

1126
01:00:58,689 --> 01:01:01,656
dropstubs that just gives me the stubs for

1127
01:01:01,725 --> 01:01:05,994
the three methods canHandle, didUpdate, performDrop,

1128
01:01:06,063 --> 01:01:08,663
you should be used to this now. Same as we

1129
01:01:08,732 --> 01:01:09,731
had in the collection view but

1130
01:01:09,800 --> 01:01:11,933
these are the non-collection versions. And

1131
01:01:12,001 --> 01:01:14,702
so what do I do in canHandle? I just say whether I

1132
01:01:14,771 --> 01:01:17,272
can load the objects of the right class in this case

1133
01:01:17,340 --> 01:01:22,210
attributedStrings. And what do I do in sessionDidUpdate?

1134
01:01:22,278 --> 01:01:24,980
I have to return a drop proposal, here I'm always

1135
01:01:25,048 --> 01:01:27,949
gonna allow dropping an attributedString. And it's

1136
01:01:28,017 --> 01:01:30,484
always gonna be a copy because I'm not gonna move things

1137
01:01:30,553 --> 01:01:33,054
inside myself with drag and drop. I'm gonna move them

1138
01:01:33,123 --> 01:01:35,890
directly, so I'll always do copy here, and then finally I

1139
01:01:35,959 --> 01:01:38,059
just have to load objects of a certain class.

1140
01:01:38,127 --> 01:01:39,994
NSAttributed strings of course, and

1141
01:01:40,063 --> 01:01:42,997
this is the list of attributed strings, the item providers

1142
01:01:43,066 --> 01:01:46,968
are attributed strings. And here I just need to add these

1143
01:01:47,037 --> 01:01:52,474
things to my view as sub views add labels, sub view.

1144
01:01:52,542 --> 01:01:55,076
So, I'm gonna do this with a little function here,

1145
01:01:55,145 --> 01:01:57,178
add label, then I'm gonna write.

1146
01:01:57,247 --> 01:02:00,849
And it's going to get the attributed strings so

1147
01:02:00,917 --> 01:02:04,152
let's get the attributedString that we need out of here.

1148
01:02:04,221 --> 01:02:06,420
Actually I also need to know where to drop it so

1149
01:02:06,489 --> 01:02:09,191
let's get the drop point by saying Mr.

1150
01:02:09,259 --> 01:02:12,693
Session, drag session, what is the location of this

1151
01:02:12,762 --> 01:02:17,665
drag in my coordinate system. So I'm just finding out

1152
01:02:17,734 --> 01:02:20,168
where this thing is dropped I obviously need to know,

1153
01:02:20,237 --> 01:02:24,205
where it's dropped to be able to do it. So, then let's add

1154
01:02:24,274 --> 01:02:29,076
all the things that dropped by doing a little for loop for

1155
01:02:29,145 --> 01:02:32,780
attributedString in the providers as?,

1156
01:02:32,849 --> 01:02:39,854
an array of attributedString, which it should be. But maybe

1157
01:02:39,923 --> 01:02:42,123
you didn't know you could do this, but you can say as

1158
01:02:42,192 --> 01:02:44,659
an array right in the middle of a four loop like this. And

1159
01:02:44,727 --> 01:02:47,696
in fact, you can even say if that for some reason is nil,

1160
01:02:47,764 --> 01:02:50,598
cuz you can't as it, then just use an empty array,

1161
01:02:50,667 --> 01:02:55,570
right here. Okay, that's kind of a cool trick. All right,

1162
01:02:55,639 --> 01:02:58,539
so we're gonna add a label with the attributedString,

1163
01:02:58,608 --> 01:03:02,343
we're doing this for each one. And we're going to have it be

1164
01:03:02,412 --> 01:03:07,982
centered at the dropPoint, So we

1165
01:03:08,051 --> 01:03:13,421
have write this method ourself to do that private func, this

1166
01:03:13,490 --> 01:03:18,426
is an easy one, addLabel(with attributedString:,

1167
01:03:18,494 --> 01:03:24,565
of type NSAttributedString, centeredAt point: CGPoint).

1168
01:03:24,634 --> 01:03:29,805
I'm just gonna create a UILabel. I'm

1169
01:03:29,873 --> 01:03:33,474
going to set its backgroundColor to clear, =

1170
01:03:33,543 --> 01:03:38,479
clear, Cuz I want you know my image to show through around

1171
01:03:38,548 --> 01:03:40,982
the edges of it I don't want a big white background or

1172
01:03:41,050 --> 01:03:44,286
something. I"m gonna set the attributedText obviously to

1173
01:03:44,354 --> 01:03:46,921
be this attributedString that was passed in.

1174
01:03:46,990 --> 01:03:48,923
I'm going to size to fit it,

1175
01:03:48,992 --> 01:03:53,061
okay I don't want that label to be some large random size.

1176
01:03:53,130 --> 01:03:56,197
I'm going to what else am I gonna do? Yes I'm going

1177
01:03:56,266 --> 01:04:00,601
to position it, label.center = drop point right there, and

1178
01:04:00,670 --> 01:04:06,040
of course I have to addSubView to myself. That's it.

1179
01:04:06,109 --> 01:04:12,780
Let's do it. All right, let's go get an image.

1180
01:04:12,849 --> 01:04:16,784
Did I lose my favorite image? No, my favorite- there it is.

1181
01:04:16,853 --> 01:04:19,253
This is my favorite image right here. Okay, so

1182
01:04:19,322 --> 01:04:22,056
I've got my image right here, we can zoom in and out.

1183
01:04:22,125 --> 01:04:26,494
We can pick up a bee, and drop the bee. Pick up another bee,

1184
01:04:26,562 --> 01:04:29,830
drop the bee. Maybe we'll put an apple down here. Now of

1185
01:04:29,899 --> 01:04:32,533
course we want to be able to resize these things, and

1186
01:04:32,602 --> 01:04:35,870
move them around, right? So, I don't wanna waste your time.

1187
01:04:35,939 --> 01:04:38,306
That's just Jack doing some gesture recognizers.

1188
01:04:38,375 --> 01:04:40,642
I have put those in a little file right here.

1189
01:04:40,710 --> 01:04:44,345
So let's just throw those in. And

1190
01:04:44,414 --> 01:04:46,414
you can go look at those later at your leisure,

1191
01:04:46,483 --> 01:04:50,151
it's really, it's very simple. Gesture recognizers tap and

1192
01:04:50,219 --> 01:04:53,554
pinch and pan, things like that. And all we need do is to

1193
01:04:53,623 --> 01:04:57,024
turn that on, let's just go down here and say addEmoji

1194
01:04:57,093 --> 01:04:59,694
GestureRecognizers to that label, so

1195
01:04:59,763 --> 01:05:01,963
that just adds these recognizers to the label.

1196
01:05:02,999 --> 01:05:04,599
Okay, so let's see that in action.

1197
01:05:10,540 --> 01:05:14,843
Let's just get this out here, drag this in. Now,

1198
01:05:14,911 --> 01:05:18,246
we drag a bee down here. Drag another bee, this is

1199
01:05:18,315 --> 01:05:20,849
what I was doing at the very beginning to demonstrate this.

1200
01:05:20,917 --> 01:05:23,551
And then we can tap on them and make those bigger,

1201
01:05:23,619 --> 01:05:25,486
tap on them and make them smaller.

1202
01:05:25,555 --> 01:05:27,322
We can even zoom way in,

1203
01:05:27,390 --> 01:05:29,857
before we make some really small, take like apple put it

1204
01:05:29,926 --> 01:05:32,860
down here. Make it very very small, right?

1205
01:05:32,929 --> 01:05:37,431
And then we zoom back out. It will be a tiny little apple,

1206
01:05:37,500 --> 01:05:43,637
etc.. Now, I'm going to back to the slides.

1207
01:05:43,706 --> 01:05:45,706
Like I say, when I finish the slides,

1208
01:05:45,775 --> 01:05:48,809
we're not gonna be able to do the text demo because we have

1209
01:05:48,878 --> 01:05:51,813
this midterm coming in. But that's pretty much all we need

1210
01:05:51,882 --> 01:05:54,182
to do to make this collection view, do full drag and

1211
01:05:54,250 --> 01:05:56,884
drop and all, so it's quite, quite straightforward.

1212
01:05:56,953 --> 01:05:58,252
And hopefully it'll make sense.

1213
01:05:58,321 --> 01:06:00,621
If you have any questions about it,

1214
01:06:00,690 --> 01:06:03,258
Piazza is a great place to ask. All right,

1215
01:06:03,326 --> 01:06:08,663
let's go back to our slides and talk about UITextField.

1216
01:06:08,731 --> 01:06:11,966
All right, UITextField it's a lot like UILabel and

1217
01:06:12,035 --> 01:06:16,470
you might just think, it's just an editable UILabel.

1218
01:06:16,539 --> 01:06:19,340
It's a little more complicated than that, but not much more.

1219
01:06:19,409 --> 01:06:21,876
One thing to really think about conceptionally

1220
01:06:21,944 --> 01:06:25,713
UITextField is having editable text fields, especially on

1221
01:06:25,782 --> 01:06:30,418
the iPhone, is not a very good UI. And it's really easy to

1222
01:06:30,486 --> 01:06:33,588
fall in the trap of throwing text fields into your UI and

1223
01:06:33,656 --> 01:06:35,289
thinking, well, this is a great UI for doing this.

1224
01:06:35,358 --> 01:06:36,757
Because you're running in the simulator and

1225
01:06:36,826 --> 01:06:37,458
you gotta keyboard.

1226
01:06:37,527 --> 01:06:39,561
You're just typing away in those text fields,

1227
01:06:39,629 --> 01:06:42,029
hitting return, going to the next section, whereas,

1228
01:06:42,098 --> 01:06:43,865
the poor user is like, my thumb's like,

1229
01:06:43,934 --> 01:06:45,232
it's another dam text field,

1230
01:06:45,301 --> 01:06:49,303
I hate them. So it's not a primary input source.

1231
01:06:49,372 --> 01:06:52,339
If you can find a way to let them choose from a list or

1232
01:06:52,408 --> 01:06:55,076
otherwise input the data without having to type things,

1233
01:06:55,145 --> 01:06:57,945
it's better. Now on the iPad it's not so

1234
01:06:58,014 --> 01:07:00,948
bad, at least the keyboard is quite large,

1235
01:07:01,017 --> 01:07:02,784
it's much more accessible, people can put it down and

1236
01:07:02,852 --> 01:07:06,153
use two hands. So it's not quite as bad on an iPad,

1237
01:07:06,222 --> 01:07:08,556
but on an iPhone, don't get fooled.

1238
01:07:08,624 --> 01:07:10,858
And I see a lot of you doing this in your final projects.

1239
01:07:10,927 --> 01:07:13,327
You submit these projects to us that are just like, my god,

1240
01:07:13,396 --> 01:07:15,963
this is almost unusable. Because we will be testing all

1241
01:07:16,032 --> 01:07:18,432
your final projects on devices.

1242
01:07:18,501 --> 01:07:21,035
We won't be in the simulator and be able to type away.

1243
01:07:21,104 --> 01:07:24,072
So think about that from your users, whether a text field's

1244
01:07:24,140 --> 01:07:27,841
what you want. Once you've decided you want a text field,

1245
01:07:27,910 --> 01:07:32,380
here's how it works. So a text field is something that,

1246
01:07:32,449 --> 01:07:35,549
obviously, throws a keyboard up and

1247
01:07:35,618 --> 01:07:39,353
lets you enter text. One thing to notice about the keyboard,

1248
01:07:39,422 --> 01:07:41,856
is there's no keyboard object or anything,

1249
01:07:41,925 --> 01:07:46,994
anywhere in iOS. So the keyboard coming up

1250
01:07:47,063 --> 01:07:51,465
happens because an object becomes the first responder.

1251
01:07:51,534 --> 01:07:54,201
So the first responder is the thing that gets the keyboard

1252
01:07:54,270 --> 01:07:56,971
events from the keyboard. And as soon as something becomes

1253
01:07:57,040 --> 01:07:59,006
first responder, it starts getting keyboard and

1254
01:07:59,075 --> 01:08:02,009
the keyboard will appear, all right? So becomeFirstResponder

1255
01:08:02,078 --> 01:08:04,145
is a message you can send to text field and

1256
01:08:04,214 --> 01:08:06,414
it will cause it to be the first responder,

1257
01:08:06,482 --> 01:08:09,483
which will cause the keyboard to come up. And

1258
01:08:09,552 --> 01:08:12,119
similarly, if you send it resignFirstResponder it will

1259
01:08:12,188 --> 01:08:14,489
stop being the first responder and the keyboard will go away.

1260
01:08:14,557 --> 01:08:17,958
So that is how you make the keyboard come and go in iOS,

1261
01:08:18,027 --> 01:08:22,163
is by making things become and resignFirstResponder. So

1262
01:08:22,232 --> 01:08:25,700
that's important to understand about keyboards.

1263
01:08:25,768 --> 01:08:28,569
One thing about text field that's totally different than

1264
01:08:28,638 --> 01:08:30,871
the label, is that it has a delegate.

1265
01:08:30,940 --> 01:08:33,674
And that its delegate is the primary way you interact with

1266
01:08:33,743 --> 01:08:35,743
the text field. As supposed to a label,

1267
01:08:35,811 --> 01:08:37,712
label don't even have a delegate. You just ask for

1268
01:08:37,780 --> 01:08:42,317
its text and set its values and that's it. Whereas since

1269
01:08:42,385 --> 01:08:45,419
a text field is editable, as things are being edited like

1270
01:08:45,488 --> 01:08:47,922
a selections changing, or someone types something new,

1271
01:08:47,991 --> 01:08:50,291
you can find out about all of those things going on.

1272
01:08:50,360 --> 01:08:55,096
And another example is a lot of times in the keyboard,

1273
01:08:55,164 --> 01:08:58,700
when the user hits the return key in the keyboard,

1274
01:08:58,768 --> 01:09:01,703
you want the keyboard to go away, right? So,

1275
01:09:01,771 --> 01:09:05,173
textFieldShouldReturn right there, is a method that gets

1276
01:09:05,241 --> 01:09:08,109
called when the Return key is pressed. And inside there,

1277
01:09:08,177 --> 01:09:11,178
you very likely wanna say, resignFirstResponder, and that

1278
01:09:11,247 --> 01:09:14,848
will cause the keyboard to go away. So that's an example of

1279
01:09:14,917 --> 01:09:17,918
what you can do with the delegate. Another really

1280
01:09:17,987 --> 01:09:21,555
important delegate method is textFieldDidEndEditing.

1281
01:09:21,624 --> 01:09:25,459
This gets called when it resigns first responder.

1282
01:09:25,528 --> 01:09:29,497
So if someone is editing in your text field and they touch

1283
01:09:29,566 --> 01:09:34,235
on another text field, you'll resign first responder.

1284
01:09:34,304 --> 01:09:36,638
So if you wanna look at the text at that point,

1285
01:09:36,706 --> 01:09:38,673
you're gonna wanna implement this delegate method.

1286
01:09:40,209 --> 01:09:43,244
Now having said that, text field is a UI control.

1287
01:09:43,312 --> 01:09:45,579
So it does have target action and you can control,

1288
01:09:45,648 --> 01:09:48,950
drag it and have it send certain target action messages

1289
01:09:49,018 --> 01:09:51,985
on certain activities happening in the text field.

1290
01:09:52,054 --> 01:09:54,088
And some time people hook it up that way without doing

1291
01:09:54,156 --> 01:09:55,790
the delegate thing. But you kinda

1292
01:09:55,858 --> 01:09:58,192
need to know this delegate because you need to know what

1293
01:09:58,261 --> 01:10:01,128
it's capable of doing. So you'll definitely wanna look

1294
01:10:01,197 --> 01:10:03,965
up the UITextField Delegate protocol, and see what are all

1295
01:10:04,033 --> 01:10:06,667
the things you can find out about what's happening when

1296
01:10:06,736 --> 01:10:09,237
editing is happening in a text field. All right,

1297
01:10:09,305 --> 01:10:13,040
the keyboard, so since there's no keyboard object in iOS,

1298
01:10:13,109 --> 01:10:16,076
what if you want to configure the keyboard like,

1299
01:10:16,145 --> 01:10:18,679
set what, whether it does autocorrect.

1300
01:10:18,748 --> 01:10:21,015
Right, how it does all that annoying autocorrect?

1301
01:10:21,084 --> 01:10:23,384
I didn't say annoying. It does autocorrect and

1302
01:10:23,453 --> 01:10:25,953
you don't want it to do that because it doesn't make sense

1303
01:10:26,022 --> 01:10:28,055
in your text field, you can turn that off. But

1304
01:10:28,124 --> 01:10:31,025
you do all that by talking to the text field, not by talking

1305
01:10:31,094 --> 01:10:34,962
to the keyboard. Anybody who puts up a keyboard is going to

1306
01:10:35,031 --> 01:10:38,399
implement this protocol called UITextInputTraits, and

1307
01:10:38,468 --> 01:10:40,234
it has all these keyboard activities. And

1308
01:10:40,302 --> 01:10:42,837
it's that guy's responsibility to get the keyboard to do

1309
01:10:42,905 --> 01:10:43,538
the right thing.

1310
01:10:45,208 --> 01:10:48,242
The keyboard also has in the text input traits protocol, it

1311
01:10:48,311 --> 01:10:51,144
also has input accessory view which lets you put a little

1312
01:10:51,213 --> 01:10:54,348
view on the keyboard, right at the top of the keyboard. So if

1313
01:10:54,417 --> 01:10:57,652
you had some special buttons or something you want, you can

1314
01:10:57,720 --> 01:11:01,321
put them in there, so that's kinda cool, all right? Now,

1315
01:11:01,390 --> 01:11:04,057
one thing, I'm not gonna even talk about this slide yet, but

1316
01:11:04,126 --> 01:11:06,326
later in the quarter, I will. But I'm putting it up here for

1317
01:11:06,395 --> 01:11:09,029
reference, you can go back and look at it. It's important to

1318
01:11:09,098 --> 01:11:12,233
understand that when the keyboard comes up,

1319
01:11:12,302 --> 01:11:15,736
it covers up your views, right? The keyboard does not

1320
01:11:15,805 --> 01:11:18,405
move things out of the way normally, it comes up.

1321
01:11:18,474 --> 01:11:21,742
Now, there are some classes like the UITableViewController

1322
01:11:21,811 --> 01:11:24,412
bundle, right, the thing that you can drag out and get

1323
01:11:24,480 --> 01:11:27,014
a whole UITableViewController with the table view,

1324
01:11:27,083 --> 01:11:30,084
that does. That will scroll things up out of the way

1325
01:11:30,153 --> 01:11:32,553
of the keyboard. But normally, the keyboard just comes up,

1326
01:11:32,622 --> 01:11:35,723
and your stuff is behind it. And I'll tell you another huge

1327
01:11:35,792 --> 01:11:38,259
problem with final projects is people who've only run them

1328
01:11:38,327 --> 01:11:40,861
in the simulator, and when you run on a device and

1329
01:11:40,930 --> 01:11:43,297
you press on a text field, the keyboard comes up and

1330
01:11:43,365 --> 01:11:47,334
covers that text field. And so you can't even enter any

1331
01:11:47,403 --> 01:11:50,004
information in that text field. That's extremely common

1332
01:11:50,073 --> 01:11:53,040
and we will, basically, not be able to test certain parts

1333
01:11:53,109 --> 01:11:56,143
of your app because we can't even type in, to a text field.

1334
01:11:56,212 --> 01:11:59,146
So it is your responsibility to move things out of the way.

1335
01:11:59,215 --> 01:12:01,915
Now, when I talk about NSNotification,

1336
01:12:01,984 --> 01:12:04,718
hopefully next week, I will tell you how to find

1337
01:12:04,787 --> 01:12:07,888
out that the keyboard has come up, where its come up.

1338
01:12:07,957 --> 01:12:09,356
And then you can react by moving

1339
01:12:09,425 --> 01:12:11,959
your UI out of the way, hopefully by scrolling it in

1340
01:12:12,027 --> 01:12:14,495
scroll view, but you might have to do it some other way.

1341
01:12:16,899 --> 01:12:18,933
There's a lot of other stuff in text field, you can look in

1342
01:12:19,001 --> 01:12:21,235
the documentation for. You've already seen like the auto

1343
01:12:21,303 --> 01:12:24,037
shrink of UI label. Text field has that as well and

1344
01:12:24,106 --> 01:12:26,473
you can control it like setting the minimum font size,

1345
01:12:26,542 --> 01:12:29,877
and stuff like that. When you click in the text field,

1346
01:12:29,945 --> 01:12:31,712
do you want it to clear out the text that used to be in

1347
01:12:31,781 --> 01:12:33,314
there and start afresh? Or do you want it

1348
01:12:33,383 --> 01:12:35,182
to leave the text that used to be in there?

1349
01:12:35,251 --> 01:12:37,985
Those kinds of things, you can do all that. It has some

1350
01:12:38,053 --> 01:12:39,987
little accessory views that you can put on the left and

1351
01:12:40,056 --> 01:12:45,559
right. It is a pretty powerful little object. So

1352
01:12:45,628 --> 01:12:48,563
coming up now is gonna be this demo, but again we have to get

1353
01:12:48,631 --> 01:12:50,598
out of here because of this mid-term coming.

1354
01:12:50,666 --> 01:12:53,701
So we'll be doing that, on Monday, your homework five is

1355
01:12:53,769 --> 01:12:56,637
out, it's posted already. It's essentially to do your own

1356
01:12:56,706 --> 01:12:58,672
collection view and table view, all right?

1357
01:12:58,741 --> 01:13:00,641
With some drag and drop, of course, and

1358
01:13:00,710 --> 01:13:03,444
with a little UI text field as well. If you wanna wait until

1359
01:13:03,512 --> 01:13:05,712
I do the demo on Monday to do the text field part,

1360
01:13:05,781 --> 01:13:08,649
it's a very minor part of the assignment, you could do that.

1361
01:13:08,718 --> 01:13:10,451
You could just do the rest of the assignment. I know you all

1362
01:13:10,520 --> 01:13:12,687
like to get started on your assignments early. But if you

1363
01:13:12,755 --> 01:13:14,689
do your whole assignment before Monday, except for

1364
01:13:14,757 --> 01:13:16,990
that, that's fine. And then on Tuesday you could work on

1365
01:13:17,059 --> 01:13:20,027
the text field, it's not a huge part of the assignment.

1366
01:13:20,096 --> 01:13:22,529
Again, no more Friday sections. And then next week,

1367
01:13:22,598 --> 01:13:24,766
I'll be talking about the final project requirements,

1368
01:13:24,834 --> 01:13:26,900
and we'll also be talking about persistence.

1369
01:13:26,969 --> 01:13:28,970
We have this nice emoji art thing, but

1370
01:13:29,038 --> 01:13:31,472
as soon as I quit my app and start it again,

1371
01:13:31,540 --> 01:13:34,641
I lost all my work. So we're gonna fix that next week and

1372
01:13:34,710 --> 01:13:38,112
learn how to make things persist, between launching of

1373
01:13:38,180 --> 01:13:40,381
the app. And that's a fairly small topic, so

1374
01:13:40,450 --> 01:13:42,816
we'll actually be doing some other stuff as well next week.

1375
01:13:42,885 --> 01:13:44,418
And then your final assignment,

1376
01:13:44,486 --> 01:13:47,288
assignment number six will probably go out next Wednesday

1377
01:13:47,357 --> 01:13:49,290
and be due the next Wednesday. And then no more

1378
01:13:49,358 --> 01:13:51,291
assignments the rest of the quarter because you'll have

1379
01:13:51,360 --> 01:13:53,560
your final project. So your final project is a three week

1380
01:13:53,629 --> 01:13:56,830
long thing, so you won't have any homework during the time

1381
01:13:56,899 --> 01:14:00,901
you're working on your final project. All right? That's it.

1382
01:14:00,970 --> 01:14:03,737
I will see you next Monday. >> For

1383
01:14:03,806 --> 01:14:13,213
more, please visit us at stanford.edu.
>> 更多课程详见 stanford.edu