1 00:00:07,790 --> 00:00:12,590 Hey guys going on this is Caleb with Dev slopes and in this video we're going to create an extension 2 00:00:12,770 --> 00:00:17,100 of you view controller that's going to modify the way that view controllers are presented. 3 00:00:17,330 --> 00:00:23,960 And it's basically going to make it really easy for us to emulate the animation style of a navigation 4 00:00:23,960 --> 00:00:26,030 controller without actually needing to use one. 5 00:00:26,030 --> 00:00:32,720 So pull open your X code project just like so and right click on the extensions group and select new 6 00:00:32,720 --> 00:00:33,800 file. 7 00:00:34,070 --> 00:00:42,380 It's just going to be a swift file and we're going to call this UI View Controller XTi press create. 8 00:00:42,620 --> 00:00:43,360 And here we go. 9 00:00:43,370 --> 00:00:50,330 We have a an empty switch file ready for us now in order to actually use this since we're modifying 10 00:00:50,870 --> 00:00:57,020 part of you view controller we need to import UI kit and you like it includes foundation so we're just 11 00:00:57,020 --> 00:00:59,400 going to get rid of foundation and import it. 12 00:00:59,510 --> 00:01:07,310 So go ahead and type extension and just like you might expect it's an extension of UI view controller 13 00:01:08,240 --> 00:01:13,730 give it some curly brackets and in here we're going to write two functions present detail and dismiss 14 00:01:13,730 --> 00:01:14,760 detail. 15 00:01:14,780 --> 00:01:20,810 Basically what we're doing is we are overriding the default animation that happens when you present 16 00:01:20,810 --> 00:01:22,100 a view controller. 17 00:01:22,100 --> 00:01:26,870 And we're going to be just modifying the animation with our own. 18 00:01:26,870 --> 00:01:27,650 It's that easy. 19 00:01:27,650 --> 00:01:35,390 So let's go ahead and let's begin let's type phunk present detail and we're going to go ahead and give 20 00:01:35,390 --> 00:01:38,930 it some curly brackets and to present this we need to pass it. 21 00:01:38,930 --> 00:01:39,820 A view controller. 22 00:01:39,830 --> 00:01:45,690 So we're going to go ahead and call view controller to present. 23 00:01:45,860 --> 00:01:51,380 And that's going to be of type you have controller but I don't necessarily want it to show this the 24 00:01:51,380 --> 00:01:56,420 whole time like if I type present detail view controller present I don't want it to show this. 25 00:01:56,420 --> 00:02:01,410 So I'm going to actually put an underscore at the beginning and just set this as an internal parameter. 26 00:02:01,790 --> 00:02:09,430 So now we need to create a transition of type C.A. transition which comes from the core animation library. 27 00:02:09,440 --> 00:02:11,060 So let's go ahead and do that by typing. 28 00:02:11,060 --> 00:02:11,730 Let. 29 00:02:11,740 --> 00:02:16,600 Transition equals C.A. transition and go ahead and instantiate it. 30 00:02:16,610 --> 00:02:18,350 And now we're going to go ahead and set it up. 31 00:02:18,350 --> 00:02:21,560 So let's set the duration of the transition. 32 00:02:21,620 --> 00:02:27,420 How long it takes by typing transition duration and we're going to make it 0.3. 33 00:02:27,650 --> 00:02:30,110 That's a good amount of time for a transition. 34 00:02:30,300 --> 00:02:33,290 K now we need to set the type of the transition. 35 00:02:33,350 --> 00:02:37,460 So go ahead and type transition type whip's type. 36 00:02:37,700 --> 00:02:43,670 And for the type in order to access it we need to use a K then see a four core animation and you'll 37 00:02:43,670 --> 00:02:50,960 see that there are quite a few If we type see a transition there is Faid push move in Reveal from top. 38 00:02:51,140 --> 00:02:54,500 And this basically just changes how the animation works. 39 00:02:54,500 --> 00:03:00,050 You can set whatever you want but I'm going to use push because it takes any existing content and it 40 00:03:00,050 --> 00:03:04,160 pushes that out as the the current view controller slides into place. 41 00:03:04,190 --> 00:03:08,290 So we're basically going to just slide over the old view controller and present this one just like a 42 00:03:08,290 --> 00:03:09,970 UI navigation controller. 43 00:03:10,250 --> 00:03:13,040 So select KCA transition push. 44 00:03:13,040 --> 00:03:17,210 Now we're going to set up a subtype which tells it where it should come from. 45 00:03:17,210 --> 00:03:24,880 So go ahead and type transition dot subtype and that's going to be KCA transition from. 46 00:03:24,950 --> 00:03:25,580 Right. 47 00:03:25,760 --> 00:03:26,420 OK. 48 00:03:26,660 --> 00:03:31,970 So we're pushing the current view controller often replacing it with the new one and we're doing it 49 00:03:31,970 --> 00:03:34,310 from the right to the left. 50 00:03:34,310 --> 00:03:34,920 All righty. 51 00:03:35,030 --> 00:03:36,500 That looks great. 52 00:03:36,530 --> 00:03:42,620 And now all we need to do is set the layer of whatever view controller we're dealing with here we're 53 00:03:42,620 --> 00:03:46,960 going to set the layer to have this transition we're going to add it as it's transition. 54 00:03:46,970 --> 00:03:51,830 So go ahead and type self meaning whatever view controller this is going on. 55 00:03:52,010 --> 00:03:53,570 We're going to go into the view. 56 00:03:53,750 --> 00:03:55,700 We're going to access it's window. 57 00:03:55,700 --> 00:03:58,270 We're going to access the layer of that window. 58 00:03:58,520 --> 00:04:02,390 And if you type as you can see that you can add ASEA animation. 59 00:04:02,390 --> 00:04:07,700 Now you might be thinking wait a minute see a transition that's not C.A. animation but if you inspect 60 00:04:07,700 --> 00:04:14,370 it you can see that it really is a type of C.A. animation so we can pass in the transition. 61 00:04:14,390 --> 00:04:19,460 Now the key is this is the thing that we need to pass in it's a string. 62 00:04:19,460 --> 00:04:24,530 But the cool thing is that s.a.a transition already has a built in key and we can access it by typing 63 00:04:24,530 --> 00:04:27,660 K see a transition. 64 00:04:27,890 --> 00:04:32,370 It's an identifier that represents a transition animation so we can just give it that key. 65 00:04:32,390 --> 00:04:35,460 It's already built in for us supercool. 66 00:04:35,480 --> 00:04:41,420 So now that this is all done we have set up our own custom transition what we need to do is to present 67 00:04:41,540 --> 00:04:43,760 the view controller that we have passed in. 68 00:04:43,760 --> 00:04:51,470 So go ahead and type present and for the view controller to present pass in view controller to present 69 00:04:51,890 --> 00:04:56,870 the one we pass in when we call this function and for the animated part here we're going to go ahead 70 00:04:56,870 --> 00:04:58,280 and call false. 71 00:04:58,280 --> 00:05:02,980 The reason for that is because we have already overwritten the animation and we've added it in. 72 00:05:03,110 --> 00:05:07,610 If we were to call it true it would just call the default animation style which is pop it up from the 73 00:05:07,610 --> 00:05:08,390 bottom to the top. 74 00:05:08,390 --> 00:05:11,750 We don't want that now when it's done we don't care. 75 00:05:11,750 --> 00:05:13,100 We're just going to type nil. 76 00:05:13,100 --> 00:05:17,600 We don't care when it's finished we just care when when it presents. 77 00:05:17,600 --> 00:05:22,910 So this is how we're going to present our detail controller and have it slide in from the right. 78 00:05:23,120 --> 00:05:28,560 Now we need to create our function that will dismiss it properly and animate it to the left. 79 00:05:28,580 --> 00:05:28,850 OK. 80 00:05:28,870 --> 00:05:31,370 Just like a navigation controller. 81 00:05:31,370 --> 00:05:35,470 So go ahead and type phunk dismiss detail. 82 00:05:36,200 --> 00:05:40,070 And what we're going to do is we're going to do the same exact thing and I'm actually going to just 83 00:05:40,070 --> 00:05:41,840 copy and paste this code. 84 00:05:41,840 --> 00:05:46,850 I know that's bad but I'm going to copy and paste it in because we're literally doing the same thing 85 00:05:47,300 --> 00:05:50,530 except instead of transitioning from the right. 86 00:05:50,660 --> 00:05:52,410 We're transitioning from the left. 87 00:05:52,580 --> 00:05:54,040 And that's why I'm doing that. 88 00:05:54,080 --> 00:05:56,170 So we have added a custom animation. 89 00:05:56,180 --> 00:06:01,850 It's going for 0.3 seconds we're pushing the view controller and we are going from the left to the right 90 00:06:01,850 --> 00:06:07,820 now and all we need to do to actually make this work is to call dismiss the default function from Iowa 91 00:06:07,860 --> 00:06:13,310 s but we're going to call false for animated because otherwise it would just do the default dismissal 92 00:06:13,310 --> 00:06:14,170 animation. 93 00:06:14,180 --> 00:06:20,800 We're trying to use our custom one here so called false for animated and for the completion call no. 94 00:06:20,880 --> 00:06:27,710 Now any instance of UI controller we can call this on and it will be able to present and dismiss just 95 00:06:27,710 --> 00:06:29,760 like a UI navigation controller. 96 00:06:29,810 --> 00:06:33,980 There's a few more things that we need to set up before we can use it but it's going to be really cool. 97 00:06:33,980 --> 00:06:35,840 So let's go do that now. 98 00:06:35,840 --> 00:06:41,060 Go into maned storyboard and what we're going to do is we're actually going to have to give some of 99 00:06:41,060 --> 00:06:46,540 our view controllers identifiers so that they can be instantiated from the storyboard. 100 00:06:46,730 --> 00:06:52,090 Now to do that we're going to click Create Go AVC and we're going to give it a storyboard ID. 101 00:06:52,220 --> 00:06:56,900 This allows us to easily instantiate these view controllers just based on their identifier from the 102 00:06:56,900 --> 00:06:57,970 storyboard. 103 00:06:57,980 --> 00:07:05,060 Now I'm going to just call this create wups create goal VC and press enter on goals. 104 00:07:05,060 --> 00:07:09,600 VC I'm going to do the same thing and Precentor OK. 105 00:07:10,100 --> 00:07:14,810 I'm going to get rid of this manual storyboards segue because we're going to actually present this using 106 00:07:14,810 --> 00:07:15,850 our custom function. 107 00:07:15,920 --> 00:07:20,260 So let's go ahead and let's think about what do we need to do here. 108 00:07:20,360 --> 00:07:26,450 We need to go into Goles VC and we have an IB action here that allows us to do something when we press 109 00:07:26,450 --> 00:07:28,040 the ad goals button. 110 00:07:28,040 --> 00:07:34,310 Now what we need to do is we need to instantiate an instance of create goals Fisi and we need to present 111 00:07:34,310 --> 00:07:39,500 it using our handy dandy present detail function we just wrote in our extension. 112 00:07:39,500 --> 00:07:43,310 So let's go ahead and let's create that view controller by using a guard. 113 00:07:43,310 --> 00:07:44,700 Let k so type. 114 00:07:44,720 --> 00:07:56,500 Guard let create cool Visi and we're going to set this to be equal to storyboard dot instantiate a view 115 00:07:56,510 --> 00:07:58,510 controller with identifier. 116 00:07:58,520 --> 00:08:03,560 This is an optional way to access the storyboard and instantiate a view controller with a specific identifier 117 00:08:03,560 --> 00:08:11,750 which we just created create goal Visi since it's optional and there are chances there could be errors. 118 00:08:11,750 --> 00:08:18,760 That's why I am using a guard left because if that doesn't work we're just going to go ahead and return. 119 00:08:18,830 --> 00:08:24,100 Whoops we're just going to go ahead and return out of this return. 120 00:08:24,380 --> 00:08:30,050 And that's going to let us exit this and not actually cause an error if there is no controller with 121 00:08:30,200 --> 00:08:31,110 that identifier. 122 00:08:31,160 --> 00:08:32,770 It's just the way to be safe. 123 00:08:32,870 --> 00:08:38,330 But assuming that it works and it will because we have given it the proper identifier we're going to 124 00:08:38,330 --> 00:08:44,930 go ahead and call present detail since we're in an instance of you I view controller we can access this 125 00:08:44,930 --> 00:08:49,570 function and we can pass it create Go Visi check it out. 126 00:08:49,640 --> 00:08:52,810 Now we can present it properly using our animation style. 127 00:08:52,920 --> 00:08:58,390 Now presenting It's one thing but we should also be dismissing it the proper way to do that. 128 00:08:58,460 --> 00:09:08,050 Go into create Visi scroll down and replace this stock iOS dismissal with dismiss detail and that should 129 00:09:08,050 --> 00:09:10,670 properly dismiss it back to the left the way we want. 130 00:09:10,750 --> 00:09:11,730 She we go try it out. 131 00:09:11,860 --> 00:09:12,370 I think we should. 132 00:09:12,370 --> 00:09:13,210 I'm really excited. 133 00:09:13,210 --> 00:09:17,100 So click build and run and we're going to open up our simulator here. 134 00:09:17,110 --> 00:09:19,970 We'll test to see if this works the way that we are hoping. 135 00:09:20,170 --> 00:09:21,600 Let's go check it out. 136 00:09:21,610 --> 00:09:21,880 All right. 137 00:09:21,890 --> 00:09:25,760 So tap on the button and let's see if it slides over to the right. 138 00:09:25,840 --> 00:09:26,660 Did you see that. 139 00:09:26,800 --> 00:09:27,880 That was cool. 140 00:09:27,910 --> 00:09:28,810 So now. 141 00:09:28,870 --> 00:09:32,820 Tap the dismiss button and we'll see if it goes back the right way. 142 00:09:33,640 --> 00:09:34,780 It works. 143 00:09:34,780 --> 00:09:36,310 Amazing that looks so good. 144 00:09:36,310 --> 00:09:37,870 So let's try it again. 145 00:09:37,900 --> 00:09:42,680 Awesome guys we can get this beautiful animation just like a UI navigation controller. 146 00:09:42,820 --> 00:09:47,620 And by the way it looks very fluid on an iPhone sometimes animations in the simulator can be a little 147 00:09:47,620 --> 00:09:52,420 bit choppy and if you ever want to test the animations you can turn on slow animations and watch how 148 00:09:52,420 --> 00:09:54,160 it actually looks in real life. 149 00:09:55,180 --> 00:09:59,380 Oh you know what weird I wonder why it's not letting me do that. 150 00:09:59,740 --> 00:10:00,240 Oh you know what. 151 00:10:00,240 --> 00:10:02,050 I bet it's because it's a custom animation. 152 00:10:02,050 --> 00:10:02,640 OK. 153 00:10:02,920 --> 00:10:06,250 Anyway so I guess you can't do that for a custom C.A. transition. 154 00:10:06,250 --> 00:10:07,590 But anyway you guys get the idea. 155 00:10:07,600 --> 00:10:12,320 It's moving nicely and it's transitioning just like a navigation controller. 156 00:10:12,340 --> 00:10:13,850 So so cool. 157 00:10:13,990 --> 00:10:18,520 And then the next video we're going to go ahead and write another extension that is going to allow us 158 00:10:18,520 --> 00:10:24,310 to bind our buttons to the keyboard so that when we tap on our text view the button will slide up with 159 00:10:24,310 --> 00:10:26,200 the keyboard and not be obscured. 160 00:10:26,200 --> 00:10:30,310 We're also going to write an extension for these buttons so that when they're selected we can change 161 00:10:30,310 --> 00:10:32,650 their selection or selection color. 162 00:10:32,650 --> 00:10:33,970 It's going to be super cool. 163 00:10:33,970 --> 00:10:36,250 Let's head over there and do that right now. 164 00:10:36,280 --> 00:10:37,190 I'll see in the next video.