1
00:00:08,110 --> 00:00:13,450
Hey guys this is Caleb with Debb slopes and in this video we're going to create an animated view that

2
00:00:13,450 --> 00:00:14,350
slides up.

3
00:00:14,350 --> 00:00:17,180
We already created The View earlier but we're going to animate it up.

4
00:00:17,350 --> 00:00:18,690
We're going to animate it down.

5
00:00:18,700 --> 00:00:25,120
And we're also going to add a spinner and a UI label to show download progress for those photos we're

6
00:00:25,120 --> 00:00:27,600
going to download in later video.

7
00:00:27,610 --> 00:00:31,880
So let's go ahead and let's look at where we were at last time.

8
00:00:31,960 --> 00:00:38,380
Here's our simulator and in the last video we set it up so that you can drop a pin and the map automatically

9
00:00:38,410 --> 00:00:41,630
centers and animate to wherever that pin is dropped.

10
00:00:41,920 --> 00:00:46,100
When you drop a new pin it removes the old pin and adds a new one.

11
00:00:46,180 --> 00:00:50,590
Then when you click the center button it centers you back on your current location.

12
00:00:50,590 --> 00:00:51,820
Pretty cool.

13
00:00:51,820 --> 00:00:55,550
And let's go ahead and pull open our tax code project to get started.

14
00:00:55,750 --> 00:01:02,610
So in this lesson we are going to animate that view so that it is showing.

15
00:01:02,890 --> 00:01:07,360
But before we do that we need to actually create some Iby outlets first.

16
00:01:07,360 --> 00:01:09,900
So let's go into our main storyboard.

17
00:01:10,120 --> 00:01:16,730
Let's open up the assistant editor make sure everything is visible and make sure this is on automatic.

18
00:01:16,780 --> 00:01:19,560
I'm also going to close this so I have some extra room.

19
00:01:19,780 --> 00:01:23,120
And do you remember that we hid a little of you down here.

20
00:01:23,290 --> 00:01:28,430
It's very small it's out of the way but it's really important actually.

21
00:01:28,450 --> 00:01:36,610
So if you look you'll notice that this has a constraint of the trailing space the leading space as well

22
00:01:36,610 --> 00:01:43,390
as the top space is pinned to the bottom layout of the screen and the top spaces is also pinned to the

23
00:01:43,390 --> 00:01:43,790
map view.

24
00:01:43,800 --> 00:01:47,450
But you know what for what we want to do that's not going to work.

25
00:01:47,500 --> 00:01:53,170
We need to get rid of this top space to bottom lay out and we actually need to pin the bottom of the

26
00:01:53,170 --> 00:01:55,540
view to the bottom layout.

27
00:01:55,540 --> 00:02:00,850
So if I add that constraint you'll see that it actually is still doing the same thing.

28
00:02:00,880 --> 00:02:01,990
Oh you know what.

29
00:02:02,020 --> 00:02:04,090
That's because this has a height of zero.

30
00:02:04,090 --> 00:02:08,530
We need to give it a height of 1 because basically if it has a height of zero the top and the bottom

31
00:02:08,530 --> 00:02:09,720
are exactly the same.

32
00:02:09,910 --> 00:02:11,310
Let's try that again.

33
00:02:11,360 --> 00:02:12,510
A constraint.

34
00:02:12,550 --> 00:02:15,740
Let's make it zero from the bottom.

35
00:02:16,000 --> 00:02:20,860
And when we add it you'll notice that the bottom space snaps to the Super view just like it's supposed

36
00:02:20,860 --> 00:02:22,370
to which is awesome.

37
00:02:22,660 --> 00:02:26,580
The top space goes to the bottom of the map view.

38
00:02:26,770 --> 00:02:30,760
And if you click on the map view you'll see that the bottom space connects to the view which is this

39
00:02:30,760 --> 00:02:31,610
one right here.

40
00:02:31,960 --> 00:02:33,150
That's exactly what we want.

41
00:02:33,150 --> 00:02:37,780
Because basically what we're going to do and I don't know if you know you can do this but we're going

42
00:02:37,780 --> 00:02:39,940
to animate this constraint.

43
00:02:40,090 --> 00:02:44,660
That's kind of an easy way for us to do this animation is just to simply animate the constraint.

44
00:02:44,860 --> 00:02:50,200
This button is already in place and if you look it's bottom space is paying attention to the bottom

45
00:02:50,200 --> 00:02:50,890
layout.

