1
00:00:07,740 --> 00:00:12,820
Hey guys going on this is Caleb with slopes and in this video we're going to create an extension of

2
00:00:12,820 --> 00:00:17,090
you eye view controller that's going to modify the way that view controllers are presented.

3
00:00:17,260 --> 00:00:23,890
And it's basically going to make it really easy for us to emulate the animation style of a UI navigation

4
00:00:23,890 --> 00:00:25,960
controller without actually needing to use one.

5
00:00:25,960 --> 00:00:32,650
So pull open your X code project just like so and right click on the extensions group and select new

6
00:00:32,650 --> 00:00:33,470
file.

7
00:00:33,640 --> 00:00:33,970
OK.

8
00:00:34,030 --> 00:00:39,340
It's just going to be a swift file and we're going to call this UI View Controller.

9
00:00:39,340 --> 00:00:42,550
The XTi press create.

10
00:00:42,550 --> 00:00:43,310
And here we go.

11
00:00:43,330 --> 00:00:46,980
We have a an empty swithe file ready for us.

12
00:00:47,170 --> 00:00:54,340
Now in order to actually use this since we're modifying part of UI controller we need to import UI kit

13
00:00:54,460 --> 00:00:59,400
and you like Kit includes foundation so we're just going to get rid of foundation and import it.

14
00:00:59,440 --> 00:01:07,660
So go ahead and type extension and just like you might expect it's an extension of UI controller.

15
00:01:08,200 --> 00:01:13,660
Give it some curly brackets and in here we're going to write two functions present detail and dismiss

16
00:01:13,660 --> 00:01:14,740
detail.

17
00:01:14,740 --> 00:01:20,730
Basically what we're doing is we are overriding the default animation that happens when you present

18
00:01:20,740 --> 00:01:21,760
a view controller.

19
00:01:22,060 --> 00:01:26,830
And we're going to be just modifying the animation with our own.

20
00:01:26,830 --> 00:01:27,580
It's that easy.

21
00:01:27,580 --> 00:01:35,320
So let's go ahead and let's begin let's type phunk present detail and we're going to go ahead and give

22
00:01:35,320 --> 00:01:38,890
it some curly brackets and to present this we need to pass it.

23
00:01:38,890 --> 00:01:39,760
A view controller.

24
00:01:39,760 --> 00:01:45,570
So we're going to go ahead and call you controller to present.

25
00:01:45,790 --> 00:01:51,520
And that's going to be of type II view controller but I don't necessarily want it to show this the whole

26
00:01:51,520 --> 00:01:55,080
time like if I type present detail view controller to represent.

27
00:01:55,240 --> 00:01:56,320
I don't want it to show this.

28
00:01:56,350 --> 00:02:01,720
So I'm going to actually put an underscore at the beginning and just set this as an internal parameter.

29
00:02:01,750 --> 00:02:09,370
So now we need to create a transition of type C-A transition which comes from the core animation library.

30
00:02:09,370 --> 00:02:11,020
So let's go ahead and do that by typing.

31
00:02:11,020 --> 00:02:11,550
Let.

32
00:02:11,660 --> 00:02:16,530
Transition equals C.A. transition and go ahead and instantiate it.

33
00:02:16,540 --> 00:02:18,310
And now we're going to go ahead and set it up.

34
00:02:18,310 --> 00:02:21,490
So let's set the duration of the transition.

35
00:02:21,550 --> 00:02:27,530
How long it takes by typing transition duration and we're going to make it 0.3.

36
00:02:27,610 --> 00:02:30,360
That's a good amount of time for a transition.

37
00:02:30,520 --> 00:02:33,080
Now we need to set the type of the transition.

38
00:02:33,280 --> 00:02:39,480
So go ahead and type transition type type and type in order to access it.

39
00:02:39,490 --> 00:02:46,000
We need to use a K then see a for Core Animation and you'll see that there are quite a few If we type

40
00:02:46,030 --> 00:02:50,970
see a transition there is Faid push move in Reveal from top.

41
00:02:51,070 --> 00:02:54,450
And this basically just changes how the animation works.

