1 00:00:07,700 --> 00:00:12,370 Hey hey guys this is Caleb with Dev's slopes dot com and can you believe it. 2 00:00:12,380 --> 00:00:17,930 This is our last video in the map kit section and it's not even about MAP kit. 3 00:00:18,020 --> 00:00:20,570 We're going to be actually integrating 3D touch. 4 00:00:20,570 --> 00:00:29,120 This is a cool extra bonus for this app where we're going to basically allow for 3D touch to be pressed 5 00:00:30,020 --> 00:00:35,810 where we're basically going to allow for the images on the collection view to be pressed with a little 6 00:00:35,810 --> 00:00:42,020 bit of force and you can peek at the content and then a firmer press pops it onto that pop Visi that 7 00:00:42,020 --> 00:00:42,530 we created. 8 00:00:42,530 --> 00:00:44,990 It's very very cool and it's super easy. 9 00:00:44,990 --> 00:00:49,010 So I wanted to show you to make sure that you guys could integrate this into this app because it just 10 00:00:49,100 --> 00:00:53,090 adds something very special to it that I think you're really going to like. 11 00:00:53,090 --> 00:00:55,910 So go ahead and pull open your X code project. 12 00:00:55,910 --> 00:00:57,360 I love doing that. 13 00:00:57,360 --> 00:00:59,240 It's like I have the force anyway. 14 00:00:59,240 --> 00:01:05,270 So yeah pull up your next code project and we're going to actually start in MAP B C and we're going 15 00:01:05,270 --> 00:01:12,920 to extend map b c so that we can conform to the you eye view controller previewing delegate. 16 00:01:12,950 --> 00:01:13,790 That's what it's called. 17 00:01:13,790 --> 00:01:17,160 And if you want to use 3D touch you need to know about this. 18 00:01:17,330 --> 00:01:21,790 So let's begin in MAP B by typing extension. 19 00:01:21,800 --> 00:01:29,480 Matt Visi you view controller and you can see right here you have your controller previewing a delegate. 20 00:01:29,480 --> 00:01:35,330 Now it says a set of methods used by the delegate to respond with a preview view controller. 21 00:01:35,330 --> 00:01:39,140 That's what we're that's the peak part and a commit view controller. 22 00:01:39,140 --> 00:01:46,100 That's the part 2 to the user pressing a view object on the screen of a device that supports 3D touch. 23 00:01:46,110 --> 00:01:47,660 OK there we go. 24 00:01:47,690 --> 00:01:53,960 So we are now conforming to this delegate and we need to call two methods to do this properly. 25 00:01:53,960 --> 00:01:56,100 You'll see that it's not yet letting us conform. 26 00:01:56,130 --> 00:02:03,080 That's because we're missing two very important methods and one is called View Controller for location 27 00:02:04,140 --> 00:02:11,910 and the other is called View Controller to commit. 28 00:02:12,440 --> 00:02:13,030 OK. 29 00:02:13,190 --> 00:02:15,640 Now they're part of previewing context. 30 00:02:15,770 --> 00:02:22,310 And of course for 3D touch it needs to know the context it needs to know what you're trying to present. 31 00:02:22,400 --> 00:02:24,140 Now View Controller for a location. 32 00:02:24,140 --> 00:02:28,730 This is where we're going to set up pop B.C and this is actually what happens when you push all the 33 00:02:28,730 --> 00:02:34,670 way through to present the view controller preview in context view controller or to commit. 34 00:02:34,670 --> 00:02:39,140 This is where we're going to set up the Peak part where when you push a little bit it will show you 35 00:02:39,140 --> 00:02:44,120 the peak of what you will see and then you will push all the way through to present the view controller 36 00:02:44,240 --> 00:02:45,850 from this function above. 37 00:02:45,860 --> 00:02:49,400 So let's go ahead and let's start with. 38 00:02:49,400 --> 00:02:53,000 Well it doesn't really matter because we actually need both to work. 39 00:02:53,000 --> 00:02:58,350 So let's just begin here with The View Controller for location. 40 00:02:58,520 --> 00:03:03,740 And basically what we're going to do is we're going to tell it where we are pressing and we're going 41 00:03:03,740 --> 00:03:08,870 to give it an idea of where we are pressing on our cell so that it knows where to animate from. 42 00:03:08,870 --> 00:03:13,340 So if we push from the bottom left corner it will animate the image up to the Center for pushing from 43 00:03:13,340 --> 00:03:16,120 the top it will animate a little bit up to the center. 44 00:03:16,580 --> 00:03:22,100 But before that we need to basically create a constant that will hold the index path so it knows where 45 00:03:22,100 --> 00:03:28,370 we're pushing from and we're going to also create a cell from that index path so that we can access 46 00:03:28,370 --> 00:03:34,120 the photo value or the photo the image from that cell. 47 00:03:34,250 --> 00:03:40,750 So let's go ahead and let's use guard left so we can be extra safe and let's go ahead and type guard 48 00:03:40,760 --> 00:03:49,480 let index path equals collection view index path for item location. 49 00:03:49,490 --> 00:03:54,380 And you know what we actually get a location from our view controller so we're going to pass in that 50 00:03:54,380 --> 00:03:55,320 location. 51 00:03:55,490 --> 00:04:00,080 And this is what helps us to know exactly where we're pressing from so we can get an index path from 52 00:04:00,080 --> 00:04:00,920 that. 53 00:04:00,920 --> 00:04:05,150 Now I don't know if you know this but you can actually create multiple constants inside the same guard 54 00:04:05,150 --> 00:04:05,570 statement. 55 00:04:05,570 --> 00:04:08,760 So all you have to do is just create a comma and type let. 56 00:04:08,780 --> 00:04:10,310 And now we can create a second one. 57 00:04:10,640 --> 00:04:17,540 So we're going to call this one cell and we're going to set it to be equal to collection view cell for 58 00:04:17,540 --> 00:04:18,910 item an index path. 59 00:04:18,920 --> 00:04:19,600 And you know what. 60 00:04:19,600 --> 00:04:25,820 Ha Ha Ha we already have one so let's give it let's give it the index path. 61 00:04:25,820 --> 00:04:28,910 We just create it. 62 00:04:28,910 --> 00:04:30,170 Very cool. 63 00:04:30,180 --> 00:04:32,980 Now of course at the end of a guard statement we need to call. 64 00:04:32,990 --> 00:04:33,740 Else. 65 00:04:33,890 --> 00:04:40,680 And if we do not do this successfully if it fails we still need to return a view control. 66 00:04:40,760 --> 00:04:45,680 But it is optional so we have the option to return nil meaning there is no view controller to pop through 67 00:04:45,680 --> 00:04:47,690 to so we can just say return nil. 68 00:04:47,690 --> 00:04:52,280 We could also just return a blank controller but it would just pop up a blank view controller and that's 69 00:04:52,280 --> 00:04:52,580 ugly. 70 00:04:52,580 --> 00:04:56,860 So if we return nil it basically just is like telling it to cancel. 71 00:04:56,900 --> 00:05:00,100 So that's what we're going to do is return nil instead. 72 00:05:00,320 --> 00:05:05,590 So now we have an index path and we have a sell at that specific index path. 73 00:05:05,600 --> 00:05:11,390 And now we can actually get the important stuff that we need from that sell which is awesome like the 74 00:05:11,390 --> 00:05:12,670 image for instance. 75 00:05:12,680 --> 00:05:17,540 So let's go ahead and let's set up an instance of pop Visi because remember that's the one that will 76 00:05:17,540 --> 00:05:23,720 be popping on at the end and this previewing context controller for location. 77 00:05:23,720 --> 00:05:30,070 This is for the final presentation like the app currently when you tap on a cell just touch it. 78 00:05:30,080 --> 00:05:31,790 It presents the view controller. 79 00:05:31,790 --> 00:05:35,570 This is what we'll show when we push all the way through. 80 00:05:35,570 --> 00:05:39,800 So we're going to set up another guard to Houghs pop visi. 81 00:05:39,830 --> 00:05:46,670 So go ahead and type guard let pop Fisi and it's going to be equal to storyboard instantiates storyboard 82 00:05:46,680 --> 00:05:48,160 with identifier. 83 00:05:48,230 --> 00:05:55,910 The identifier of course being poppyseed we're going to cast it as pop visi. 84 00:05:55,970 --> 00:06:01,290 And then of course if that doesn't work we can say else whoops else. 85 00:06:01,310 --> 00:06:05,440 And you know what we're going to return nil as well. 86 00:06:05,450 --> 00:06:06,060 OK. 87 00:06:06,350 --> 00:06:09,550 Because if this doesn't work we're going to return nil to the view controller. 88 00:06:09,680 --> 00:06:11,920 That's what it needs or not what it needs. 89 00:06:11,930 --> 00:06:17,270 But what it can accept if this were different if this was an exclamation mark or nothing we would need 90 00:06:17,270 --> 00:06:18,640 to return something. 91 00:06:18,650 --> 00:06:23,870 But for this we can actually return nil since it's since it's optional. 92 00:06:23,870 --> 00:06:30,140 So cool assuming that pop VC works and we get a pop b c we should initialize it with that photo data 93 00:06:30,170 --> 00:06:31,270 from the cell. 94 00:06:31,280 --> 00:06:34,740 So let's go ahead and type pop Visi in that data. 95 00:06:34,760 --> 00:06:38,360 And you know what the cell pulls its image from the index path. 96 00:06:38,360 --> 00:06:42,150 So I think we should do the same thing from the image array. 97 00:06:42,200 --> 00:06:42,880 Go ahead and call. 98 00:06:42,890 --> 00:06:43,830 Image array. 99 00:06:44,000 --> 00:06:50,480 Then get the index path and pull out the row because that will tell us the exact spot that we're touching 100 00:06:50,950 --> 00:06:51,970 from the index path. 101 00:06:51,980 --> 00:06:53,420 And it will pass at the proper image. 102 00:06:53,420 --> 00:06:56,210 Otherwise we'd end up with a random image that we didn't select. 103 00:06:56,210 --> 00:06:58,470 You don't want that does not look good. 104 00:06:58,520 --> 00:07:05,240 So now that we have properly initialized part B C with the proper amount of data there's one thing we 105 00:07:05,240 --> 00:07:08,400 need for this and it is the previewing context. 106 00:07:08,520 --> 00:07:09,220 OK. 107 00:07:09,610 --> 00:07:18,130 Now we're basically going to set up the size that is previewed when we push on the View Controller. 108 00:07:18,160 --> 00:07:20,310 So let's let me just show you what this is like. 109 00:07:20,310 --> 00:07:28,140 We're going to type preview in-context source rect meaning the size of the rectangle of the photo like 110 00:07:28,150 --> 00:07:30,670 if it was a square photo the rectangle would be circle. 111 00:07:30,760 --> 00:07:37,590 If it was a 16 by 9 photo it would be kind of like a landscape photo if it was the size of the screen 112 00:07:37,600 --> 00:07:40,870 it would be like a smaller version of the size of the screen. 113 00:07:40,930 --> 00:07:48,250 So the source racks we're just going to set to be equal to sell content view frame because the content 114 00:07:48,270 --> 00:07:53,350 you could change in the cell itself is square but the content view might be a different size. 115 00:07:53,350 --> 00:07:57,550 So we want to show what the actual image looks like so you can see the full thing and then we'll show 116 00:07:57,550 --> 00:07:59,010 the zoomed in version. 117 00:07:59,080 --> 00:08:04,870 So this source recked if you look here it says the rectangle in the source views coordinate system that 118 00:08:04,870 --> 00:08:11,130 responds to a forceful touch by a user and remains visually sharp while surrounding content blurs Blur's 119 00:08:11,380 --> 00:08:14,170 if you've ever used 3-D touch you know what this is like. 120 00:08:14,170 --> 00:08:18,250 This is the rectangle that will zoom up and then everything else behind it gets blurry until we push 121 00:08:18,250 --> 00:08:20,390 it through to show the full view controller. 122 00:08:20,550 --> 00:08:21,140 OK. 123 00:08:21,520 --> 00:08:27,520 Then of course at the very end assuming that all of this is hunky dory and it's good to go we just return 124 00:08:27,920 --> 00:08:34,750 poppyseed OK because we've now set it up properly and we've given a preview in-context for 3D touch. 125 00:08:34,750 --> 00:08:37,180 Now the cool thing this is all set up. 126 00:08:37,180 --> 00:08:43,000 The only thing we need to do for this is to tell it which View Controller it's supposed to commit. 127 00:08:43,030 --> 00:08:43,720 Check this out. 128 00:08:43,720 --> 00:08:50,680 All we need to type is show and we're going to pass it the view controller to commit because we've already 129 00:08:50,680 --> 00:08:57,280 set this up we've told it the preview in context the view controller to commit is the controller to 130 00:08:57,280 --> 00:08:57,730 commit. 131 00:08:57,750 --> 00:09:00,720 I know that doesn't make sense but it's getting this from this function. 132 00:09:00,730 --> 00:09:06,440 We've set up pop B C and then when this function is called when this delegate method is called Pop VC 133 00:09:06,520 --> 00:09:12,230 is the function or saara is the view controller that is passed through here and the sender is self. 134 00:09:12,250 --> 00:09:14,240 It's coming from this view controller. 135 00:09:14,290 --> 00:09:19,420 So show is going to present a view controller in a primary context. 136 00:09:19,520 --> 00:09:20,280 OK. 137 00:09:20,410 --> 00:09:25,570 Now that is what we are using and that is what will give us 3D touch capabilities I'm not joking it's 138 00:09:25,630 --> 00:09:26,690 that simple. 139 00:09:26,710 --> 00:09:27,950 Do you guys want to check it out. 140 00:09:28,210 --> 00:09:28,610 OK. 141 00:09:28,660 --> 00:09:30,070 Let's go build and run. 142 00:09:30,100 --> 00:09:32,580 Let's go see how we did. 143 00:09:32,620 --> 00:09:38,890 There are of course other ways that you can modify 3D touch like if you've ever used 3-D touch in like 144 00:09:38,890 --> 00:09:41,180 the Facebook app or in another app. 145 00:09:41,350 --> 00:09:45,520 You'll see there's like a little up carrot at the top and you can swipe up to get different options 146 00:09:45,520 --> 00:09:47,400 on like an action sheet. 147 00:09:47,410 --> 00:09:52,270 You can integrate that we're not going to integrate that for the intents and purposes of this course. 148 00:09:52,540 --> 00:09:57,670 But I really recommend that you dive into the to the documentation because it's really interesting. 149 00:09:57,670 --> 00:10:00,020 So let's go ahead let's drop a pin. 150 00:10:00,310 --> 00:10:04,210 Let's let it load some photos and let's try out 3-D touch. 151 00:10:04,210 --> 00:10:10,660 A side note is if you don't have one of the new MacBook Pros with the touch bar like I do. 152 00:10:10,660 --> 00:10:13,660 You're not going to be able to test 3D touch on your computer. 153 00:10:13,690 --> 00:10:18,580 The new trackpad on the new Mac books allow you to test out 3D touch. 154 00:10:18,580 --> 00:10:23,350 So you're either going to have to have a device with 3D touch or one of the new Mac books. 155 00:10:23,500 --> 00:10:27,970 And if you don't then maybe you might choose that this feature is not good for you to integrate in the 156 00:10:27,970 --> 00:10:34,170 app for yourself but you might want to include it just because it might be fun for another user. 157 00:10:34,170 --> 00:10:41,380 Of course you can simulate 3D touch in here and I don't remember where you touch pressure and if you 158 00:10:41,380 --> 00:10:47,060 don't have 3-D touch you can turn off use trackpad force or actually you know what. 159 00:10:47,110 --> 00:10:52,120 It's not even going to let me since I can but you can do a shallow press or a deep press that way which 160 00:10:52,120 --> 00:10:53,010 is kind of cool. 161 00:10:53,290 --> 00:10:57,180 So I'm going to use my trackpad here I'm going to gently press down on a photo. 162 00:10:57,220 --> 00:11:00,320 Let's let's try this one. 163 00:11:00,370 --> 00:11:04,980 If I press Oh OK so that's not good. 164 00:11:04,980 --> 00:11:05,920 It's not letting me do it. 165 00:11:05,920 --> 00:11:06,700 Let's try it again. 166 00:11:06,700 --> 00:11:10,150 Let's try pressing. 167 00:11:10,310 --> 00:11:16,850 Maybe I turned off my use trackpad force huh. 168 00:11:17,110 --> 00:11:17,910 Interesting. 169 00:11:21,770 --> 00:11:24,830 OK so it looks like it's not working. 170 00:11:24,830 --> 00:11:30,160 Let me think about what we have done here that I may have missed. 171 00:11:30,230 --> 00:11:32,990 We're setting it up to preview. 172 00:11:33,350 --> 00:11:35,450 Oh you know what guys sorry. 173 00:11:35,450 --> 00:11:36,870 There is one thing we need to do. 174 00:11:36,870 --> 00:11:41,390 There's a function that you have to call and we've basically set it up to do everything that it needs 175 00:11:41,390 --> 00:11:41,620 to. 176 00:11:41,630 --> 00:11:46,800 But we have not yet told it where it is getting this source wrecked. 177 00:11:46,800 --> 00:11:48,830 Where is it taking that rectangle from. 178 00:11:48,830 --> 00:11:51,890 We need to register our collection to you first. 179 00:11:51,890 --> 00:11:54,650 So let's go ahead and up in view did load. 180 00:11:54,650 --> 00:11:57,110 Let's find that you did load. 181 00:11:57,110 --> 00:12:05,660 We're going to call register register for previewing with you view controller previewing delegate which 182 00:12:05,720 --> 00:12:10,950 since we've conformed we can call self and the source for you is going to be the collection view. 183 00:12:11,240 --> 00:12:18,350 Oh that is so much better so the source view like you saw down here the source recked those go hand-in-hand. 184 00:12:18,380 --> 00:12:23,000 We didn't tell it what the source view was so it can't get the source recked let's build and run it 185 00:12:23,000 --> 00:12:26,620 one more time and let's double check to make sure that that's going to work. 186 00:12:26,630 --> 00:12:28,500 Looks like we're getting an error here. 187 00:12:28,770 --> 00:12:31,370 Oh of course I did not unwrap the collection view. 188 00:12:31,370 --> 00:12:32,870 That's the problem. 189 00:12:32,870 --> 00:12:34,140 Remember it is optional. 190 00:12:34,190 --> 00:12:38,960 So we need to unwrap it and let's go ahead and try this one more time we're gonna have to download photos 191 00:12:38,960 --> 00:12:39,290 again. 192 00:12:39,290 --> 00:12:41,350 Sorry about that folks. 193 00:12:41,360 --> 00:12:42,590 Here we go. 194 00:12:43,630 --> 00:12:47,050 Sweet OK. 195 00:12:47,060 --> 00:12:51,360 So once that's done we should be able to test 3D touch. 196 00:12:51,380 --> 00:12:52,180 Let's give it a shot. 197 00:12:55,380 --> 00:12:55,620 All right. 198 00:12:55,620 --> 00:12:56,900 Looks like it's almost done. 199 00:12:56,910 --> 00:12:58,260 And here we go. 200 00:12:58,260 --> 00:12:59,220 Let's give it a try. 201 00:12:59,220 --> 00:13:05,330 I'm going to push gently little do you see that that was it. 202 00:13:05,340 --> 00:13:07,090 Let's see if I can do it slowly. 203 00:13:07,110 --> 00:13:10,170 By turning off my trackpad force here. 204 00:13:10,530 --> 00:13:13,760 I don't know if I can now it's not going to let me. 205 00:13:13,770 --> 00:13:17,460 OK so I'll have to try my best to be very gentle. 206 00:13:17,460 --> 00:13:19,430 Let's press very lightly. 207 00:13:19,440 --> 00:13:23,660 This is simulating the peak little 208 00:13:27,760 --> 00:13:33,550 oh you know what I think I messed it up by turning off my trackpad for us here. 209 00:13:33,550 --> 00:13:34,430 Funny. 210 00:13:34,750 --> 00:13:35,250 Oh there it is. 211 00:13:35,250 --> 00:13:35,650 OK sorry. 212 00:13:35,650 --> 00:13:36,370 No I didn't. 213 00:13:36,370 --> 00:13:40,780 So if you push gently you can see the preview and then you can double tap to release it. 214 00:13:41,620 --> 00:13:46,800 Push and pop peek that image and pop. 215 00:13:46,800 --> 00:13:47,310 There we go. 216 00:13:47,310 --> 00:13:49,150 It's hard to do on the trackpad. 217 00:13:49,500 --> 00:13:52,950 Let's see a little bit and if I let go goes back down. 218 00:13:52,950 --> 00:13:54,420 Very cool. 219 00:13:54,420 --> 00:13:54,810 There we go. 220 00:13:54,810 --> 00:13:57,600 And if I push all the way through it opens up. 221 00:13:57,600 --> 00:14:00,240 So guys we just integrate it 3D touch into our app. 222 00:14:00,240 --> 00:14:01,740 It's that easy. 223 00:14:01,740 --> 00:14:06,220 Make sure that you register for previewing you have to tell it where it should be looking at. 224 00:14:06,270 --> 00:14:08,270 That was my big oops in this video. 225 00:14:08,370 --> 00:14:13,320 But it's good that you saw me have to process through that and remember that that is important to do 226 00:14:13,320 --> 00:14:15,340 because we have everything set up beautifully here. 227 00:14:15,360 --> 00:14:19,710 But if we're not telling it where it's supposed to get this source recked then it doesn't know how to 228 00:14:19,710 --> 00:14:21,520 pop and where it should pop to. 229 00:14:21,540 --> 00:14:26,430 Awesome awesome job guys and congratulations on finishing another section of this course in the next 230 00:14:26,430 --> 00:14:26,760 video. 231 00:14:26,760 --> 00:14:30,780 I'm going to give you a challenge to extend this app to make it a little bit better. 232 00:14:30,900 --> 00:14:34,130 A little bit more complex and overall just a better app. 233 00:14:34,140 --> 00:14:34,890 Awesome job. 234 00:14:34,890 --> 00:14:36,550 And we'll see in the next video.