1
00:00:06,780 --> 00:00:07,740
It what's up everyone.

2
00:00:07,780 --> 00:00:11,360
Mark Crites your slopes dot com in case you forgot.

3
00:00:11,860 --> 00:00:15,220
And in this exciting lesson we are going to work with segues.

4
00:00:15,220 --> 00:00:20,810
Basically we're going to get our screens talking to each other and opening the next screen in the sequence.

5
00:00:20,950 --> 00:00:21,530
OK.

6
00:00:21,670 --> 00:00:27,730
So first things first I'm going to go ahead prepare my project with get in so I'm going to do get status

7
00:00:27,730 --> 00:00:35,950
to make sure all my commits or changes are or stored at least on modifications so add a good commit.

8
00:00:36,550 --> 00:00:38,800
And I'm just say minor changes here.

9
00:00:38,980 --> 00:00:40,400
So that's ad not going to get.

10
00:00:40,400 --> 00:00:44,510
Check out Dasch be less than 0 5.

11
00:00:45,010 --> 00:00:46,510
So working on a new branch here.

12
00:00:46,720 --> 00:00:47,240
OK.

13
00:00:47,260 --> 00:00:53,360
And what I'll also do is open app swoosh X code proj.

14
00:00:53,410 --> 00:00:59,380
It's going to open up a new X code project and we can of course open our files on the left hand side

15
00:00:59,380 --> 00:01:01,750
here by clicking the icon at the top right.

16
00:01:01,890 --> 00:01:03,410
The navigator.

17
00:01:03,970 --> 00:01:04,550
OK.

18
00:01:05,050 --> 00:01:11,780
So what we've done so far is we've got our user interface built already and we've used some stack views.

19
00:01:11,830 --> 00:01:16,500
Things are looking really nice and all we need to do is basically when the get started button is pressed

20
00:01:16,510 --> 00:01:22,150
it loads the screen here the league screen and then when the Next button is pressed it loads the view

21
00:01:22,150 --> 00:01:27,380
controller screen excuse me the screen is this thing.

22
00:01:27,430 --> 00:01:29,860
This is the where you select this skill level.

23
00:01:29,860 --> 00:01:31,260
That's what it's called.

24
00:01:31,270 --> 00:01:38,320
So it's actually quite simple from the interface builder here we can go ahead and just drag on a Segway

25
00:01:38,320 --> 00:01:41,270
directly so let's just do it let's just make it really easy.

26
00:01:41,320 --> 00:01:46,630
So all you have to do literally is click the button or the thing that you want to make a transition

27
00:01:46,630 --> 00:01:46,980
with.

28
00:01:47,080 --> 00:01:48,040
OK.

29
00:01:48,760 --> 00:01:51,520
You can use a gesture recognizer or you can use a button.

30
00:01:51,550 --> 00:01:55,750
I mean if I did a label here it's not going to do anything so has to be something that can trigger some

31
00:01:55,750 --> 00:01:56,830
type of event.

32
00:01:57,040 --> 00:02:02,230
And so a button of course will work just fine for us and all you have to do is control drag from this

33
00:02:02,410 --> 00:02:04,560
controller on the left hand side over to this one.

34
00:02:04,570 --> 00:02:05,680
This is the one we want to load.

35
00:02:05,860 --> 00:02:06,560
OK.

36
00:02:07,000 --> 00:02:13,110
And you see here a pop up and you can do show show detail present Motorola present of pop over custom.

37
00:02:13,150 --> 00:02:17,640
So the one that we're going to use of course is going to be show because that's the default.

38
00:02:17,650 --> 00:02:19,150
And that's the expected behavior.

39
00:02:19,150 --> 00:02:22,630
Basically one of you control the roll pop on top of another view controller.

40
00:02:22,630 --> 00:02:28,320
Show detail is really only used when you're working with you I split the controller.

41
00:02:28,390 --> 00:02:31,630
OK that's where there's like an item on the left side with like a listed on the right hand side of your

42
00:02:31,630 --> 00:02:32,380
controller.

43
00:02:32,470 --> 00:02:37,420
And we're not using a split controller so we wouldn't use this present model is actually going to pop