46
00:02:50,950 --> 00:02:52,360
We actually need to change that.

47
00:02:52,390 --> 00:02:58,910
So let's do that by going head and let's set this so that it is up here.

48
00:02:58,960 --> 00:03:00,170
Let's pin it again.

49
00:03:00,370 --> 00:03:04,690
But let's turn off constrained to margins and let's add one constraint.

50
00:03:04,900 --> 00:03:08,500
Now you'll notice the bottom space now is to the view.

51
00:03:08,500 --> 00:03:14,650
So when the view slides up the button will move as well by having constrained to margins that pays attention

52
00:03:14,650 --> 00:03:21,610
to the actual margins of the screen and we don't want that so let's go ahead and let's create a an IP

53
00:03:21,820 --> 00:03:27,700
outlet for our bottom constraint here and you'll look I found the right one by clicking down on the

54
00:03:27,700 --> 00:03:28,360
bottom.

55
00:03:28,720 --> 00:03:32,580
And this is the view up top and not view dot bottom constraint.

56
00:03:32,740 --> 00:03:39,370
And so to create an IP outlet I'm going to right click drag and then I'm going to name this map view

57
00:03:40,420 --> 00:03:44,550
map view bottom constraint.

58
00:03:44,620 --> 00:03:45,360
Awesome.

59
00:03:45,580 --> 00:03:46,920
OK that looks pretty good.

60
00:03:47,230 --> 00:03:53,020
And you know what I'm also going to create a constraint or sorry an outlet for this view because we're

61
00:03:53,020 --> 00:03:59,380
going to need to add this view not only as a view that we can access but we're going to add some views

62
00:03:59,380 --> 00:04:00,040
on top of it.

63
00:04:00,040 --> 00:04:03,860
So let's just call this a pull up view.

64
00:04:04,350 --> 00:04:11,230
OK so now we can access both the map views bottom constraint as well as this current little tiny skinny

65
00:04:11,230 --> 00:04:12,110
view here.

66
00:04:12,490 --> 00:04:12,960
OK.

67
00:04:13,060 --> 00:04:17,260
So let's go set this up so that we can animate it and show it on the screen.

68
00:04:17,350 --> 00:04:22,570
To do that we're basically going to write two little functions and we're going to call them to animate

69
00:04:22,660 --> 00:04:29,470
up as soon as we drop a pin and then we're going to basically create a swipe gesture to animate it down

70
00:04:29,470 --> 00:04:31,260
when we swipe on the view.

71
00:04:31,420 --> 00:04:36,210
So let's go ahead and do that beneath add double tap our function.

72
00:04:36,220 --> 00:04:45,250
Go ahead and write phunk animate view up and inside this function we're first going to set the constraint

73
00:04:45,580 --> 00:04:47,470
to have a new constant.

74
00:04:47,500 --> 00:04:53,790
Now it's currently at zero meaning that wherever it's constrained that is it's kind of its base at home.

75
00:04:53,790 --> 00:04:58,870
So we're going to modify the constraint to move up a certain amount.

76
00:04:58,900 --> 00:05:05,380
So to do that go ahead and call map view bottom constraint constant and that is actually going to be

77
00:05:05,380 --> 00:05:06,560
equal to 300.

78
00:05:06,570 --> 00:05:12,830
We're going to make it move up 300 to give us a nice big view that we can load some images into.

79
00:05:13,170 --> 00:05:13,800
But you know what.

80
00:05:13,800 --> 00:05:14,580
Just calling.

81
00:05:14,580 --> 00:05:16,170
This is not good enough.

82
00:05:16,170 --> 00:05:19,910
We actually need to call a function that is a part of the view.

83
00:05:20,220 --> 00:05:22,230
And it's called lay out if needed.

84
00:05:22,230 --> 00:05:26,140
So let me go ahead and call that self dot view.

85
00:05:26,210 --> 00:05:27,630
Lay out if needed.

86
00:05:27,900 --> 00:05:33,330
And if you look at the information on this it says that it lays out the sub views immediately and it

87
00:05:33,330 --> 00:05:36,060
forces the layout of sub views before drawing.

88
00:05:36,450 --> 00:05:42,570
So we have updated the constant of this constraint and layout if needed is going to redraw everything

89
00:05:42,600 --> 00:05:44,950
and show what has changed.

90
00:05:44,970 --> 00:05:47,130
But we want it to be animated.

