1 00:00:08,190 --> 00:00:13,530 Hey guys this is Caleb with Dev slopes and in this video we're going to create an animated view that 2 00:00:13,530 --> 00:00:14,360 slides up. 3 00:00:14,400 --> 00:00:17,230 We already created The View earlier but we're going to animate it up. 4 00:00:17,400 --> 00:00:18,740 We're going to animate it down. 5 00:00:18,750 --> 00:00:25,170 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,170 --> 00:00:27,660 going to download in a later video. 7 00:00:27,660 --> 00:00:31,930 So let's go ahead and let's look at where we were at last time. 8 00:00:32,010 --> 00:00:38,430 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,490 --> 00:00:41,960 centers and animate to wherever that pin is dropped. 10 00:00:41,970 --> 00:00:46,230 When you drop a new pin it removes the old pin and adds a new one. 11 00:00:46,230 --> 00:00:50,640 Then when you click the center button it centers you back on your current location. 12 00:00:50,640 --> 00:00:51,730 Pretty cool. 13 00:00:51,870 --> 00:00:55,600 And let's go ahead and pull open our tax code project to get started. 14 00:00:55,800 --> 00:01:02,660 So in this lesson we are going to animate that view so that it is showing. 15 00:01:02,940 --> 00:01:07,400 But before we do that we need to actually create some Iby outlets first. 16 00:01:07,410 --> 00:01:09,940 So let's go into our main storyboard. 17 00:01:10,170 --> 00:01:16,780 Let's open up the assistant editor make sure everything is visible and make sure this is on automatic. 18 00:01:16,830 --> 00:01:19,610 I'm also going to close this so I have some extra room. 19 00:01:19,830 --> 00:01:23,170 And do you remember that we hid a little view down here. 20 00:01:23,340 --> 00:01:28,470 It's very small it's out of the way but it's really important to actually. 21 00:01:28,500 --> 00:01:36,660 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,660 --> 00:01:43,440 as the top space is pinned to the bottom layout of the screen and the top spaces also pinned to the 23 00:01:43,440 --> 00:01:43,840 map view. 24 00:01:43,860 --> 00:01:47,500 But you know what for what we want to do that's not going to work. 25 00:01:47,550 --> 00:01:53,220 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,220 --> 00:01:55,550 view to the bottom layout. 27 00:01:55,590 --> 00:02:00,900 So if I add that constraint you'll see that it actually is still doing the same thing. 28 00:02:00,930 --> 00:02:02,040 Oh you know what. 29 00:02:02,070 --> 00:02:04,140 That's because this has a height of zero. 30 00:02:04,140 --> 00:02:08,580 We need to give it a height of 1 because basically if it has a height of zero of the top and the bottom 31 00:02:08,580 --> 00:02:09,780 are exactly the same. 32 00:02:09,960 --> 00:02:11,190 Let's try that again. 33 00:02:11,320 --> 00:02:12,510 Attic constraint. 34 00:02:12,600 --> 00:02:16,050 Let's make it zero from the bottom. 35 00:02:16,050 --> 00:02:20,910 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,910 --> 00:02:22,260 to which is awesome. 37 00:02:22,710 --> 00:02:26,610 The top space goes to the bottom of the map view. 38 00:02:26,820 --> 00:02:30,810 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,810 --> 00:02:31,660 one right here. 40 00:02:32,010 --> 00:02:36,450 That's exactly what we want because basically what we're going to do and I don't know if you know you 41 00:02:36,450 --> 00:02:39,990 can do this but we're going to animate this constraint. 42 00:02:40,140 --> 00:02:44,910 That's kind of an easy way for us to do this animation is just to simply animate the constraint. 43 00:02:44,910 --> 00:02:50,250 This button is already in place and if you look it's bottom space is paying attention to the bottom 44 00:02:50,250 --> 00:02:50,940 layout. 45 00:02:51,000 --> 00:02:52,410 We actually need to change that. 46 00:02:52,440 --> 00:02:58,960 So let's do that by going ahead and let's set this so that it is up here. 47 00:02:59,010 --> 00:03:00,210 Let's pin it again. 48 00:03:00,420 --> 00:03:04,900 But let's turn off constrained to margins and let's add one constraint. 49 00:03:04,950 --> 00:03:08,550 Now you'll notice the bottom space now is to the view. 50 00:03:08,550 --> 00:03:14,700 So when the view slides up the button will move as well by having constrained to margins that pays attention 51 00:03:14,700 --> 00:03:16,470 to the actual margins of the screen. 52 00:03:16,770 --> 00:03:25,470 And we don't want that so let's go ahead and let's create a an IB outlet for our bottom constraint here 53 00:03:25,530 --> 00:03:28,510 and you'll look I found the right one by clicking down on the bottom. 54 00:03:28,770 --> 00:03:32,540 And this is the view up top and not view dot bottom constraint. 55 00:03:32,790 --> 00:03:39,420 And so to create an IP outlet I'm going to right click drag and then I'm going to name this map view 56 00:03:40,470 --> 00:03:44,590 map view bottom constraint. 57 00:03:44,670 --> 00:03:45,410 Awesome. 58 00:03:45,630 --> 00:03:47,210 OK that looks pretty good. 59 00:03:47,280 --> 00:03:53,070 And you know what I'm also going to create a constraint or sorry an outlet for this view because we're 60 00:03:53,070 --> 00:03:59,430 going to need to add this view not only as a view that we can access but we're going to add some views 61 00:03:59,430 --> 00:04:00,090 on top of it. 62 00:04:00,090 --> 00:04:03,910 So let's just call this a pull up view. 63 00:04:04,410 --> 00:04:11,280 OK so now we can access both the map views bottom constraint as well as this current little tiny skinny 64 00:04:11,280 --> 00:04:12,530 view here. 65 00:04:12,540 --> 00:04:12,960 OK. 66 00:04:13,110 --> 00:04:17,310 So let's go set this up so that we can animate it and show it on the screen. 67 00:04:17,400 --> 00:04:22,620 To do that we're basically going to write two little functions and we're going to call them to animate 68 00:04:22,710 --> 00:04:29,520 up as soon as we drop a pin and then we're going to basically create a swipe gesture to animate it down 69 00:04:29,520 --> 00:04:31,310 when we swipe on the view. 70 00:04:31,470 --> 00:04:33,860 So let's go ahead and do that. 71 00:04:33,930 --> 00:04:36,260 Beneath add double tap our function. 72 00:04:36,270 --> 00:04:45,300 Go ahead and write phunk animate view up and inside this function we're first going to set the constraint 73 00:04:45,630 --> 00:04:47,550 to have a new constant. 74 00:04:47,550 --> 00:04:53,850 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,850 --> 00:04:58,950 So we're going to modify the constraint to make move up a certain amount. 76 00:04:58,980 --> 00:05:05,430 So to do that go ahead and call map view bottom constraint constant and that is actually going to be 77 00:05:05,430 --> 00:05:06,600 equal to 300. 78 00:05:06,600 --> 00:05:12,880 We're going to move up 300 to give us a nice big view that we can load some images into. 79 00:05:13,200 --> 00:05:13,830 But you know what. 80 00:05:13,830 --> 00:05:14,630 Just calling. 81 00:05:14,630 --> 00:05:16,230 This is not good enough. 82 00:05:16,230 --> 00:05:19,980 We actually need to call a function that is a part of the view. 83 00:05:20,280 --> 00:05:22,230 And it's called lay out if needed. 84 00:05:22,260 --> 00:05:26,220 So let me go ahead and call that self dot view. 85 00:05:26,270 --> 00:05:27,680 Lay out if needed. 86 00:05:27,960 --> 00:05:33,390 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,390 --> 00:05:36,120 forces the layout of sub views before drawing. 88 00:05:36,510 --> 00:05:42,630 So we have updated the constant of this constraint and layout if needed is going to redraw everything 89 00:05:42,660 --> 00:05:45,020 and show what has changed. 90 00:05:45,030 --> 00:05:47,190 But we want it to be animated. 91 00:05:47,190 --> 00:05:50,080 We don't want it to just all of a sudden 300. 92 00:05:50,130 --> 00:05:56,790 So to do that we can just simply call you I view that animate with duration and you don't let's move 93 00:05:56,790 --> 00:05:58,670 that up so we have a little bit of space. 94 00:05:58,680 --> 00:06:05,430 Let's do this over 0.3 seconds and for the animations closure go ahead and just press enter and we're 95 00:06:05,430 --> 00:06:07,440 going to move out if needed. 96 00:06:07,440 --> 00:06:14,450 Inside that closure I just cut it and pasted it inside the closure of you I've you animate with duration. 97 00:06:14,460 --> 00:06:17,960 So this alone should animate our view up. 98 00:06:18,000 --> 00:06:21,690 And like I said earlier we're going to animate this when we drop a pin. 99 00:06:21,690 --> 00:06:29,730 So let's go call it where we drop our pin right here drop pin down to so beneath remove pin call animate 100 00:06:29,730 --> 00:06:30,690 view up. 101 00:06:30,990 --> 00:06:37,170 And I want to go see if it works let's go try it build and run find your simulator and as soon as it 102 00:06:37,170 --> 00:06:40,410 pulls up we should be able to drop a pin and animate our view. 103 00:06:40,440 --> 00:06:41,480 Let's see how we did. 104 00:06:42,440 --> 00:06:44,750 OK so we've got ourselves a problem here. 105 00:06:44,780 --> 00:06:50,470 It looks like our view is now covering our screens so we need to go do some fixes to our auto layout. 106 00:06:50,540 --> 00:06:53,940 Let's think of let's think about what we have done wrong. 107 00:06:54,140 --> 00:07:00,140 Top spaces is pinned to the top leading and trailing are pinned to the Super view bottom in space is 108 00:07:00,140 --> 00:07:01,940 pinned to the pull up view. 109 00:07:02,180 --> 00:07:03,680 OK that looks good. 110 00:07:03,680 --> 00:07:09,680 Now let's look at the pull up view bottom space is good. 111 00:07:10,220 --> 00:07:11,950 Oh you know what. 112 00:07:12,190 --> 00:07:12,710 No that's good. 113 00:07:12,710 --> 00:07:13,770 Yes should be to the supervisor. 114 00:07:13,790 --> 00:07:17,240 Leading spaces they're trailing spaces there that's good. 115 00:07:17,240 --> 00:07:24,780 Top space is to the map view and the top space to the button is also there. 116 00:07:24,920 --> 00:07:26,820 That looks fine. 117 00:07:27,650 --> 00:07:36,290 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,290 --> 00:07:41,510 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,510 --> 00:07:42,220 these. 120 00:07:42,230 --> 00:07:48,550 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,710 --> 00:07:53,660 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,660 --> 00:07:54,920 open the view controller. 123 00:07:54,920 --> 00:07:58,400 I'm going to get rid of this constraint here. 124 00:07:58,550 --> 00:08:08,500 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,510 --> 00:08:10,010 well it's this one here if I right click. 126 00:08:10,010 --> 00:08:12,130 Yet still referencing that so I'm going to get rid of it. 127 00:08:12,140 --> 00:08:13,640 So we don't have a crash. 128 00:08:13,940 --> 00:08:20,450 And instead of doing that I think what I'm going to do is I'm going to look for pull up view top and 129 00:08:20,510 --> 00:08:23,360 I'm going to actually animate that constraint. 130 00:08:23,630 --> 00:08:25,420 OK. 131 00:08:25,790 --> 00:08:27,060 No that's not true. 132 00:08:27,080 --> 00:08:31,040 You know what I should do I should give it a constraint for height and then we should animate the height 133 00:08:31,040 --> 00:08:31,910 constraint. 134 00:08:31,910 --> 00:08:32,980 Let's do that. 135 00:08:33,020 --> 00:08:37,350 So I'm going to go ahead and give this a height of 1. 136 00:08:37,800 --> 00:08:39,280 Ok that looks great. 137 00:08:39,530 --> 00:08:45,260 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,380 --> 00:08:53,180 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,360 --> 00:08:55,350 constraint. 140 00:08:55,350 --> 00:08:56,420 All right there we go. 141 00:08:56,420 --> 00:09:02,810 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,810 --> 00:09:04,340 up let's find it. 143 00:09:04,440 --> 00:09:05,360 There it is. 144 00:09:05,360 --> 00:09:10,280 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,280 --> 00:09:14,300 we're going to change it from one all the way to 300. 146 00:09:14,300 --> 00:09:21,110 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,110 --> 00:09:22,880 this out one pixel. 148 00:09:22,880 --> 00:09:26,630 And then we're modifying it as we open that little tray. 149 00:09:26,630 --> 00:09:30,380 Now it looks like our button is out of place now we'll fix that. 150 00:09:30,380 --> 00:09:33,860 But for now let's double click and see if it animates. 151 00:09:33,920 --> 00:09:34,940 All right. 152 00:09:34,970 --> 00:09:38,620 Awesome so it drops a pin it animates up. 153 00:09:38,870 --> 00:09:39,580 Great. 154 00:09:40,010 --> 00:09:41,540 Yeah that's awesome That's exactly right. 155 00:09:41,540 --> 00:09:43,390 That's perfect. 156 00:09:43,400 --> 00:09:48,790 So let's fix our button then really quickly it looks like we no longer have a bottom constraint. 157 00:09:48,800 --> 00:09:50,870 So let's click the pin button. 158 00:09:50,870 --> 00:09:55,910 Let's pin it to the bottom and you know what it's actually going to pin it perfectly Tony to the pull 159 00:09:55,910 --> 00:09:59,460 up view so that when we slide it up the button is going to move with the map view. 160 00:09:59,720 --> 00:10:03,420 Let's go ahead and build and run it again let's just make sure that we fix that problem. 161 00:10:05,280 --> 00:10:05,930 There we go. 162 00:10:05,940 --> 00:10:06,570 OK great. 163 00:10:06,570 --> 00:10:09,320 Let's drop a pen and see if it moves with it. 164 00:10:10,390 --> 00:10:10,990 Beautiful. 165 00:10:10,990 --> 00:10:11,470 OK good. 166 00:10:11,470 --> 00:10:15,800 So the pen drops the button moves and the view animates up. 167 00:10:15,820 --> 00:10:17,600 That's exactly what we want. 168 00:10:17,650 --> 00:10:23,220 But now we need to basically set it up so that when we swipe down on this view it hides. 169 00:10:23,230 --> 00:10:29,040 That's just a pretty common interaction and it's really easy actually to add such a thing. 170 00:10:29,290 --> 00:10:32,770 So I'm going to put this beneath add double tap. 171 00:10:32,770 --> 00:10:40,570 I'm going to type phunk and swipe and in add swipe what I'm going to do is I'm going to create a UI 172 00:10:40,570 --> 00:10:42,250 swipe gesture recognizer. 173 00:10:42,250 --> 00:10:48,740 This allows us to take note of a swipe gesture on the screen either up down left or right. 174 00:10:48,790 --> 00:10:55,210 So go ahead and type let swipe and that's going to be you I swipe gesture recognizer and just like the 175 00:10:55,210 --> 00:11:02,290 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,290 --> 00:11:04,550 be animate view down. 177 00:11:04,570 --> 00:11:05,800 But we don't have that yet. 178 00:11:05,800 --> 00:11:09,040 We haven't written the function to animate the view down. 179 00:11:09,040 --> 00:11:09,810 To do that. 180 00:11:09,850 --> 00:11:15,740 Go ahead and just write it really quickly it's just like the one above phunk animate view down. 181 00:11:16,540 --> 00:11:19,360 And then we're going to call the constraint. 182 00:11:19,360 --> 00:11:22,880 We're going to set the constant to zero so that it's totally hidden. 183 00:11:23,080 --> 00:11:25,270 And then we're going to animate layout if needed. 184 00:11:25,360 --> 00:11:27,280 Go ahead and type you I view. 185 00:11:27,440 --> 00:11:30,230 Animate with the ration 0.3. 186 00:11:30,400 --> 00:11:35,470 And in the closure layout if needed I'm moving a little faster because we've already done this. 187 00:11:35,620 --> 00:11:38,320 But for the selector that's exactly what we need. 188 00:11:38,320 --> 00:11:41,900 So type hash tag selector hey. 189 00:11:42,400 --> 00:11:43,800 And in the parentheses. 190 00:11:43,810 --> 00:11:45,960 Go ahead and call animate view down. 191 00:11:46,000 --> 00:11:46,340 OK. 192 00:11:46,360 --> 00:11:51,250 And that will show up nice in green because we're calling it like calling the function there whenever 193 00:11:51,250 --> 00:11:53,480 the selector is done. 194 00:11:53,500 --> 00:11:56,690 Now it's going to give us an error saying that it's not exposed to Objective-C. 195 00:11:56,710 --> 00:11:57,800 Click Fix. 196 00:11:57,820 --> 00:12:01,930 It adds that in just like it needed to with the other function dropped pin. 197 00:12:02,080 --> 00:12:02,950 That's fine. 198 00:12:03,250 --> 00:12:05,230 Now we need to set the settings for Swype. 199 00:12:05,230 --> 00:12:08,690 So let's go ahead and call Swype direction. 200 00:12:09,040 --> 00:12:15,070 And you can pull from an enum called you I swipe gesture recognizer direction select down and that will 201 00:12:15,070 --> 00:12:16,970 allow us to swipe down. 202 00:12:16,990 --> 00:12:22,960 Now of course just like the tap gesture it's not really any use to us unless we actually add the gesture 203 00:12:22,960 --> 00:12:26,260 recognizers So we're going to add it to the pull up view. 204 00:12:26,260 --> 00:12:33,160 So call pull up view and then add gesture recognizer and pass it swipe. 205 00:12:33,160 --> 00:12:39,010 OK so when we add the swipe we can just swipe down and it will animate the view down. 206 00:12:39,010 --> 00:12:43,470 So you know what we're actually going to add this in the same spot that we add. 207 00:12:43,510 --> 00:12:49,410 The view here when we animate it up we're going to add the swipe. 208 00:12:49,590 --> 00:12:50,230 OK. 209 00:12:50,470 --> 00:12:54,190 So it doesn't really make sense to add it until then because as soon as it's visible that's when we 210 00:12:54,190 --> 00:12:56,020 should be able to swipe it. 211 00:12:56,020 --> 00:13:01,960 So let's go ahead and build and run let's see if what we added here makes a cool interaction. 212 00:13:01,990 --> 00:13:07,120 We should be able to double tap show the view like before but this time when we swipe down it should 213 00:13:07,180 --> 00:13:09,010 animate down and hide out of the way. 214 00:13:09,040 --> 00:13:12,880 So double click is our view and let's swipe down. 215 00:13:14,270 --> 00:13:14,720 Nothing. 216 00:13:14,780 --> 00:13:15,560 Oh no it did. 217 00:13:15,560 --> 00:13:16,460 It just was a little delay. 218 00:13:16,460 --> 00:13:20,770 Let's try it again shows and then we swipe and hides. 219 00:13:20,840 --> 00:13:22,190 So cool. 220 00:13:22,190 --> 00:13:23,690 All right so that's perfect. 221 00:13:23,690 --> 00:13:29,300 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,300 --> 00:13:34,700 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,700 --> 00:13:35,080 downloaded. 224 00:13:35,090 --> 00:13:39,770 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,770 --> 00:13:41,140 something is loading. 226 00:13:41,510 --> 00:13:47,030 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:47,030 --> 00:13:49,040 instantiate them as soon as we need them. 228 00:13:49,040 --> 00:13:52,190 This makes it easy for us to manage and remove them at will. 229 00:13:52,400 --> 00:13:56,840 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,840 --> 00:14:01,690 a certain tag it's much easier just to create an instance of it and then remove that instance. 231 00:14:01,700 --> 00:14:06,250 So let's create a spinner by typing var spinner. 232 00:14:06,890 --> 00:14:10,470 And that's going to be of type UI activity indicator view. 233 00:14:10,490 --> 00:14:15,320 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,320 --> 00:14:16,270 it later on. 235 00:14:16,760 --> 00:14:23,480 And then after this go ahead and type var label or will let's let's be more descriptive. 236 00:14:23,480 --> 00:14:27,120 Progress label of type I label. 237 00:14:27,600 --> 00:14:28,310 All right. 238 00:14:28,700 --> 00:14:29,480 So we have these. 239 00:14:29,480 --> 00:14:34,280 Now let's go instantiate them with some functions. 240 00:14:34,280 --> 00:14:37,210 We're going to call these functions as soon as we need these labels. 241 00:14:37,490 --> 00:14:41,520 And so let's go ahead and do this actually beneath animate view down. 242 00:14:41,900 --> 00:14:52,490 Let's go ahead and write phunk add spinner OK and the spinner of course is going to be instantiated 243 00:14:52,490 --> 00:14:53,420 at this point. 244 00:14:53,660 --> 00:14:59,830 So type spinner equals UI activity indicator view and give it a parentheses there to instantiate it. 245 00:14:59,900 --> 00:15:01,560 Make an instance of it. 246 00:15:01,610 --> 00:15:04,730 Now for the spinner there are a couple of properties that we have to set. 247 00:15:04,730 --> 00:15:09,470 We have to give it a center a style a color and we have to start animating. 248 00:15:09,470 --> 00:15:14,440 So go ahead and do that by typing spinner dot center. 249 00:15:14,690 --> 00:15:19,790 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,790 --> 00:15:21,200 that's animated up. 251 00:15:21,320 --> 00:15:27,530 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,530 --> 00:15:29,090 You can't see it until I'm done typing this. 253 00:15:29,090 --> 00:15:35,120 But the center is of type C-g point to a specific point on our screen and the C-g point that we're going 254 00:15:35,120 --> 00:15:41,580 to use is going to be called using an X and a Y value. 255 00:15:41,600 --> 00:15:47,330 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,330 --> 00:15:47,960 the middle. 257 00:15:48,110 --> 00:15:50,210 But we don't really have a way of monitoring that. 258 00:15:50,210 --> 00:15:56,090 So I'm actually going to create another property up here called screen size. 259 00:15:56,090 --> 00:16:04,820 So go ahead and type var screen size like that and it's going to be equal to you I screen main dot dot 260 00:16:04,880 --> 00:16:05,850 bounds. 261 00:16:06,020 --> 00:16:06,920 OK. 262 00:16:07,070 --> 00:16:12,830 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,830 --> 00:16:13,790 the middle. 264 00:16:13,790 --> 00:16:22,970 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,970 --> 00:16:25,840 will put the start of the frame right here in the middle. 266 00:16:25,850 --> 00:16:28,120 But we actually need to move it back. 267 00:16:28,280 --> 00:16:34,130 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,130 --> 00:16:41,930 of how wide it is and to do that we can go ahead and just type minus spinner frame width divided by 269 00:16:42,440 --> 00:16:43,910 divided by two. 270 00:16:43,910 --> 00:16:48,530 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,530 --> 00:16:54,650 go ahead and put these division operations inside of their own parentheses so that we are actually subtracting 272 00:16:54,650 --> 00:16:56,300 the proper values. 273 00:16:56,300 --> 00:17:00,490 This way it's going to move it to be exactly in the center of our frame. 274 00:17:00,500 --> 00:17:05,210 Now we're missing a y value here but we already know that our spinner should be in the center. 275 00:17:05,210 --> 00:17:09,200 This is 300 tall so the center should be 150. 276 00:17:09,260 --> 00:17:13,580 If that's the middle of 300 we should put it at 150. 277 00:17:13,580 --> 00:17:14,810 All right cool. 278 00:17:14,810 --> 00:17:16,510 Now that looks great. 279 00:17:16,510 --> 00:17:18,650 We have a center and we're getting an error. 280 00:17:18,650 --> 00:17:20,210 So what is the problem. 281 00:17:20,810 --> 00:17:23,000 OK so our spinner is optional at that time. 282 00:17:23,000 --> 00:17:25,480 But as soon as we instantiate it it will have a frame. 283 00:17:25,520 --> 00:17:29,540 So we're going to go ahead and force unwrap it by putting it in parentheses and then unwrapping it. 284 00:17:29,600 --> 00:17:30,830 That's great. 285 00:17:30,830 --> 00:17:36,230 Now let's go ahead and let's give it a style spinner activity indicator view style. 286 00:17:36,230 --> 00:17:37,010 We're going to do white. 287 00:17:37,010 --> 00:17:37,490 Large. 288 00:17:37,490 --> 00:17:39,920 This makes a nice big spinner. 289 00:17:39,950 --> 00:17:44,170 Let's give it a color because we don't want it to just be white because the background is white. 290 00:17:44,180 --> 00:17:49,570 So let's go ahead and give it a color literal and let's set the color literal to be dark gray. 291 00:17:49,940 --> 00:17:50,850 Awesome. 292 00:17:51,260 --> 00:17:56,340 And let's go ahead and let's start at animating spinner does it start animating. 293 00:17:56,390 --> 00:18:02,510 So as soon as this is done it will be spinning it will look nice. 294 00:18:02,510 --> 00:18:04,690 The only issue though is just like everything else. 295 00:18:04,790 --> 00:18:09,910 It's no good unless we have actually added it to our screen and we have not yet. 296 00:18:09,920 --> 00:18:11,930 So we need to go ahead and do that. 297 00:18:12,500 --> 00:18:18,560 Let's add it to our pull up view so go ahead and type pull up view add add view and we're going to add 298 00:18:18,560 --> 00:18:19,250 the spinner. 299 00:18:19,520 --> 00:18:24,940 So whenever we call add spinner it will be added right in the center it'll be gray and it'll be animating. 300 00:18:25,280 --> 00:18:28,060 Of course we need to unwrap it because it was optional. 301 00:18:28,550 --> 00:18:32,230 And now let's add it when we drop a pin we swipe up. 302 00:18:32,240 --> 00:18:36,950 Let's go ahead and add a spinner and let's go build and run to see if this worked I think we're going 303 00:18:36,950 --> 00:18:38,570 to have to call this video quits. 304 00:18:38,600 --> 00:18:43,610 We'll add the label in the next video as well as some other stuff we'll have to we'll have to rearrange 305 00:18:43,610 --> 00:18:45,720 some of these things when we add the collection view. 306 00:18:45,830 --> 00:18:49,640 But this will at least give us a clue as to whether we're doing this right with spinner. 307 00:18:49,640 --> 00:18:55,780 So let's go ahead and double tap and look at that perfect a spinner right in the center. 308 00:18:55,790 --> 00:18:56,730 That looks awesome. 309 00:18:56,780 --> 00:19:01,490 But you'll notice if I click another pin there's another spinner there's another spinner another spinner 310 00:19:01,520 --> 00:19:04,640 and soon you can't really tell if there's a spinner there or not. 311 00:19:04,670 --> 00:19:08,870 That's because we're adding one every time we're going to write a function in the next video that will 312 00:19:08,870 --> 00:19:14,600 remove the spinner and add a new one every time that we click this so that we don't have a multitude 313 00:19:14,600 --> 00:19:19,040 of spinners that will be a much much much better way of doing that. 314 00:19:19,040 --> 00:19:21,830 So in the next video we're going to add our I label. 315 00:19:21,830 --> 00:19:23,380 We're going to add our collection view. 316 00:19:23,390 --> 00:19:28,280 We're going to just basically make it so that this is a nice very smooth user interface without any 317 00:19:28,280 --> 00:19:30,050 extra components or anything like that. 318 00:19:30,050 --> 00:19:33,410 So great job with this video and we'll see in the next one.