42
00:02:54,450 --> 00:02:59,980
You can set whatever you want but I'm going to use push because it takes any existing content and it

43
00:02:59,980 --> 00:03:04,100
pushes it out as the the current view controller slides into place.

44
00:03:04,120 --> 00:03:08,310
So we're basically going to just slide over the old view controller and present this one just like a

45
00:03:08,590 --> 00:03:09,920
navigation controller.

46
00:03:10,210 --> 00:03:12,960
So select KCA transition push.

47
00:03:13,000 --> 00:03:17,170
Now we're going to set up a subtype which tells it where it should come from.

48
00:03:17,170 --> 00:03:24,880
So go ahead and type transition dot subtype and that's going to be KCA transition from.

49
00:03:24,880 --> 00:03:25,540
Right.

50
00:03:25,720 --> 00:03:26,310
OK.

51
00:03:26,590 --> 00:03:31,930
So we're pushing the current view controller often replacing it with the new one and we're doing it

52
00:03:31,930 --> 00:03:34,210
from the right to the left.

53
00:03:34,230 --> 00:03:34,780
All right.

54
00:03:34,960 --> 00:03:36,460
That looks great.

55
00:03:36,460 --> 00:03:42,580
And now all we need to do is set the layer of whatever view controller we're dealing with here we're

56
00:03:42,580 --> 00:03:46,910
going to set the layer to have this transition we're going to add it as it's transition.

57
00:03:46,930 --> 00:03:51,750
So go ahead and type self meaning whatever view controller this is going on.

58
00:03:51,940 --> 00:03:55,570
We're going to go into the view we're going to access it's window.

59
00:03:55,660 --> 00:03:58,330
We're going to access the layer of that window.

60
00:03:58,450 --> 00:04:02,320
And if you type ad you can see that you can add ACA animation.

61
00:04:02,320 --> 00:04:07,630
Now you might be thinking wait a minute see a transition that's not C.A. animation but if you inspect

62
00:04:07,630 --> 00:04:14,350
it you can see that it really is a type of C.A. animation so we can pass in the transition.

63
00:04:14,350 --> 00:04:19,230
Now the key this is this is the thing that we need to pass in a string.

64
00:04:19,420 --> 00:04:24,480
But the cool thing is that C.A. transition already has a built in key and we can access it by typing

65
00:04:24,560 --> 00:04:27,590
K see a transition.

66
00:04:27,850 --> 00:04:32,320
It's an identifier that represents a transition animation so we can just give it that key.

67
00:04:32,350 --> 00:04:39,130
It's already built in for us supercool So now that this is all done we have set up our own custom transition

68
00:04:39,520 --> 00:04:43,720
what we need to do is to present the view controller that we have passed in.

69
00:04:43,720 --> 00:04:51,820
So go ahead and type present and for the view controller to present pass in control or to present right.

70
00:04:51,820 --> 00:04:56,800
The one we pass in when we call this function and for the animated part here we're going to go ahead

71
00:04:56,800 --> 00:04:58,200
and call false.

72
00:04:58,210 --> 00:05:02,920
The reason for that is because we have already overridden the animation and we've added it in.

73
00:05:03,070 --> 00:05:07,480
If we were to call it true it would just call the default animation style which is to pop it up from

74
00:05:07,480 --> 00:05:08,320
the bottom to the top.

75
00:05:08,320 --> 00:05:11,710
We don't want that now when it's done we don't care.

76
00:05:11,710 --> 00:05:13,010
We're just going to type nil.

77
00:05:13,030 --> 00:05:17,430
We don't care when it's finished we just care when when it presents.

78
00:05:17,560 --> 00:05:22,790
So this is how we're going to present our detail controller and have it slide in from the right.

79
00:05:23,080 --> 00:05:28,560
Now we need to create our function that will dismiss it properly and animate it to the left.

80
00:05:28,810 --> 00:05:31,030
Just like a navigation controller.

81
00:05:31,300 --> 00:05:39,070
So go ahead and type phunk dismiss detail and what we're going to do is we're going to do the same exact