91
00:05:47,130 --> 00:05:49,800
We don't want it to just all of a sudden 300.

92
00:05:50,100 --> 00:05:56,760
So to do that we can just simply call you I view that animate with duration and you know let's move

93
00:05:56,760 --> 00:05:58,620
that up so we have a little bit of space.

94
00:05:58,620 --> 00:06:01,350
Let's do this over 0.3 seconds.

95
00:06:01,350 --> 00:06:07,380
And for the animations closure go ahead and just press enter and we're going to move out if needed.

96
00:06:07,380 --> 00:06:13,430
Inside that closure I just cut it and pasted it inside the closure of you I've you animate with the

97
00:06:13,430 --> 00:06:14,260
station.

98
00:06:14,400 --> 00:06:17,900
So this alone should animate our view up.

99
00:06:17,940 --> 00:06:21,630
And like I said earlier we're going to animate this when we drop a pin.

100
00:06:21,630 --> 00:06:29,670
So let's go call it where we drop our pin right here drop pin down to sew beneath remove pin call animate

101
00:06:29,670 --> 00:06:36,900
view up and I want to go see if it worked let's go try it build and run find your simulator and as soon

102
00:06:36,900 --> 00:06:40,410
as it pulls up we should be able to drop a pin and animate our view.

103
00:06:40,410 --> 00:06:42,360
Let's see how we did.

104
00:06:42,380 --> 00:06:44,720
OK so we've got ourselves a problem here.

105
00:06:44,750 --> 00:06:50,430
It looks like our view is now covering our screen so we need to go do some fixes to our auto layout.

106
00:06:50,510 --> 00:06:53,970
Let's think of let's think about what we have done wrong.

107
00:06:54,110 --> 00:07:00,440
Top basis is pinned to the top leading and trailing are pinned to the Super view bottom space is pinned

108
00:07:00,470 --> 00:07:01,880
to the pull up view.

109
00:07:02,120 --> 00:07:03,340
OK that looks good.

110
00:07:03,620 --> 00:07:09,650
Now let's look at the pull up view bottom space is good.

111
00:07:10,160 --> 00:07:11,850
Oh you know what.

112
00:07:12,320 --> 00:07:12,650
That's good.

113
00:07:12,650 --> 00:07:16,100
Yes should be to the supervisor of leading spaces they're trailing spaces there.

114
00:07:16,100 --> 00:07:16,960
That's good.

115
00:07:17,180 --> 00:07:24,700
Top space is to the map view and the top space to the button is also there.

116
00:07:24,860 --> 00:07:26,760
That looks fine.

117
00:07:27,590 --> 00:07:36,220
So you know what I think the issue is that in the map view itself does not have a fixed height and the

118
00:07:36,230 --> 00:07:41,450
pull up view does not have a fixed height so it's not sure how tall or short it should make either of

119
00:07:41,450 --> 00:07:42,190
these.

120
00:07:42,200 --> 00:07:48,480
So I think instead what we're going to do I'm going to I'm going to make some changes here on the fly.

121
00:07:48,650 --> 00:07:53,630
Let's go ahead and go back into our view controller sorry I open the assistant editor there and I pulled

122
00:07:53,630 --> 00:07:54,860
open the view controller.

123
00:07:54,860 --> 00:07:58,370
I'm going to get rid of this constraint here.

124
00:07:58,520 --> 00:08:08,440
And I'm also going to go in and find that constraint which is here or not here maybe it's let's see

125
00:08:08,450 --> 00:08:09,950
well it's this one here if I right click.

126
00:08:09,950 --> 00:08:14,990
Yet still referencing that so I'm going to get rid of it so we don't have a crash and instead of doing

127
00:08:15,020 --> 00:08:21,210
that I think what I'm going to do is I'm going to look for pull up view top and I'm going to actually

128
00:08:21,210 --> 00:08:23,300
animate that constraint.

129
00:08:23,580 --> 00:08:25,370
OK.

130
00:08:25,740 --> 00:08:27,000
No that's not true.

131
00:08:27,000 --> 00:08:30,990
You know what I should do I should give it a constraint for height and then we should animate the height

132
00:08:30,990 --> 00:08:31,810
constraint.

133
00:08:31,860 --> 00:08:32,740
Let's do that.

134
00:08:32,970 --> 00:08:37,310
So I'm going to go ahead and give this a height of 1.

135
00:08:37,690 --> 00:08:38,160
OK.