44
00:02:37,420 --> 00:02:42,280
it up over the screen it may look similar to show but it's actually not functioning the same way under

45
00:02:42,280 --> 00:02:42,650
the hood.

46
00:02:42,670 --> 00:02:47,530
It's actually presenting it modalist on the on top of the entire screen everything and not popping out

47
00:02:47,530 --> 00:02:48,900
on top of the other view controller.

48
00:02:48,920 --> 00:02:55,240
So we don't want that and a pop over is a something that you typically use on iPad and it's a little

49
00:02:55,330 --> 00:02:57,610
sliver of a view controller on the screen.

50
00:02:57,760 --> 00:03:02,030
You might see it like let's say that you're filling out a form and you click the button.

51
00:03:02,080 --> 00:03:06,520
The field that's a state like I want to pick which state I live in in the United States OK or a country

52
00:03:07,150 --> 00:03:11,600
you could have a view controller that has a list table view of all the countries you can select one.

53
00:03:11,620 --> 00:03:13,370
And that pops up on the screen.

54
00:03:13,420 --> 00:03:18,400
But we're not doing that either and custom is completely built from scratch custom Segway with its own

55
00:03:18,400 --> 00:03:21,080
transitions and animations and things like that which we're not doing.

56
00:03:21,100 --> 00:03:22,190
It's needed.

57
00:03:22,210 --> 00:03:24,330
So we'll just go ahead and do show.

58
00:03:24,930 --> 00:03:25,230
OK.

59
00:03:25,240 --> 00:03:28,410
And you can see this new line here and zoom in here.

60
00:03:28,450 --> 00:03:33,040
This new line with this little little icon here OK and this is the storyboard Segway.

61
00:03:33,310 --> 00:03:38,230
Now the right hand side you'll see over here if you have this icon select the appear the attributes

62
00:03:38,230 --> 00:03:42,190
inspector you'll see that there is an identifier a class module.

63
00:03:42,190 --> 00:03:42,590
OK.

64
00:03:42,600 --> 00:03:45,550
And the kind right here is what we just chose.

65
00:03:45,560 --> 00:03:49,890
Well of course we did show and doesn't animate Yes we wanted to animate.

66
00:03:49,960 --> 00:03:50,780
OK.

67
00:03:50,800 --> 00:03:57,670
And one important thing here that we'll use later on in this video is the identifier but right now you

68
00:03:57,670 --> 00:04:03,490
don't need an identifier if you are just loading a view controller from another view controller back

69
00:04:03,640 --> 00:04:04,380
control dragging.

70
00:04:04,390 --> 00:04:05,680
You don't need to set an identifier.

71
00:04:05,680 --> 00:04:06,630
In most cases.

72
00:04:06,670 --> 00:04:07,250
OK.

73
00:04:07,340 --> 00:04:10,960
Now you may have to if you have to make some conditional based logic.

74
00:04:10,960 --> 00:04:13,040
But right now we don't have to do any of that stuff.

75
00:04:13,490 --> 00:04:16,340
And literally that's all we had to do.

76
00:04:16,420 --> 00:04:20,530
I explained it WAY longer than you actually would control direct from a button to the screen.

77
00:04:20,530 --> 00:04:28,240
And if I run the app we should see this view controller here load when this button is clicked OK with

78
00:04:28,240 --> 00:04:29,230
the app loaded.

79
00:04:29,380 --> 00:04:34,270
All we have to do is click this button that says get started and see how it instantly loads the other

80
00:04:34,270 --> 00:04:39,280
view controls so literally that is how easy it is to switch screens and ios a control drag and click.

81
00:04:39,280 --> 00:04:41,590
And many apps do that ended up slopes up.

82
00:04:41,590 --> 00:04:43,720
We have a few places where we are just having.

83
00:04:43,780 --> 00:04:46,420
We just have segues and it just loads another screen.

84
00:04:46,480 --> 00:04:51,790
However most of our segues are actually programmatic in the dev slopes app and you'll find that most

85
00:04:51,790 --> 00:04:58,240
apps that you may load them programmatically because you need to pass certain data you need to make

