1

00:00:02,350 --> 00:00:07,800

This what's up everyone.



2

00:00:07,840 --> 00:00:11,370

Mark Price you're dev slopes dot com in case you forgot.



3

00:00:11,770 --> 00:00:17,230

And in this exciting lesson we are going to work with segues basically we're going to get our screens



4

00:00:17,440 --> 00:00:20,860

talking to each other and opening the next screen in the sequence.



5

00:00:21,010 --> 00:00:21,570

OK.



6

00:00:21,730 --> 00:00:27,400

So first things first I'm going to go ahead and prepare my project with get in so I'm going to do get



7

00:00:27,400 --> 00:00:33,710

status to make sure all my commits or changes are or stored at least I got some modifications so add



8

00:00:33,790 --> 00:00:36,110

dash a get commit dash.



9

00:00:36,610 --> 00:00:38,780

And I'm just missing minor changes here.



10

00:00:39,010 --> 00:00:40,430

So that's ad not going to get.



11

00:00:40,450 --> 00:00:44,500

Check out dash b less lesson 0 5.



12

00:00:45,060 --> 00:00:46,580

So working on a new branch here.



13

00:00:46,780 --> 00:00:47,320

OK.



14

00:00:47,320 --> 00:00:50,960

And what I'll also do is open app.



15

00:00:51,040 --> 00:00:52,280

Swoosh.



16

00:00:52,360 --> 00:00:53,430

X code proj.



17

00:00:53,470 --> 00:00:59,440

It's going to open up a new X code project and we can of course open our files on the left hand side



18

00:00:59,440 --> 00:01:01,590

here by clicking the icon at the top right.



19

00:01:01,650 --> 00:01:01,930

OK.



20

00:01:01,930 --> 00:01:03,460

The navigator.



21

00:01:04,010 --> 00:01:04,860

OK.



22

00:01:05,110 --> 00:01:11,080

So what we've done so far is we've got our user interface built already and we've used some stack views



23

00:01:11,770 --> 00:01:16,570

and things looking really nice and all we need to do is basically when the get started button is pressed.



24

00:01:16,570 --> 00:01:18,070

It loads this screen here.



25

00:01:18,070 --> 00:01:18,870

The league screen.



26

00:01:18,880 --> 00:01:26,830

And then when the next button here is press it loads the view controller screen excuse me the screen



27

00:01:26,830 --> 00:01:27,440

is dying.



28

00:01:27,490 --> 00:01:29,870

This is the where you select the skill level.



29

00:01:29,890 --> 00:01:30,930

That's what it's called.



30

00:01:31,330 --> 00:01:38,370

So it's actually quite simple from the interface builder here we can go ahead and just drag on a Segway



31

00:01:38,370 --> 00:01:41,330

directly so let's just do it let's just make it really easy.



32

00:01:41,400 --> 00:01:46,680

So all you have to do literally is click the button or the thing that you want to make a transition



33

00:01:46,680 --> 00:01:47,010

with.



34

00:01:47,130 --> 00:01:48,280

OK.



35

00:01:48,810 --> 00:01:51,570

You can use a gesture recognizer or you can use a button.



36

00:01:51,600 --> 00:01:55,800

I mean if I did a label here it's not going to do anything so has to be something that can trigger some



37

00:01:55,800 --> 00:01:57,060

type of event.



38

00:01:57,090 --> 00:02:02,290

And so a button of course will work just fine for us and all you have to do is control drag from this



39

00:02:02,290 --> 00:02:04,610

view controller on the left hand side over to this one.



40

00:02:04,620 --> 00:02:05,750

This is the one we want to load.



41

00:02:05,910 --> 00:02:06,650

OK.



42

00:02:07,050 --> 00:02:13,160

And you see here a pop up and you can do show show detail present Motorola present of pop over custom.



43

00:02:13,190 --> 00:02:17,710

So the one that we're going to use of course is going to be show because that's the default.



44

00:02:17,730 --> 00:02:19,200

And that's the expected behavior.



45

00:02:19,200 --> 00:02:22,680