136
00:08:38,190 --> 00:08:39,230
That looks great.

137
00:08:39,480 --> 00:08:45,210
And now when I come in here I can find that constraint by going into the constraints for pull up view.

138
00:08:45,330 --> 00:08:53,130
And here's our height constraint we can right click and drag and I can call this pull up view height

139
00:08:53,310 --> 00:08:55,120
constraint.

140
00:08:55,290 --> 00:08:56,370
All right there we go.

141
00:08:56,370 --> 00:09:02,760
So now what I can do is I can go back and fix that function that we wrote in Matt Visi animate view

142
00:09:02,760 --> 00:09:04,310
up let's find it.

143
00:09:04,390 --> 00:09:05,310
There it is.

144
00:09:05,310 --> 00:09:10,230
OK so obviously you can't find that anymore but we're going to call pull up view height constraint and

145
00:09:10,230 --> 00:09:14,210
we're going to change it from one all the way to 300.

146
00:09:14,220 --> 00:09:21,060
So when I build and run this now based on our changes we have a height constraint Now that's keeping

147
00:09:21,060 --> 00:09:22,620
this out one pixel.

148
00:09:22,830 --> 00:09:26,570
And then we're modifying it as we open that little tray.

149
00:09:26,580 --> 00:09:30,330
Now it looks like our button is out of place now we'll fix that.

150
00:09:30,330 --> 00:09:33,810
But for now let's double click and see if it animates.

151
00:09:33,870 --> 00:09:34,920
All right.

152
00:09:34,920 --> 00:09:38,570
Awesome so it drops a pin it animates up.

153
00:09:38,820 --> 00:09:39,490
Great.

154
00:09:39,930 --> 00:09:41,480
Yeah that's awesome That's exactly right.

155
00:09:41,490 --> 00:09:43,340
That's perfect.

156
00:09:43,350 --> 00:09:48,740
So let's fix our button then really quickly it looks like we no longer have a bottom constraint.

157
00:09:48,750 --> 00:09:50,670
So let's click the pin button.

158
00:09:50,820 --> 00:09:55,860
Let's pin it to the bottom and you know what it's actually going to pin it perfectly 20 to the pull

159
00:09:55,860 --> 00:09:59,430
up view so that when we slide it up the button is going to move with the map view.

160
00:09:59,670 --> 00:10:03,180
Let's go ahead and build and run it again let's just make sure that we fix that problem.

161
00:10:05,230 --> 00:10:05,880
There we go.

162
00:10:05,890 --> 00:10:06,510
OK great.

163
00:10:06,520 --> 00:10:09,290
Let's drop a pen and see if it moves with it.

164
00:10:10,340 --> 00:10:10,940
Beautiful.

165
00:10:10,940 --> 00:10:11,390
OK good.

166
00:10:11,400 --> 00:10:15,730
So the pin drops the button moves and the view animates up.

167
00:10:15,740 --> 00:10:17,550
That's exactly what we want.

168
00:10:17,600 --> 00:10:23,160
But now we need to basically set it up so that when we swipe down on this view it hides.

169
00:10:23,180 --> 00:10:28,970
That's just a pretty common interaction and it's really easy actually to add such a thing.

170
00:10:29,240 --> 00:10:32,720
So I'm going to put this beneath and double tap.

171
00:10:32,720 --> 00:10:41,090
I'm going to type func and swipe and in add swipe what I'm going to do is I'm going to create a UI swipe

172
00:10:41,120 --> 00:10:42,200
gesture recognizer.

173
00:10:42,200 --> 00:10:48,690
This allows us to take note of a swipe gesture on the screen either up down left or right.

174
00:10:48,740 --> 00:10:55,130
So go ahead and type let swipe and that's going to be you swipe gesture recognizer and just like the

175
00:10:55,160 --> 00:11:02,240
tap gesture it has a target and an action so the target of course is self and the action is going to

176
00:11:02,240 --> 00:11:04,500
be animate view down.

177
00:11:04,520 --> 00:11:05,750
But we don't have that yet.

178
00:11:05,750 --> 00:11:08,990
We haven't written the function to animate the view down.

179
00:11:08,990 --> 00:11:09,760
To do that.

180
00:11:09,800 --> 00:11:15,970
Go ahead and just write it really quickly it's just like the one above phunk animate view down.

181
00:11:16,490 --> 00:11:19,070
And then we're going to call the constraint.

182
00:11:19,310 --> 00:11:22,760
We're going to set the constant to zero so that it's totally hidden.