86
00:04:58,240 --> 00:04:58,740
logic.

87
00:04:58,750 --> 00:05:01,200
And sometimes it just makes more sense because in the code.

88
00:05:01,390 --> 00:05:02,610
But this is pretty cool.

89
00:05:02,610 --> 00:05:08,590
We made some great progress already in just a few seconds so the next thing is well what about going

90
00:05:08,590 --> 00:05:10,320
back if I want to go back to the screen.

91
00:05:10,360 --> 00:05:13,090
Well first off we need to put a back button in here.

92
00:05:13,100 --> 00:05:19,660
So let's type an image or a button excuse me at the bottom right beauty for button and we drag it over

93
00:05:19,660 --> 00:05:21,520
here in the top left.

94
00:05:21,520 --> 00:05:25,170
And what we're going to do is we're just going to set an image on it.

95
00:05:25,180 --> 00:05:27,120
So let's go ahead and say Back button.

96
00:05:27,400 --> 00:05:28,040
OK.

97
00:05:28,300 --> 00:05:34,110
Like so now when you get rid of that text 2 that says button delete that.

98
00:05:34,110 --> 00:05:37,480
Here we go and it's going to eyeball it here.

99
00:05:40,390 --> 00:05:44,070
You know put it up right there do you a white space.

100
00:05:44,070 --> 00:05:45,300
And this is bring it down.

101
00:05:45,600 --> 00:05:46,320
OK.

102
00:05:46,500 --> 00:05:49,510
I'm not making this pixel perfect I'm just putting the button here.

103
00:05:49,510 --> 00:05:50,090
OK.

104
00:05:50,430 --> 00:05:55,080
And I'm going to click the pen button here to add constraints and we'll go ahead and turn on margins

105
00:05:55,150 --> 00:05:59,150
will see zero from the left and from the top six.

106
00:05:59,450 --> 00:06:02,080
Let's go ahead and say we want it 10 from the top.

107
00:06:02,260 --> 00:06:03,310
OK.

108
00:06:03,660 --> 00:06:05,300
Zero from the left margin.

109
00:06:05,310 --> 00:06:07,580
And then let's give it a fixed width and a fixed height.

110
00:06:07,590 --> 00:06:09,430
So it doesn't stretch on us.

111
00:06:09,450 --> 00:06:10,040
OK.

112
00:06:10,200 --> 00:06:12,030
So there's the back button.

113
00:06:12,150 --> 00:06:13,650
So how do we go back.

114
00:06:13,710 --> 00:06:16,450
Well what we do is we want to use an unwind segue.

115
00:06:16,560 --> 00:06:17,010
OK.

116
00:06:17,040 --> 00:06:22,820
And in order to do that we have to write one line of code more or less OK.

117
00:06:22,860 --> 00:06:29,400
Basically what we need to do is we need to write and unwind segue in the view controller that we want

118
00:06:29,400 --> 00:06:34,530
to go to basically when we come back into this view controller what code do we want to be called.

119
00:06:34,530 --> 00:06:38,400
And so we have to do that in order for us to be able to use this back.

120
00:06:38,430 --> 00:06:41,000
So let's go ahead and do that now.

121
00:06:41,270 --> 00:06:46,200
So let's go to the first View Controller the one that we want to go back into.

122
00:06:46,220 --> 00:06:46,750
All right.

123
00:06:48,910 --> 00:06:55,660
And what we're going to do is get rid of this did receive memory warning and we're just going to put

124
00:06:55,870 --> 00:07:00,730
our unwind segue in here's what we're going to do say at IAB action like so.

125
00:07:01,120 --> 00:07:01,630
All right.

126
00:07:01,630 --> 00:07:02,950
It's a function.

127
00:07:02,950 --> 00:07:10,510
And we're going to go and say unwind from and we'll say the skill controller which we haven't created

128
00:07:10,510 --> 00:07:12,490
yet but we have the screen for it right.

129
00:07:12,490 --> 00:07:19,950
We don't have we just don't have the code file let's say unwind segue of type you storyboard segue.

130
00:07:19,960 --> 00:07:25,780
So basically this function will be called when we go back.