Basically one of you control the roll pop on top of another view controller.



46

00:02:22,680 --> 00:02:28,380

Show detail is really only used when you're working with you I split the controller.



47

00:02:28,480 --> 00:02:31,680

OK that's where there's like an item on the left side with like a listed on the right hand side of your



48

00:02:31,680 --> 00:02:32,430

controller.



49

00:02:32,520 --> 00:02:37,470

And we're not using a split controller so we wouldn't use this present model is actually going to pop



50

00:02:37,470 --> 00:02:42,330

it up over the screen it may look similar to show but it's actually not functioning the same way under



51

00:02:42,330 --> 00:02:42,710

the hood.



52

00:02:42,720 --> 00:02:47,580

It's actually presenting it mostly on the on top of the entire screen everything and not popping out



53

00:02:47,580 --> 00:02:48,920

on top of the other view controller.



54

00:02:48,990 --> 00:02:55,290

So we don't want that and a pop over is a something that you typically use on iPad and it's a little



55

00:02:55,380 --> 00:02:57,640

sliver of a view controller on the screen.



56

00:02:57,810 --> 00:03:02,500

You might see it like let's say that you're filling out a form and you click the button but the field



57

00:03:02,500 --> 00:03:07,130

that's a state like I want to pick which state I live in in the United States OK or a country.



58

00:03:07,200 --> 00:03:11,650

You can have a view control that has a list table view of all the countries you can select one.



59

00:03:11,670 --> 00:03:13,420

And that pops up on the screen.



60

00:03:13,470 --> 00:03:18,450

But we're not doing that either and custom is completely built from scratch custom Segway with its own



61

00:03:18,450 --> 00:03:21,180

transitions and animations and things like that which we're not doing.



62

00:03:21,180 --> 00:03:22,240

It's needed.



63

00:03:22,260 --> 00:03:24,320

So we'll just go ahead and do show.



64

00:03:24,950 --> 00:03:25,300

OK.



65

00:03:25,320 --> 00:03:28,490

And you can see this new line here and zoom in here.



66

00:03:28,530 --> 00:03:32,910

This new line with a little a little icon here OK and this is the storyboard Segway.



67

00:03:33,360 --> 00:03:34,700

Now the right hand side.



68

00:03:34,740 --> 00:03:40,020

You'll see over here if you have this icon select the appear the attributes inspector you'll see that



69

00:03:40,080 --> 00:03:42,240

there is an identifier a class module.



70

00:03:42,240 --> 00:03:42,630

OK.



71

00:03:42,630 --> 00:03:45,580

And the kind right here is what we just chose.



72

00:03:45,590 --> 00:03:50,000

And of course we did show and doesn't animate Yes we wanted to animate.



73

00:03:50,010 --> 00:03:50,610

OK.



74

00:03:50,840 --> 00:03:57,460

And one important thing here that we'll use later on in this video is the identifier bar right now.



75

00:03:57,630 --> 00:04:02,880

You don't need an identifier if you are just loading a view controller from another view controller



76

00:04:03,160 --> 00:04:04,430

by control dragging.



77

00:04:04,440 --> 00:04:05,730

You don't need to set an identifier.



78

00:04:05,730 --> 00:04:06,690

In most cases.



79

00:04:06,750 --> 00:04:07,490

OK.



80

00:04:07,490 --> 00:04:11,010

Now you may have to if you have to make some conditional based logic.



81

00:04:11,010 --> 00:04:13,140

But right now we don't have to do any of that stuff.



82

00:04:13,540 --> 00:04:16,390

And literally that's all we had to do.



83

00:04:16,470 --> 00:04:20,610

I explained it WAY longer than you it would control direct from a button to the screen.



84

00:04:20,610 --> 00:04:28,290

And if I run the app we should see this view controller here load when this button is clicked OK with



85

00:04:28,290 --> 00:04:29,220

the uploaded.



86

00:04:29,430 --> 00:04:34,320

All we have to do is click this button that says get started and see how it instantly loads the other



87

00:04:34,320 --> 00:04:39,300