183
00:11:23,030 --> 00:11:25,230
And then we're going to animate layout if needed.

184
00:11:25,310 --> 00:11:30,170
Go ahead and type you I view that animate with the ration 0.3.

185
00:11:30,350 --> 00:11:35,390
And in the closure layout if needed I'm moving a little faster because we've already done this.

186
00:11:35,540 --> 00:11:38,260
But for the selector that's exactly what we need.

187
00:11:38,260 --> 00:11:41,790
So type hash tag selector hey.

188
00:11:42,320 --> 00:11:43,760
And in the parentheses.

189
00:11:43,760 --> 00:11:45,920
Go ahead and call animate view down.

190
00:11:45,950 --> 00:11:46,300
OK.

191
00:11:46,310 --> 00:11:51,200
And that will show up nice in green because we're calling it like calling the function there whenever

192
00:11:51,200 --> 00:11:53,420
the selector is done.

193
00:11:53,450 --> 00:11:56,640
Now it's going to give us an error saying that it's not exposed to Objective-C.

194
00:11:56,660 --> 00:11:57,750
Click Fix.

195
00:11:57,770 --> 00:12:01,900
It adds that in just like it needed to with the other function dropped pin.

196
00:12:02,030 --> 00:12:03,190
That's fine.

197
00:12:03,200 --> 00:12:05,180
Now we need to set the settings for Swype.

198
00:12:05,180 --> 00:12:08,640
So let's go ahead and call Swype direction.

199
00:12:08,990 --> 00:12:15,020
And you can pull from an enum called you I swipe gesture recognizer direction select down and that will

200
00:12:15,020 --> 00:12:16,920
allow us to swipe down.

201
00:12:16,940 --> 00:12:22,910
Now of course just like the tap gesture it's not really any use to us unless we actually add the gesture

202
00:12:22,910 --> 00:12:26,200
recognizer So we're going to add it to the pull up view.

203
00:12:26,230 --> 00:12:33,110
So call pull up view and then add gesture recognizer and pass that swipe.

204
00:12:33,110 --> 00:12:38,960
OK so when we add the swipe we can just swipe down and it will animate the view down.

205
00:12:38,960 --> 00:12:43,420
So you know what we're actually going to add this in the same spot that we add.

206
00:12:43,460 --> 00:12:49,370
The view here when we animate it up we're going to add the swipe.

207
00:12:49,540 --> 00:12:50,180
OK.

208
00:12:50,420 --> 00:12:54,140
So it doesn't really make sense to add it until then because as soon as it's visible that's when we

209
00:12:54,140 --> 00:12:55,570
should be able to swipe it.

210
00:12:55,970 --> 00:13:01,940
So let's go ahead and build and run let's see if what we added here makes a cool interaction.

211
00:13:01,940 --> 00:13:07,070
We should be able to double tap showed the view like before but this time when we swipe down it should

212
00:13:07,130 --> 00:13:08,960
animate down and hide out of the way.

213
00:13:08,990 --> 00:13:12,830
So double click is our view and let's swipe down.

214
00:13:14,220 --> 00:13:14,670
Nothing.

215
00:13:14,730 --> 00:13:15,510
Oh no it did.

216
00:13:15,510 --> 00:13:16,400
It just was a little delay.

217
00:13:16,410 --> 00:13:20,700
Let's try it again shows and then we swipe and hides.

218
00:13:20,790 --> 00:13:22,140
So cool.

219
00:13:22,140 --> 00:13:22,350
All right.

220
00:13:22,350 --> 00:13:23,610
So that's perfect.

221
00:13:23,610 --> 00:13:29,250
Now let's go ahead and let's add the spinner and let's add the label so that we can give the user a

222
00:13:29,250 --> 00:13:34,650
clue of what's happening the label will update saying 1 out of 40 images downloaded 2 out of 40 images

223
00:13:34,650 --> 00:13:35,030
downloaded.

224
00:13:35,040 --> 00:13:39,710
It'll update every time so the user has a clue of what's going on and the spinner just indicates that

225
00:13:39,720 --> 00:13:41,090
something is loading.

226
00:13:41,460 --> 00:13:46,980
So in order to do this we're actually going to create some variables appear at the top and then we will

227
00:13:46,980 --> 00:13:48,990
instantiate them as soon as we need them.

228
00:13:48,990 --> 00:13:52,140
This makes it easy for us to manage and remove them at will.