82
00:05:39,070 --> 00:05:41,800
thing and I'm actually going to just copy and paste this code.

83
00:05:41,800 --> 00:05:46,780
I know that's bad but I'm going to copy and paste it in because we're literally doing the same thing

84
00:05:47,230 --> 00:05:50,430
except instead of transitioning from the right.

85
00:05:50,590 --> 00:05:52,350
We're transitioning from the left.

86
00:05:52,540 --> 00:05:54,010
And that's why I'm doing that.

87
00:05:54,010 --> 00:05:56,110
So we have added a custom animation.

88
00:05:56,110 --> 00:06:01,780
It's going for 0.3 seconds we're pushing the View Controller and we are going from the left to the right

89
00:06:01,780 --> 00:06:02,450
now.

90
00:06:02,620 --> 00:06:08,180
And all we need to do to actually make this work is to call dismiss the default function from Iowa us.

91
00:06:08,380 --> 00:06:13,270
But we're going to call false for animated because otherwise it would just do the default dismissal

92
00:06:13,270 --> 00:06:14,070
animation.

93
00:06:14,140 --> 00:06:20,330
We're trying to use our custom one here so call false for animated and for the completion call no.

94
00:06:20,810 --> 00:06:27,670
Now any instance of view controller we can call this on and it will be able to present and dismiss just

95
00:06:27,670 --> 00:06:29,680
like a UI navigation controller.

96
00:06:29,740 --> 00:06:33,910
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,910 --> 00:06:35,430
So let's go do that now.

98
00:06:35,800 --> 00:06:41,110
Go into main storyboard and what we're going to do is we're actually going to have to give some of our

99
00:06:41,110 --> 00:06:46,520
view controllers identifiers so that they can be instantiated from the storyboard.

100
00:06:46,660 --> 00:06:52,090
Now to do that we're going to click Create Go Visi and we're going to give it a storyboard ID.

101
00:06:52,150 --> 00:06:56,830
This allows us to easily instantiate these view controllers just based on their identifier from the

102
00:06:56,830 --> 00:06:57,650
storyboard.

103
00:06:57,940 --> 00:07:05,830
Now I'm going to just call this create wups create goal VC and press enter on Goles VCM going to do

104
00:07:05,830 --> 00:07:07,130
the same thing.

105
00:07:07,690 --> 00:07:09,500
And Precentor OK.

106
00:07:10,030 --> 00:07:14,770
I'm going to get rid of this manual storyboards segue because we're going to actually present this using

107
00:07:14,770 --> 00:07:15,850
our custom function.

108
00:07:15,850 --> 00:07:20,210
So let's go ahead and let's think about what do we need to do here.

109
00:07:20,320 --> 00:07:26,410
We need to go into Goles VC and we have an IB action here that allows us to do something when we press

110
00:07:26,410 --> 00:07:27,740
the ad goals button.

111
00:07:27,970 --> 00:07:34,240
Now what we need to do is we need to instantiate an instance of create goals Visi and we need to present

112
00:07:34,240 --> 00:07:39,210
it using our handy dandy present detail function we just wrote in our extension.

113
00:07:39,430 --> 00:07:43,240
So let's go ahead and let's create that controller by using a guard.

114
00:07:43,240 --> 00:07:44,690
Let k so type.

115
00:07:44,700 --> 00:07:49,550
Guard let create the goal of the.

116
00:07:50,050 --> 00:07:58,470
And we're going to set this to be equal to storyboard dot instantiate a view controller with identifier.

117
00:07:58,480 --> 00:08:03,490
This is an optional way to access the storyboard and instantiate a view controller with a specific identifier

118
00:08:03,490 --> 00:08:11,710
which we just created create goal Visi since it's optional and there are chances there could be errors.

119
00:08:11,710 --> 00:08:18,090
That's why I'm using a guard left because if that doesn't work we're just going to go ahead and return.

120
00:08:19,000 --> 00:08:23,780
We're just going to go ahead and return out of this return.

121
00:08:24,310 --> 00:08:29,980
And that's going to let us exit this and not actually cause an error if there is no controller with

122
00:08:30,160 --> 00:08:31,070
that identifier.