view controls so literally that is how easy it is to switch screens and ios a control drag and click



88

00:04:39,330 --> 00:04:41,620

and many apps do that ended up slopes up.



89

00:04:41,640 --> 00:04:43,760

We have a few places where we are just having.



90

00:04:43,830 --> 00:04:46,470

We just have segues and it just loads another screen.



91

00:04:46,530 --> 00:04:52,230

However most of our segues are actually programmatic in the dev slopes app and you'll find most apps



92

00:04:52,260 --> 00:04:58,790

that you may load them programmatically because you need to pass certain data you need to make logic.



93

00:04:58,800 --> 00:05:02,660

And sometimes it just makes more sense because you're in the code but this is pretty cool.



94

00:05:02,710 --> 00:05:08,970

Made some great progress already in just a few seconds so the next thing is well what about going back



95

00:05:09,000 --> 00:05:10,370

if I want to go back to the screen.



96

00:05:10,410 --> 00:05:12,890

Well first off we need to put a back button in here.



97

00:05:13,170 --> 00:05:19,710

So let's type an image or a button excuse me at the bottom right beauty for button and we drag it over



98

00:05:19,710 --> 00:05:21,060

here in the top left.



99

00:05:21,570 --> 00:05:25,210

And what we're going to do is we're just going to set an image on it.



100

00:05:25,230 --> 00:05:27,220

So let's go ahead and say Back button.



101

00:05:27,450 --> 00:05:28,350

OK.



102

00:05:28,350 --> 00:05:36,270

Like so now when you get rid of that text 2 that says button delete that every go and it's going to



103

00:05:36,430 --> 00:05:37,480

eyeball it here.



104

00:05:40,550 --> 00:05:46,290

You know put it out there you're a white space and this is bring it down OK.



105

00:05:46,560 --> 00:05:49,590

I'm not making this pixel perfect I'm just putting the button here.



106

00:05:49,600 --> 00:05:50,130

OK.



107

00:05:50,490 --> 00:05:55,140

And I'm going to click the pen button here to add constraints and we'll go ahead and turn on margins



108

00:05:55,190 --> 00:05:59,120

we'll see zero from the left and from the top six.



109

00:05:59,490 --> 00:06:05,320

Let's go ahead and say we want to 10 from the top k zero from the left margin.



110

00:06:05,370 --> 00:06:09,510

And then let's give it a fixed width and a fixed height so it doesn't stretch on us.



111

00:06:09,510 --> 00:06:10,080

OK.



112

00:06:10,260 --> 00:06:12,100

So there's the back button.



113

00:06:12,210 --> 00:06:13,700

So how do we go back.



114

00:06:13,770 --> 00:06:16,490

Well what we do is we want to use an unwind segue.



115

00:06:16,620 --> 00:06:17,070

OK.



116

00:06:17,100 --> 00:06:22,730

And in order to do that we have to write one line of code more or less OK.



117

00:06:22,920 --> 00:06:29,460

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,460 --> 00:06:34,590

to go to basically when we come back into this view controller what code do we want to be called.



119

00:06:34,590 --> 00:06:38,490

And so we have to do that in order for us to be able to use this backbone.



120

00:06:38,490 --> 00:06:40,510

So let's go ahead and do that now.



121

00:06:41,330 --> 00:06:46,270

So let's go to the first new controller the one that we want to go back into.



122

00:06:46,280 --> 00:06:46,900

All right.



123

00:06:48,970 --> 00:06:55,360

And what we're going to do is to get rid of this did receive memory warning and we're just going to



124

00:06:55,360 --> 00:07:01,160

put our unwind segue and here's what we're going to do say at Iby action like so.



125

00:07:01,180 --> 00:07:01,630

All right.



126

00:07:01,690 --> 00:07:02,740

It's a function.



127

00:07:03,010 --> 00:07:10,570

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,570 --> 00:07:12,550

yet but we have the screen for it right.



129

00:07:12,550 --> 00:07:19,990

We don't have we just don't have the code file let's say unwind segue up type you storyboard segue.



130

00:07:19,990 --> 00:07:25,830