229
00:13:52,350 --> 00:13:56,790
Instead of having to cycle through all of the sub views and a certain view and then remove the one with

230
00:13:56,790 --> 00:14:01,640
a certain tag it's much easier just to create an instance of it and then remove that instance.

231
00:14:01,650 --> 00:14:05,790
So let's create a spinner by typing var spinner.

232
00:14:06,840 --> 00:14:10,440
And that's going to be of type UI activity indicator view.

233
00:14:10,440 --> 00:14:15,270
Now we're going to put a question mark because we do not have a value yet for this we're going to instantiate

234
00:14:15,270 --> 00:14:16,190
it later on.

235
00:14:16,710 --> 00:14:23,430
And then after this go ahead and type var label or we'll let's let's be more descriptive.

236
00:14:23,430 --> 00:14:27,570
Progress label of type I label.

237
00:14:27,640 --> 00:14:28,360
All right.

238
00:14:28,650 --> 00:14:29,430
So we have these.

239
00:14:29,430 --> 00:14:34,230
Now let's go instantiate them with some functions.

240
00:14:34,230 --> 00:14:37,320
We're going to call these functions as soon as we need these labels.

241
00:14:37,480 --> 00:14:41,460
And so let's go ahead and do this actually beneath animate view down.

242
00:14:41,850 --> 00:14:47,190
Let's go ahead and write phunk add spinner.

243
00:14:48,450 --> 00:14:53,540
And the spinner of course is going to be instantiated at this point.

244
00:14:53,610 --> 00:14:59,780
So type spinner equals UI activity indicator view and give it a parentheses there to instantiate it.

245
00:14:59,850 --> 00:15:01,510
Make an instance of it.

246
00:15:01,560 --> 00:15:04,670
Now for the spinner there are a couple properties that we have to set.

247
00:15:04,680 --> 00:15:09,420
We have to give it a center a style a color and we have to start animating.

248
00:15:09,420 --> 00:15:14,390
So go ahead and do that by typing spinner dot center.

249
00:15:14,640 --> 00:15:19,740
And we want this let's think about where we want it we want it to be right in the center of this view

250
00:15:19,740 --> 00:15:21,150
that's animated up.

251
00:15:21,270 --> 00:15:27,450
So to do that we're going to go ahead and type C.G. point because remember that's the center of a spinner

252
00:15:27,460 --> 00:15:29,040
you can't see it until I'm done typing this.

253
00:15:29,040 --> 00:15:34,860
But the center is of type C-g pointed to a specific point on our screen and the C-g point that we're

254
00:15:34,860 --> 00:15:41,530
going to use is going to be called using an X and a Y value.

255
00:15:41,550 --> 00:15:47,280
Now I think that it would be great if we could get the screen size and then divide that by two to get

256
00:15:47,280 --> 00:15:47,890
the middle.

257
00:15:48,060 --> 00:15:50,150
But we don't really have a way of monitoring that.

258
00:15:50,150 --> 00:15:55,840
So I'm actually going to create another property up here called screen size.

259
00:15:56,040 --> 00:16:04,770
So go ahead and type bar screen size like that and it's going to be equal to you I screen main dot dot

260
00:16:04,830 --> 00:16:05,890
bounds.

261
00:16:05,970 --> 00:16:06,660
OK.

262
00:16:07,020 --> 00:16:12,780
Now that's going to be our screen and we can use this rectangle to divide our screen in half and find

263
00:16:12,780 --> 00:16:13,730
the middle.

264
00:16:13,740 --> 00:16:22,920
So for our center go ahead and type screen size with the width of the screen divided by two and that

265
00:16:22,920 --> 00:16:25,790
will put the start of the frame right here in the middle.

266
00:16:25,800 --> 00:16:28,060
But we actually need to move it back.

267
00:16:28,230 --> 00:16:34,080
Now something we need to do to move it back is to basically cut the spinner in half and move it half

268
00:16:34,080 --> 00:16:41,550
of how wide it is and to do that we can go ahead and just type minus spinner frame that width divided

269
00:16:41,550 --> 00:16:43,860
by divided by two.

270
00:16:43,860 --> 00:16:48,480
Now if you know anything about the order of operations you know we may have some problems here so let's

271
00:16:48,480 --> 00:16:54,600
go ahead and put these division operations inside of their own parentheses so that we are actually subtracting

272
00:16:54,600 --> 00:16:56,160
the proper values.