131
00:07:25,860 --> 00:07:26,140
OK.

132
00:07:26,140 --> 00:07:29,000
When we go back from the second view controller.

133
00:07:29,200 --> 00:07:29,890
All right.

134
00:07:29,890 --> 00:07:35,020
So again at Iby action and this is an interface builder action so interface builder is calling something

135
00:07:35,020 --> 00:07:35,520
in our code.

136
00:07:35,530 --> 00:07:37,190
It's going to do it for us automatically.

137
00:07:37,510 --> 00:07:38,460
And it's a function.

138
00:07:38,470 --> 00:07:43,630
And we're just calling it unwind from skill b c basically this is the function that gets called when

139
00:07:43,630 --> 00:07:45,300
we click the back button.

140
00:07:45,340 --> 00:07:47,240
OK from the other view controller.

141
00:07:47,440 --> 00:07:50,950
And this is the segue that's occurring if we needed to use it for some reason.

142
00:07:51,190 --> 00:07:55,040
And so now if I go back to my storyboard see this back button here.

143
00:07:55,150 --> 00:07:55,940
OK.

144
00:07:56,080 --> 00:08:01,230
All we need to do is click this and control drag it over here to this third icon that says exit.

145
00:08:01,570 --> 00:08:05,950
And when we let go sure enough there's a new function here it's so one we just wrote called unwind from

146
00:08:05,950 --> 00:08:08,700
skill B C with unwind segue.

147
00:08:09,100 --> 00:08:09,560
OK.

148
00:08:09,730 --> 00:08:11,900
So I just control drag that to there.

149
00:08:12,370 --> 00:08:15,930
And now if I run it again I could get started.

150
00:08:16,160 --> 00:08:19,030
And if I click the back button it disappears.

151
00:08:19,040 --> 00:08:24,460
OK so to go forward a screen all you have to do is control drag from a button of some kind onto the

152
00:08:24,460 --> 00:08:27,010
next view controller and it will load it for you.

153
00:08:27,010 --> 00:08:27,730
Bam.

154
00:08:28,030 --> 00:08:34,480
And then to go back to unwind in the view controller code you want to go back to just implement a function

155
00:08:34,480 --> 00:08:35,690
here called.

156
00:08:35,800 --> 00:08:37,020
That's an IB action.

157
00:08:37,120 --> 00:08:38,380
You can call it whatever you want.

158
00:08:38,400 --> 00:08:39,820
OK it doesn't matter what you call it.

159
00:08:39,820 --> 00:08:43,650
But this is the important thing you need to have the UI storyboard segue.

160
00:08:43,650 --> 00:08:47,880
In fact this one right here you could call this whatever you want to you could call that segue.

161
00:08:47,950 --> 00:08:48,680
OK.

162
00:08:49,060 --> 00:08:52,930
The parameter name doesn't matter but what does matter is that you have one parameter in here of this

163
00:08:52,930 --> 00:08:53,770
type.

164
00:08:53,770 --> 00:08:57,040
So then what happens is your storyboard.

165
00:08:57,700 --> 00:09:01,490
When you control drag to the exit button it will recognize automatically for you.

166
00:09:01,660 --> 00:09:07,210
So we control direct from the back button over to exit and knows to load this one automatically which

167
00:09:07,300 --> 00:09:08,060
is really cool.

168
00:09:08,110 --> 00:09:08,930
So that's simple.

169
00:09:08,950 --> 00:09:09,570
OK.

170
00:09:09,880 --> 00:09:15,700
We have now been able to go between screen to screen back and forth with just a few controlled clicks

171
00:09:15,760 --> 00:09:18,370
and you know one function in there.

172
00:09:18,460 --> 00:09:19,270
Really cool stuff.

173
00:09:19,270 --> 00:09:21,250
So we're going to call this video done.

174
00:09:21,310 --> 00:09:25,630
We have some cleanup to do in the next video and build us natural view controllers with code.

175
00:09:25,630 --> 00:09:28,250
So let's call this done and move on forward.

176
00:09:28,270 --> 00:09:32,150
Mark Price does slopes that come see you soon.