123
00:08:31,150 --> 00:08:32,600
It's just a way to be safe.

124
00:08:32,830 --> 00:08:38,260
But assuming that it works and it will because we have given it the proper identifier we're going to

125
00:08:38,260 --> 00:08:45,340
go ahead and call present detail since we're in an instance of view control or we can access this function

126
00:08:45,730 --> 00:08:49,530
and we can pass it create Go Visi check it out.

127
00:08:49,600 --> 00:08:52,800
Now we can present it properly using our animation style.

128
00:08:52,890 --> 00:08:58,320
Now I'm presenting It's one thing but we should also be dismissing it the proper way to do that.

129
00:08:58,390 --> 00:09:07,370
Go into create go the sea scroll down and replace this stock Iowas dismissal with dismiss detail and

130
00:09:07,420 --> 00:09:10,600
that should properly dismiss it back to the left the way we want.

131
00:09:10,660 --> 00:09:11,680
Should we go try it out.

132
00:09:11,800 --> 00:09:12,310
I think we should.

133
00:09:12,310 --> 00:09:13,180
I'm really excited.

134
00:09:13,180 --> 00:09:17,050
So click build and run and we're going to open up our simulator here.

135
00:09:17,050 --> 00:09:19,910
We'll test to see if this works the way that we are hoping.

136
00:09:20,110 --> 00:09:21,540
Let's go check it out.

137
00:09:21,550 --> 00:09:21,830
All right.

138
00:09:21,830 --> 00:09:25,730
So tap on the button and let's see if it slides over to the right.

139
00:09:25,780 --> 00:09:26,700
Did you see that.

140
00:09:26,740 --> 00:09:27,820
That was cool.

141
00:09:27,850 --> 00:09:32,570
So now tap the dismiss button and we'll see if it goes back the right way.

142
00:09:32,870 --> 00:09:34,720
Well it works.

143
00:09:34,720 --> 00:09:36,250
Amazing that looks so good.

144
00:09:36,250 --> 00:09:37,840
So let's try it again.

145
00:09:37,840 --> 00:09:42,610
Awesome guys we can get this beautiful animation just like a UI navigation controller.

146
00:09:42,760 --> 00:09:47,560
And by the way it looks very fluid on an iPhone sometimes animations in the simulator can be a little

147
00:09:47,560 --> 00:09:48,670
bit choppy.

148
00:09:48,670 --> 00:09:52,840
And if you ever want to test the animations you can turn on slow animations and watch how it actually

149
00:09:52,840 --> 00:09:54,040
looks in real life.

150
00:09:55,120 --> 00:09:59,350
Oh you know what weird I wonder why it's not letting me do that.

151
00:09:59,690 --> 00:10:00,160
Oh you know what.

152
00:10:00,170 --> 00:10:01,990
I bet it's because it's a custom animation.

153
00:10:02,000 --> 00:10:02,610
OK.

154
00:10:02,870 --> 00:10:06,190
Anyway so I guess you can't do that for a custom transition.

155
00:10:06,200 --> 00:10:07,540
But anyway you guys get the idea.

156
00:10:07,550 --> 00:10:08,760
It's moving nicely.

157
00:10:08,770 --> 00:10:12,270
It's transitioning just like a navigation controller.

158
00:10:12,290 --> 00:10:13,830
So so cool.

159
00:10:13,940 --> 00:10:18,470
And then the next video we're going to go ahead and write another extension that is going to allow us

160
00:10:18,470 --> 00:10:24,260
to bind our buttons to the keyboard so that when we tap on our text view the button will slide up with

161
00:10:24,260 --> 00:10:25,980
the keyboard and not be obscured.

162
00:10:26,150 --> 00:10:30,260
We're also going to write an extension for these buttons so that when they're selected we can change

163
00:10:30,260 --> 00:10:32,540
their selection or selection color.

164
00:10:32,570 --> 00:10:33,920
It's going to be super cool.

165
00:10:33,920 --> 00:10:36,190
Let's head over there and do that right now.

166
00:10:36,200 --> 00:10:37,420
I'll see in the next video.