273
00:16:56,250 --> 00:17:00,160
This way it's going to move it to be exactly in the center of our frame.

274
00:17:00,450 --> 00:17:05,110
Now we're missing a y value here but we already know that our spinner should be in the center.

275
00:17:05,160 --> 00:17:09,150
This is 300 tall so the center should be 150.

276
00:17:09,210 --> 00:17:13,530
If that's the middle of 300 we should put it at 150.

277
00:17:13,530 --> 00:17:14,750
All right cool.

278
00:17:14,760 --> 00:17:18,600
Now that looks great we have a center and we're getting an error.

279
00:17:18,600 --> 00:17:20,160
So what is the problem.

280
00:17:20,760 --> 00:17:25,440
OK so our spinner is optional at that time but as soon as we instantiate it it will have a frame.

281
00:17:25,470 --> 00:17:29,490
So we're going to go ahead and force unwrap it by putting it in parentheses and then unwrapping it.

282
00:17:29,550 --> 00:17:30,780
That's great.

283
00:17:30,780 --> 00:17:36,170
Now let's go ahead and let's give it a style spinner activity indicator view style.

284
00:17:36,180 --> 00:17:37,450
We're going to do white large.

285
00:17:37,450 --> 00:17:39,900
This makes a nice big spinner.

286
00:17:39,900 --> 00:17:44,110
Let's give it a color because we don't want it to just be white because the background is white.

287
00:17:44,130 --> 00:17:49,520
So let's go ahead and give it a color literal and let's set the color literal to be dark gray.

288
00:17:49,890 --> 00:17:51,210
Awesome.

289
00:17:51,210 --> 00:17:56,080
And let's go ahead and get started animating spinner dot start animating.

290
00:17:56,340 --> 00:18:02,460
So as soon as this is done it will be spinning it will look nice.

291
00:18:02,460 --> 00:18:04,630
The only issue though is just like everything else.

292
00:18:04,710 --> 00:18:09,860
It's no good unless we have actually added it to our screen and we have not yet.

293
00:18:09,870 --> 00:18:12,260
So we need to go ahead and do that.

294
00:18:12,450 --> 00:18:18,510
Let's add it to our pull up view so go ahead and type pull up view add sub view and we're going to add

295
00:18:18,510 --> 00:18:19,180
the spinner.

296
00:18:19,440 --> 00:18:24,890
So whenever we call add spinner it will be added right in the center it'll be gray and it'll be animating.

297
00:18:25,230 --> 00:18:28,030
Of course we need to unwrap it because it was optional.

298
00:18:28,500 --> 00:18:32,160
And now let's add it when we drop a pin we swipe up.

299
00:18:32,160 --> 00:18:36,450
Let's go ahead and add a spinner and let's go build and run to see if this worked.

300
00:18:36,450 --> 00:18:38,430
I think we're going to have to call this video quits.

301
00:18:38,550 --> 00:18:43,530
We'll add the label in the next video as well as some other stuff we'll have to we'll have to rearrange

302
00:18:43,530 --> 00:18:45,670
some of these things when we add the collection view.

303
00:18:45,780 --> 00:18:49,590
But this will at least give us a clue as to whether we're doing this right with spinner.

304
00:18:49,590 --> 00:18:55,560
So let's go ahead and double tap and look at that perfect a spinner right in the center.

305
00:18:55,740 --> 00:18:56,660
That looks awesome.

306
00:18:56,730 --> 00:19:01,440
But you'll notice if I click another pin there's another spinner there's another spinner another spinner

307
00:19:01,470 --> 00:19:04,590
and soon you can't really tell if there's a spinner there or not.

308
00:19:04,620 --> 00:19:08,820
That's because we're adding one every time we're going to write a function in the next video that will

309
00:19:08,820 --> 00:19:14,550
remove the spinner and add a new one every time that we click this so that we don't have a multitude

310
00:19:14,550 --> 00:19:18,990
of spinners that will be a much much much better way of doing that.

311
00:19:18,990 --> 00:19:21,770
So in the next video we're going to add are you I label.

312
00:19:21,780 --> 00:19:23,330
We're going to add our collection view.

313
00:19:23,340 --> 00:19:28,230
We're going to just basically make it so that this is a nice very smooth user interface without any

314
00:19:28,230 --> 00:19:30,030
extra components or anything like that.

315
00:19:30,030 --> 00:19:33,770
So great job with this video and we'll see in the next one.