Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Transitioning from one view to another is achieved using a segue. Let's take a look at what a segue is, the different kinds of segues and how we can use them in our views.
Teacher's Notes
-
0:00
Now, we have two view controllers, and we need to get from one to another.
-
0:04
You'll be surprised at how easy this is actually.
-
0:08
First, go to the playlist master view controller implementation file.
-
0:13
That's right here, and let's get rid of the button pressed action.
-
0:18
Now, we need to go back to main.storyboard.
-
0:21
And let's not forget to get rid of the reference to that action
-
0:25
by right clicking on the button and pressing the x over here to get rid of it.
-
0:29
And I'll explain why I did that in a second.
-
0:33
To connect from the master view controller, that's the first scene,
-
0:37
to the second scene, the playlist detail view controller.
-
0:41
Select the button, and then Ctrl+drag over to the Playlist Detail View Controller.
-
0:48
Now a little dialog should pop up, asking you to select a type of action segue.
-
0:54
Let's select Modal for now.
-
0:56
Right now, both views are just plain views with white backgrounds.
-
0:59
So let's change the color so that we can distinguish between them.
-
1:03
First, select the master view and then to select the view it's actually easier if
-
1:07
you bring up the document outline, and select the view from the list over here.
-
1:13
Now in the attributes inspector, we need to change the color and
-
1:17
let's set that to blue.
-
1:19
Any blue works here, so I'm just going to use something that I've recently used.
-
1:24
And we need to change the button text color as well so that we can see it.
-
1:28
Click on the button and then, again,
-
1:29
in the attributes inspector under text color, let's set it to white color.
-
1:35
Let's repeat the same thing for the second view, the detail view controller.
-
1:39
Let's select the view from the list, and
-
1:42
change the background color to something we've used before.
-
1:46
Okay, let's run this app.
-
1:48
And first thing, you'll notice that we don't have an issue anymore.
-
1:52
Now, once we hit Press Me, look at that.
-
1:55
The second view control is up.
-
1:57
What we just did was create a segue.
-
1:59
Spelled S-E-G-U-E, but pronounced S-E-G-W-A-Y, segue,
-
2:05
these objects manage transitioning from one view controller to another.
-
2:11
Now back in our storyboard,
-
2:13
each segue is represented by an arrow from the first view controller to the second.
-
2:18
This icon inside of the arrow represents what type of segue we're using.
-
2:24
When we clicked on the button, we initiated the segue,
-
2:27
which transitioned us to our second view controller.
-
2:30
Now, remember when I asked you to delete the action associated with our button?
-
2:34
That's because a segue overrides an action, and
-
2:38
having this action over here associated with our
-
2:40
button could have potentially caused bugs in our code, and bugs are the worst.
-
2:45
Okay, so when we created that segue, this one over here, we selected a modal option.
-
2:50
Now, we can click it and change it to Push, Pop Over, or
-
2:54
some of the others, and this will change the icon as well.
-
2:58
Now, as you can see, there are some different types of segues, so
-
3:02
which one do we use?
-
3:04
Well, each segue has a specific purpose.
-
3:07
Now there are two basic kinds that are available in every app that you will use.
-
3:12
The first is a modal segue, the one that we just added.
-
3:16
A modal segue presents a view modally.
-
3:20
Great explanation, right?
-
3:21
Well, a modal view provides self contained functionality in the context of
-
3:26
the current task or flow.
-
3:29
It is very similar to an alert view.
-
3:31
That is, it disables access to the rest of the app and
-
3:34
forces you to interact with the current view.
-
3:37
In designing and
-
3:38
building apps, we use a modal view when we need to offer the ability to
-
3:43
accomplish a self-contained task related to our apps primary functionality.
-
3:49
This is best understood through examples.
-
3:51
Let's look at some popular apps.
-
3:54
The Pinterest app enables you to search, find, and pin visual bookmarks.
-
4:00
When you download the app, before you can do any of that,
-
4:03
you need to either create an account by signing up, or logging in.
-
4:09
Both these actions are self contained actions.
-
4:12
You can do either one of those and then go back to using the app and
-
4:16
its main functionality.
-
4:18
Now, since this action is a one time action, we present this sign up or
-
4:22
log in view temporarily on top of the current view as a modal.
-
4:27
This is what is known as presenting a view modaly.
-
4:31
It is presented on top of the existing view, and when we're done with it,
-
4:36
it is dismissed and
-
4:37
we go back to the screen we were on to indicate that we completed that action.
-
4:42
In iOS the default modal animation is for the view to slide up
-
4:47
from the bottom of the screen on top of the existing view, to reinforce the idea
-
4:53
that this is a temporary view on top of what you are currently doing.
-
4:57
Let's look at another app to understand what self contained functionality means.
-
5:02
This next example is of the popular task management app called Things.
-
5:08
In such an app, creating a task is a self contained action.
-
5:12
It isn't part of some workflow, and when we're done creating a task,
-
5:16
we want to go back to where we were, that is, reviewing other tasks.
-
5:21
Because of this type of workflow, creating a new task presents a view modally,
-
5:26
with all the self contained functionality needed to create that task.
-
5:32
Okay, so that's a modal segue, and it's what we just used in our app.
-
5:36
The next main type of segue is a push segue.
-
5:39
Let's jump to the next video to learn more about it
You need to sign up for Treehouse in order to download course files.
Sign up