So basically this function will be called when we go back.



131

00:07:25,930 --> 00:07:26,190

OK.



132

00:07:26,200 --> 00:07:29,240

When we go back from the second view controller.



133

00:07:29,260 --> 00:07:29,950

All right.



134

00:07:29,950 --> 00:07:35,080

So again at IVI action and this is an interface builder action so interface builder is calling something



135

00:07:35,080 --> 00:07:35,590

in our code.



136

00:07:35,590 --> 00:07:37,570

It's going to do it for us automatically.



137

00:07:37,570 --> 00:07:42,850

And it's a function and we're just calling it unwind from skill C basically this is the function that



138

00:07:42,850 --> 00:07:45,360

gets called when we click the back button.



139

00:07:45,400 --> 00:07:50,080

OK from the other view controller and this is the segue that's occurring if we needed to use it for



140

00:07:50,080 --> 00:07:51,220

some reason.



141

00:07:51,220 --> 00:07:55,060

And so now if I go back to my storyboard see this back button here.



142

00:07:55,190 --> 00:07:55,850

OK.



143

00:07:56,140 --> 00:08:01,440

All we need to do is click this and control drag it over here to this third icon that says exit.



144

00:08:01,630 --> 00:08:04,380

And when we let go sure enough there's a new function here.



145

00:08:04,390 --> 00:08:08,940

So when we just wrote called unwind from skill B C with unwind segue.



146

00:08:09,160 --> 00:08:09,640

OK.



147

00:08:09,790 --> 00:08:11,950

So I just control drag that there.



148

00:08:12,430 --> 00:08:16,060

And now if I run it again I click get started.



149

00:08:16,220 --> 00:08:18,980

And if I click the back button it disappears.



150

00:08:19,090 --> 00:08:24,520

OK so to go forward a screen all you have to do is control drag from a button of some kind onto the



151

00:08:24,520 --> 00:08:26,740

next view controller and it will load it for you.



152

00:08:27,070 --> 00:08:27,750

Bam.



153

00:08:28,090 --> 00:08:34,540

And then to go back to unwind in the view controller code you want to go back to just implement a function



154

00:08:34,540 --> 00:08:35,800

here called.



155

00:08:35,860 --> 00:08:37,110

That's an IB action.



156

00:08:37,180 --> 00:08:38,470

You can call whatever you want.



157

00:08:38,550 --> 00:08:39,810

It doesn't matter what you call it.



158

00:08:39,880 --> 00:08:44,530

But this is the important thing you need to have the UI storyboard segue in fact this one right here



159

00:08:44,530 --> 00:08:47,980

you could call this whatever you want to you could you could call that segue.



160

00:08:48,010 --> 00:08:48,990

OK.



161

00:08:49,150 --> 00:08:52,990

The parameter name doesn't matter but what does matter is that you have one parameter and here of this



162

00:08:52,990 --> 00:08:53,620

type.



163

00:08:53,830 --> 00:08:57,360

So then what happens is your storyboard.



164

00:08:57,760 --> 00:09:01,670

When you control drag to the exit button it will recognize automatically for you.



165

00:09:01,690 --> 00:09:07,270

So we control direct from the back button over to exit and knows to load this one automatically which



166

00:09:07,330 --> 00:09:08,160

is really cool.



167

00:09:08,170 --> 00:09:08,960

So that's simple.



168

00:09:08,980 --> 00:09:09,740

OK.



169

00:09:09,910 --> 00:09:15,760

We have now been able to go between screen to screen back and forth with just a few controlled clicks



170

00:09:15,820 --> 00:09:18,390

and you know one function in there.



171

00:09:18,490 --> 00:09:19,330

Really cool stuff.



172

00:09:19,330 --> 00:09:21,310

So we're going to call this video done.



173

00:09:21,370 --> 00:09:25,690

We have some cleanup to do in the next video and build us a natural view controllers with code.



174

00:09:25,690 --> 00:09:28,320

So let's get this done and move on forward.



175

00:09:28,330 --> 00:09:31,000

Mark Price it does slopes that come see you soon.