1

00:00:05,650 --> 00:00:07,310

Hey what's up everyone.



2

00:00:07,310 --> 00:00:10,840

Welcome back to class Mark Price here at death slopes dot com.



3

00:00:10,880 --> 00:00:16,130

And we've done some amazing things so far we've learned about auto layout we've learned about programmatically



4

00:00:16,130 --> 00:00:20,060

moving views with their frames and their positions and their size.



5

00:00:20,060 --> 00:00:23,690

And in this lesson we're going to talk a little bit more about auto layout but we're also we're also



6

00:00:23,690 --> 00:00:27,760

going introduce stack views which is a very very important principle.



7

00:00:27,800 --> 00:00:33,320

So I'm here in my project directory here and what I'm going to do is create a new branch so get check



8

00:00:33,320 --> 00:00:33,830

out.



9

00:00:34,480 --> 00:00:35,750

And this is for my sake.



10

00:00:35,840 --> 00:00:40,820

You can do something similar if you desire or need lessons 0 4 because that's the lesson that we're



11

00:00:40,820 --> 00:00:42,170

on here.



12

00:00:42,170 --> 00:00:43,030

Very cool.



13

00:00:43,340 --> 00:00:48,470

And let's actually let's see what we got here in our directory got our X co-prophet we can actually



14

00:00:48,470 --> 00:00:50,990

do is we can say open app swoosh.



15

00:00:51,340 --> 00:00:56,100

It's called Project and it should open up X code for us automatically.



16

00:00:56,250 --> 00:00:57,460

Make sure it's the beta though.



17

00:00:57,530 --> 00:00:59,470

It is sweet.



18

00:00:59,480 --> 00:01:04,280

So sometimes it gets confused at last regular x Hoad or the beta but all you have to do is have an open



19

00:01:04,700 --> 00:01:09,960

and then the X code proj and it will open up X code for you automatically which is really cool.



20

00:01:10,010 --> 00:01:15,490

Also if you are familiar with X code you may be wondering hey Mark doesn't X go to have get built in



21

00:01:15,500 --> 00:01:18,240

why are you doing all this committing and stuff you know from the terminal.



22

00:01:18,310 --> 00:01:22,080

I do everything from the terminal end and I'm not going to get on a soapbox here.



23

00:01:22,090 --> 00:01:22,690

Well yes I am.



24

00:01:22,700 --> 00:01:29,570

But the reason why is it gives you full full power you're not limited by Tool and code is nice but I've



25

00:01:29,570 --> 00:01:33,710

always done it with a terminal and I switch back between web development Iowa development and doing



26

00:01:33,710 --> 00:01:37,340

it from the terminal as all the same and I don't have to learn a bunch of new tools so that is why I



27

00:01:37,340 --> 00:01:38,480

do it from the terminal.



28

00:01:38,510 --> 00:01:40,130

You're welcome to do however you want.



29

00:01:40,130 --> 00:01:41,490

I'm not your mother.



30

00:01:41,590 --> 00:01:41,890

OK.



31

00:01:41,900 --> 00:01:47,810

So what we got here so far in our app is the main storyboard here and it supports all the device screen



32

00:01:47,810 --> 00:01:52,790

sizes if I click down here the view as I can change it around and you'll see that it works.



33

00:01:52,820 --> 00:01:56,220

And so what we want to do in this video is let's go ahead and just build out our other two screens.



34

00:01:56,240 --> 00:01:59,630

We're not going to connect them or show them yet but we're just going to build them out so we can talk



35

00:01:59,630 --> 00:02:02,630

more about constraints while it's fresh on your brain.



36

00:02:02,960 --> 00:02:08,820

And so I'm going to go find those designs if I don't have them open already which I don't.



37

00:02:09,280 --> 00:02:10,200

OK.



38

00:02:10,550 --> 00:02:16,190

So the flow is going to be we go from the Welcome screen to the league screen and then from the league



39

00:02:16,190 --> 00:02:18,180

screen to this finished screen.



40

00:02:18,170 --> 00:02:21,670

So let's go ahead and do the league screen first.



41

00:02:21,680 --> 00:02:27,060

So what I'm going to do is here in the object library I'm just going to grab this view controller.



42

00:02:27,160 --> 00:02:27,400

OK.



43

00:02:27,410 --> 00:02:28,250

We're going to drag it on.



44

00:02:28,250 --> 00:02:30,130

This is a whole new screen.



45

00:02:30,500 --> 00:02:33,750

And when I say screen it is a view controller.



46

00:02:33,950 --> 00:02:34,590

OK.



47

00:02:34,640 --> 00:02:37,910

But it manages a bunch of views.



48

00:02:37,910 --> 00:02:39,280

It's unique it's not a bug.



49

00:02:39,290 --> 00:02:41,350

And you know I can't put a bug in.



50

00:02:41,440 --> 00:02:46,440

If you notice if I type in button here I can't drag a button on this white canvas here because there's



51

00:02:46,460 --> 00:02:47,090

nothing there.



52

00:02:47,090 --> 00:02:53,510

All the views that you place have to be on top of view controller here in the Interface Builder.



53

00:02:53,510 --> 00:02:56,390

And so I'm going to leave it here just as is floating for now.



54

00:02:56,420 --> 00:02:57,620

And let's go ahead and build it out.



55

00:02:57,640 --> 00:03:02,360

I'm the type the word image we're going to put on an image view when we've done this before.



56

00:03:02,360 --> 00:03:04,840

We're just going to put it on the edges here.



57

00:03:04,880 --> 00:03:08,500

And what we're going to do is go to our pen menu here at the bottom right.



58

00:03:08,600 --> 00:03:13,700

They add new constraints and we're going to add it to all four corners of the edges because we want



59

00:03:13,700 --> 00:03:15,630

it to hug to the corners of the screen.



60

00:03:15,860 --> 00:03:20,900

We want it to be full screen no matter what device it is or when to click add for constraints.



61

00:03:20,900 --> 00:03:21,570

Great.



62

00:03:21,860 --> 00:03:23,680

And what we're going to do is select the image.



63

00:03:23,690 --> 00:03:27,190

And of course this one was the desired league game.



64

00:03:27,230 --> 00:03:32,600

And what we're going to do is instead of scale to fill say aspect fill we don't notice the difference



65

00:03:32,600 --> 00:03:33,780

right here.



66

00:03:34,010 --> 00:03:37,010

But it does make a difference depending on what device size you have.



67

00:03:37,010 --> 00:03:41,780

So it's very important to put an aspect feel you don't want your image stretched especially with it



68

00:03:41,810 --> 00:03:46,400

because it will move things automatically and at runtime you may notice some differences you don't like



69

00:03:46,580 --> 00:03:48,800

aspect feel always or aspect fit.



70

00:03:49,160 --> 00:03:52,570

OK so let's look at that design again purview.



71

00:03:53,000 --> 00:03:53,270

OK.



72

00:03:53,270 --> 00:03:55,010

So what we have here is the logo.



73

00:03:55,010 --> 00:04:00,110

We've got some texture decidedly three buttons here and then a fourth one here.



74

00:04:00,110 --> 00:04:04,400

Now what I want you to do is I want you to think about how you would build this using constraints.



75

00:04:04,630 --> 00:04:06,890

Can Now if you want puzzle video you can go ahead and do that.



76

00:04:06,890 --> 00:04:09,200

How would you build this using constraints.



77

00:04:09,590 --> 00:04:13,690

And then what I want to do is I want to show you a little bit better of a way to do it.



78

00:04:13,700 --> 00:04:15,020

I was going to use constraints.



79

00:04:15,050 --> 00:04:20,120

OK but we're going to work with the stack you stack he was introduced with I was 9 and it's amazing.



80

00:04:20,120 --> 00:04:23,410

And what it does is it builds the constraints for you and a lot of cases.



81

00:04:23,420 --> 00:04:28,790

You're not always going to use a stack view but you should always use one whenever you can and stack



82

00:04:29,000 --> 00:04:32,250

is another step away from pixel perfect so constraints and Ottaway.



83

00:04:32,260 --> 00:04:33,900

It was one step away from stack.



84

00:04:33,900 --> 00:04:35,610

These are like two steps away from it.



85

00:04:35,630 --> 00:04:40,340

So if you can get your look with a stacked view great if you're finding that you can't achieve the look



86

00:04:40,340 --> 00:04:44,540

that you want with the stack the way you're going to have to not use it and instead use constraints.



87

00:04:44,540 --> 00:04:47,180

So let's go ahead and get this going here.



88

00:04:47,180 --> 00:04:50,780

So we've got the swoosh logo on the first view controller.



89

00:04:50,780 --> 00:04:52,080

I'm going to click the ruler here.



90

00:04:52,130 --> 00:04:55,380

And I notice that it's 40 from the top which is fine.



91

00:04:55,520 --> 00:04:57,010

I sort of remember that number here.



92

00:04:57,020 --> 00:05:01,800

I'm going to copy this so command C and then I'm going to go over here to the other view controller



93

00:05:02,090 --> 00:05:06,630

OK down here and on the view I'm going to command V.



94

00:05:06,640 --> 00:05:10,130

Now if this this is not visible for you right here what we just did here.



95

00:05:10,200 --> 00:05:12,670

There's a little icon right here that you can see as we hover over.



96

00:05:12,670 --> 00:05:14,270

It's called the document outline.



97

00:05:14,400 --> 00:05:16,430

OK clicking it expands and hides it.



98

00:05:16,430 --> 00:05:20,920

So if you don't want to see it there you want more screen space you can always hide it like so.



99

00:05:21,010 --> 00:05:24,340

And so what I've done is I've copied it from one controller over to another.



100

00:05:24,340 --> 00:05:28,090

And the reason why I didn't just grab it here and then click over here in pases because sometimes it



101

00:05:28,090 --> 00:05:30,160

just doesn't work.



102

00:05:30,370 --> 00:05:31,870

So no big deal.



103

00:05:32,080 --> 00:05:34,100

So let's just drag this up to the top here.



104

00:05:34,120 --> 00:05:35,980

We're not going to pin anything yet though OK.



105

00:05:36,130 --> 00:05:41,740

And let's look at our preview again see what else we need so we need the desired league and then the



106

00:05:41,740 --> 00:05:42,670

three buttons here.



107

00:05:42,670 --> 00:05:45,990

So let's go ahead and get some text for the desired league.



108

00:05:46,340 --> 00:05:48,130

I'm going to copy this command see.



109

00:05:48,180 --> 00:05:51,380

And over here on THE VIEW on the second view controller command V.



110

00:05:51,760 --> 00:05:59,350

And I'm just going to drag it up eyeball it for now and I'm going to type in desired desired league



111

00:06:00,160 --> 00:06:03,010

and I can't remember if it was camel case or.



112

00:06:03,130 --> 00:06:03,730

OK.



113

00:06:04,060 --> 00:06:04,610

There you go.



114

00:06:04,660 --> 00:06:06,030

As the capital L.



115

00:06:06,520 --> 00:06:08,050

OK desired league.



116

00:06:08,260 --> 00:06:09,710

Good zoom in here for you.



117

00:06:09,760 --> 00:06:10,650

You can see it better.



118

00:06:10,660 --> 00:06:15,340

For those of you who are watching from your mobile devices and we've got our desired league I think



119

00:06:15,440 --> 00:06:17,390

we want the text to be a little bit bigger.



120

00:06:18,680 --> 00:06:19,960

That's good.



121

00:06:19,970 --> 00:06:21,150

So desired league.



122

00:06:21,210 --> 00:06:23,610

What else is on here the three buttons and then a fourth one right.



123

00:06:23,660 --> 00:06:25,030

So these are our standard buttons.



124

00:06:25,070 --> 00:06:29,050

And then the fourth one is a men's women's coed and then next.



125

00:06:29,300 --> 00:06:29,690

OK.



126

00:06:29,720 --> 00:06:31,550

Simple stuff we've done this before.



127

00:06:31,580 --> 00:06:36,990

And luckily we've got existing controls here and you're going to find this is very similar in your professional



128

00:06:37,220 --> 00:06:41,750

development that you can to reuse a lot of controls and copy and paste which is really really nice and



129

00:06:41,750 --> 00:06:44,240

everything I'm showing you here is how you actually build apps.



130

00:06:44,240 --> 00:06:47,840

You know some people do crazy things but we do things the way Apple recommends.



131

00:06:47,840 --> 00:06:53,210

Here at dustups and in our app so everything if you're using the def subs app to watch this which you



132

00:06:53,210 --> 00:06:55,050

should because it's amazing.



133

00:06:55,070 --> 00:06:58,000

Everything that we've done in this app I'm teaching you OK.



134

00:06:58,070 --> 00:07:01,220

There's nothing that we do that's crazy that you're not learning here.



135

00:07:01,360 --> 00:07:01,650

OK.



136

00:07:01,670 --> 00:07:03,410

I'm giving you the real deal here.



137

00:07:03,440 --> 00:07:04,210

OK.



138

00:07:04,910 --> 00:07:06,910

So sometimes it can be confusing which is fine.



139

00:07:06,920 --> 00:07:09,120

It just takes a lot of time and practice.



140

00:07:09,280 --> 00:07:12,030

And I'll explain things over and over again.



141

00:07:12,300 --> 00:07:16,660

And if you ever feel that you're above the curve you can always speed up these videos and watch me at



142

00:07:16,660 --> 00:07:21,230

2 x which is very entertaining or one x is even more entertaining watching me at one X..



143

00:07:21,230 --> 00:07:23,540

I just it's awful.



144

00:07:23,540 --> 00:07:25,340

So Command they get started.



145

00:07:25,410 --> 00:07:25,660

OK.



146

00:07:25,670 --> 00:07:29,510

So Comanche for this get started button over here on the view command V.



147

00:07:29,690 --> 00:07:30,040

OK.



148

00:07:30,050 --> 00:07:31,610

And there's three buttons right.



149

00:07:31,670 --> 00:07:37,130

So I'm just going to holding this here I'm going to go ahead and command to duplicate command did duplicate



150

00:07:37,190 --> 00:07:37,960

again.



151

00:07:38,210 --> 00:07:46,360

All right and what I want to do is men's a women's women's.



152

00:07:46,820 --> 00:07:52,000

Just double clicking these labels here inside the buttons and Co dash ed.



153

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

And then of course there was a next button at the bottom.



154

00:07:55,190 --> 00:07:59,100

Select this either click off and click it and command D wasn't working again.



155

00:07:59,120 --> 00:08:01,600

Sometimes it works sometimes it doesn't.



156

00:08:02,090 --> 00:08:06,230

And it can be finicky like that down here.



157

00:08:06,230 --> 00:08:08,440

We're going to type in the Word next.



158

00:08:08,780 --> 00:08:09,390

OK.



159

00:08:09,650 --> 00:08:15,350

So do you notice how when I click these buttons there they're red on the outside but McLuckie these



160

00:08:15,350 --> 00:08:16,450

ones they're blue right.



161

00:08:16,580 --> 00:08:20,780

Blue is happy blue skies red is like evil demons.



162

00:08:20,780 --> 00:08:22,490

You know you're doing something wrong.



163

00:08:22,880 --> 00:08:26,400

And there's a reason for that there's a reason why this is all red.



164

00:08:26,450 --> 00:08:29,720

And what it's telling us is that our constraints are not set.



165

00:08:29,720 --> 00:08:35,890

Remember how I said when you work with auto lay out everything on the screen must have constraints.



166

00:08:35,900 --> 00:08:40,830

Every single thing on there must be completely laid out with constraints.



167

00:08:40,850 --> 00:08:42,330

So what it's saying is it's not.



168

00:08:42,350 --> 00:08:42,830

None.



169

00:08:42,880 --> 00:08:50,090

Well I don't know why this one's why this was blue shouldn't be but you know these are red.



170

00:08:50,150 --> 00:08:51,200

This is really interesting.



171

00:08:51,200 --> 00:08:53,630

This could be a bug with the X code 9 Beta.



172

00:08:53,900 --> 00:08:57,390

But what it's telling us here is that there's a problem.



173

00:08:57,530 --> 00:08:58,310

OK.



174

00:08:58,310 --> 00:08:59,760

So our stuff's on the screen.



175

00:08:59,840 --> 00:09:05,030

But of course if we look at it you know on an iPad obviously it's not doing what we would expect it



176

00:09:05,030 --> 00:09:06,140

to do.



177

00:09:06,200 --> 00:09:12,980

And so let's go ahead and fix these problems and what we're going to do instead of just using constraints



178

00:09:13,010 --> 00:09:19,160

one at a time you know so pinning this 20 or 40 from the top centering it horizontally which you've



179

00:09:19,160 --> 00:09:20,240

done before.



180

00:09:20,240 --> 00:09:24,620

We're going to use something called a stacked view and stack these take a little bit practice to get



181

00:09:24,630 --> 00:09:29,780

but they're super easy and trial and error is perfectly OK when working with stack use.



182

00:09:29,780 --> 00:09:34,400

So what I'm going to do is I'm going to grab these two items here and what we're going to do is come



183

00:09:34,400 --> 00:09:38,930

on down here to this little icon here that says in bed and stack.



184

00:09:38,930 --> 00:09:40,440

Now I know what you're thinking.



185

00:09:40,490 --> 00:09:44,690

Oh my gosh what just happened my screen got all messed up and so now I'm stacked views are a little



186

00:09:44,690 --> 00:09:49,010

bit finicky but you'll see how easy they are to work with very soon.



187

00:09:49,010 --> 00:09:54,110

So what I'm going to do is over here in the document outline expand this here and let's just go ahead



188

00:09:54,110 --> 00:09:58,910

on this desired league logo here and let's just give it a fix with it we lost it's with.



189

00:09:58,910 --> 00:10:00,830

It's probably at 0 which it is.



190

00:10:00,960 --> 00:10:02,540

And that happens sometimes it's finicky.



191

00:10:02,540 --> 00:10:04,920

So what we're going to do is in the pin menu.



192

00:10:05,020 --> 00:10:05,560

OK.



193

00:10:05,780 --> 00:10:10,360

We're going to give it a fix with let's say of 120.



194

00:10:10,460 --> 00:10:11,640

It's not really long enough.



195

00:10:11,640 --> 00:10:14,900

Let's let's make it a little bit longer.



196

00:10:14,900 --> 00:10:16,840

How about 150.



197

00:10:17,330 --> 00:10:17,580

OK.



198

00:10:17,600 --> 00:10:19,170

So 150.



199

00:10:19,370 --> 00:10:19,700

Perfect.



200

00:10:19,700 --> 00:10:20,810

And we're also going to do.



201

00:10:20,870 --> 00:10:27,630

So that's gone therefore I have to give it a fixed height when I say 20.



202

00:10:27,850 --> 00:10:32,760

So anyway all we did here was we gave this a fixed width and height because once things are in a stacked



203

00:10:32,770 --> 00:10:37,720

view they can be compressed a little bit with content hugging and things like that.



204

00:10:37,750 --> 00:10:39,790

And so we've got a stack.



205

00:10:40,120 --> 00:10:42,240

All right so here's the really cool thing about it.



206

00:10:42,430 --> 00:10:46,720

OK now that we've just played around the view a little bit we can actually pin a stack view to the different



207

00:10:46,720 --> 00:10:48,370

parts of the screen.



208

00:10:48,370 --> 00:10:49,050

OK.



209

00:10:49,120 --> 00:10:53,830

So what we can do is we can just like we've pinned other things before we want this to be 40 from the



210

00:10:53,830 --> 00:10:55,020

top remember.



211

00:10:55,060 --> 00:10:55,410

OK.



212

00:10:55,420 --> 00:11:00,130

And let's go ahead and make sure margins are on and we'll go ahead and say zero from the left and zero



213

00:11:00,130 --> 00:11:01,030

from the right.



214

00:11:01,060 --> 00:11:03,880

And what I want to do is add those three constraints.



215

00:11:03,880 --> 00:11:09,740

Now with a stack you you don't typically ever ever want to give it a fixed height OK.



216

00:11:09,910 --> 00:11:13,850

Or fix with Usually you want to pin it to things but you don't want to give that a fix with a fixed



217

00:11:13,860 --> 00:11:15,190

type of stack.



218

00:11:15,220 --> 00:11:19,540

You will do is take all of these views and cited them and it will automatically add the constraints.



219

00:11:19,540 --> 00:11:20,090

OK.



220

00:11:20,200 --> 00:11:23,320

Now we did have to add a width and height because one of the things got messed up.



221

00:11:23,470 --> 00:11:28,680

But you typically see a size and height excuse me a with a high of some component in there and they



222

00:11:28,690 --> 00:11:30,150

all more around it.



223

00:11:30,190 --> 00:11:34,200

So we can have a whole bunch of components or views in a stack and it adds all the concerns for us so



224

00:11:34,200 --> 00:11:38,030

we don't have to say no leading trailing pin here pin there.



225

00:11:38,260 --> 00:11:39,860

It just automatically works.



226

00:11:39,890 --> 00:11:46,090

So what we can do now with the stacked view OK is we can click this icon over here the attributes inspector.



227

00:11:46,600 --> 00:11:48,120

And here's some properties of the stack.



228

00:11:48,140 --> 00:11:50,170

You say there's an access.



229

00:11:50,200 --> 00:11:51,560

It's a vertical horizontal.



230

00:11:51,560 --> 00:11:55,990

In our case this stack use a horizontal or excuse me a vertical we could change it to a horizontal were



231

00:11:55,990 --> 00:11:57,210

there side by side.



232

00:11:57,370 --> 00:11:59,920

But isn't that cool just by changing this here.



233

00:11:59,920 --> 00:12:03,820

And you can do this programmatically as well to your entire layout changes and you don't have to do



234

00:12:03,820 --> 00:12:04,790

anything else.



235

00:12:05,020 --> 00:12:09,850

OK so if you're starting to see maybe if you envision you have an iPhone app and then when you rotate



236

00:12:09,850 --> 00:12:13,920

it in the landscape all you do is you change the access of the stack and it magically works.



237

00:12:13,930 --> 00:12:15,150

No other code necessary.



238

00:12:15,160 --> 00:12:18,070

Maybe one line of code to switch it to the switch.



239

00:12:18,070 --> 00:12:19,780

The access which is really cool.



240

00:12:20,080 --> 00:12:24,000

So we want vertical alignment center leading field trolling.



241

00:12:24,040 --> 00:12:26,350

You should play around with these big centers fine for right now.



242

00:12:26,350 --> 00:12:26,930

OK.



243

00:12:27,010 --> 00:12:27,460

We don't want to.



244

00:12:27,460 --> 00:12:28,840

On the left we don't want to.



245

00:12:28,830 --> 00:12:31,490

On the right we want it right in the middle.



246

00:12:31,840 --> 00:12:32,800

And then there's distribution.



247

00:12:32,800 --> 00:12:34,850

How are the items inside of it distributed.



248

00:12:35,110 --> 00:12:39,180

Well you can say feel feel equally feel proportionally to the size of the object.



249

00:12:39,190 --> 00:12:41,590

And again these are things that you can play with as well.



250

00:12:41,590 --> 00:12:43,780

But don't ever change this unless I have to.



251

00:12:43,780 --> 00:12:46,390

So I'm really big on feel we may revisit it.



252

00:12:46,690 --> 00:12:48,740

And so this is really cool to the spacing.



253

00:12:48,820 --> 00:12:54,870

So look at this as I add spacing it gets further away and so let's look at our design here.



254

00:12:55,300 --> 00:12:59,520

And so it's we know that it's a lot further from the swoosh logo.



255

00:12:59,590 --> 00:13:00,250

OK.



256

00:13:00,430 --> 00:13:05,690

And I love that I'm looking at the designs 40 from the top is probably a little bit too much.



257

00:13:05,860 --> 00:13:08,760

And oh you know what and it's pinning to a margin here.



258

00:13:08,800 --> 00:13:11,300

So what we probably need is just actually 20 from the margin.



259

00:13:11,320 --> 00:13:13,130

So that makes it a lot more sense.



260

00:13:13,180 --> 00:13:18,460

Let's click our stack view here and just change click the ruler here and then change the top space.



261

00:13:18,460 --> 00:13:19,580

Let's change it to 20.



262

00:13:19,750 --> 00:13:21,470

So it's more like the design.



263

00:13:21,820 --> 00:13:22,060

OK.



264

00:13:22,060 --> 00:13:25,390

So in the stack you just go ahead and increase the spacing.



265

00:13:25,390 --> 00:13:25,770

OK.



266

00:13:25,780 --> 00:13:32,000

So click the identity attributes inspector here and just click this a few more times.



267

00:13:32,410 --> 00:13:32,650

OK.



268

00:13:32,650 --> 00:13:36,990

So this is really cool you can set spacing between objects All right.



269

00:13:36,990 --> 00:13:39,590

And let me show you one more really cool thing that you can do.



270

00:13:39,790 --> 00:13:40,410

All right.



271

00:13:40,630 --> 00:13:45,550

You could just take an item and drag it right in the stack view and automatically adds the constraints



272

00:13:45,550 --> 00:13:48,510

for it so it's doing the same spacing in between them.



273

00:13:48,550 --> 00:13:53,610

Of course the with on this isn't anything important or good because we didn't settle with on it.



274

00:13:53,620 --> 00:13:55,930

We're not saying how much we want it to be.



275

00:13:56,110 --> 00:13:57,100

But that's really cool right.



276

00:13:57,100 --> 00:14:02,020

So you can just drag items in here and they automatically now fit in the stack with the spacing and



277

00:14:02,020 --> 00:14:02,380

everything.



278

00:14:02,380 --> 00:14:03,700

And this is really amazing.



279

00:14:03,700 --> 00:14:04,330

Very powerful.



280

00:14:04,330 --> 00:14:06,540

We never had this until Iowa 9.



281

00:14:07,000 --> 00:14:09,740

So we're not going to do that though I just did that.



282

00:14:09,790 --> 00:14:13,060

So in our stack you here we've got the swish logo in the desired league.



283

00:14:13,060 --> 00:14:14,880

The next thing I want to do is create another stack.



284

00:14:14,890 --> 00:14:15,330

You.



285

00:14:15,610 --> 00:14:19,900

So I'm going to select these three here by holding Shift and of course they have the red lines because



286

00:14:19,900 --> 00:14:25,150

it's saying hey we don't have the constraints and all we're going to do is click that handy dandy stack



287

00:14:25,190 --> 00:14:27,300

you button again at the bottom here.



288

00:14:27,730 --> 00:14:27,970

OK.



289

00:14:27,970 --> 00:14:29,410

Now of course it's ugly again.



290

00:14:29,410 --> 00:14:30,520

That's how it always happens.



291

00:14:30,520 --> 00:14:33,950

But let's go ahead and set the constraints now for the stacked view.



292

00:14:34,230 --> 00:14:39,100

OK so remember what you do is you set constraints on a stacked view and then the things inside you don't



293

00:14:39,100 --> 00:14:42,010

typically set constraints on maybe a with or a high on one of the items.



294

00:14:42,010 --> 00:14:42,400

OK.



295

00:14:42,490 --> 00:14:44,270

But you don't set constraints on them.



296

00:14:44,320 --> 00:14:47,260

So we want this to be on the margins here.



297

00:14:47,260 --> 00:14:49,900

So zere from the left zero from the right.



298

00:14:49,900 --> 00:14:52,340

And how far do we want it to be from the desired league.



299

00:14:52,480 --> 00:14:55,840

Well let's look at our image here.



300

00:14:55,840 --> 00:14:59,590

You know probably 50 I think 50 is probably what we want.



301

00:14:59,800 --> 00:15:02,220

So it's click this pin menu again.



302

00:15:02,380 --> 00:15:04,820

We have to do that against zero from the left from the right.



303

00:15:04,840 --> 00:15:10,960

And let's say 50 from the other stack view OK this is the stack up here we want it to be 50 points or



304

00:15:10,960 --> 00:15:12,110

pixels below it.



305

00:15:12,610 --> 00:15:16,240

And then we're not going to specify a height of course because you don't do that with stack use.



306

00:15:16,930 --> 00:15:18,940

And boom there are three buttons right.



307

00:15:18,980 --> 00:15:20,320

Really really cool.



308

00:15:20,330 --> 00:15:21,960

So we've got three buttons.



309

00:15:21,980 --> 00:15:25,560

But of course the kind of bleeding over each other which is really annoying.



310

00:15:25,670 --> 00:15:27,970

They're probably larger than they should be.



311

00:15:28,010 --> 00:15:29,950

Let's see here.



312

00:15:29,950 --> 00:15:33,180

A 50 50 50 Well that's actually OK.



313

00:15:33,290 --> 00:15:39,620

So what we can actually do since 50 is the correct type is we can go over here on our stack you and



314

00:15:39,620 --> 00:15:43,150

we can just go ahead and add some spacing and they're all 50.



315

00:15:43,550 --> 00:15:47,870

And look at that how magical We didn't have to set constraints we don't have to space every single one



316

00:15:48,170 --> 00:15:49,980

just by changing the spacing.



317

00:15:50,000 --> 00:15:53,630

There are now space properly which is really just fantastic.



318

00:15:53,630 --> 00:15:57,110

So we have to stack these here one at the top one at the bottom.



319

00:15:57,110 --> 00:16:00,660

Why didn't I put these three buttons over here with these.



320

00:16:00,890 --> 00:16:05,430

Well because I've worked to stack these before I know that things can be a little tricky.



321

00:16:05,450 --> 00:16:08,720

And this has a spacing between the swish and the desired league.



322

00:16:08,840 --> 00:16:13,880

But these buttons need to be spaced equally so how could I get a weird spacing here which is abnormal



323

00:16:13,910 --> 00:16:16,520

and then equal spacing here and it would not be easy.



324

00:16:16,520 --> 00:16:21,080

So in our case it made more sense to have a stack at the top and a stack of you at the bottom.



325

00:16:21,080 --> 00:16:21,970

OK.



326

00:16:22,040 --> 00:16:28,160

And of course you can now drags many buttons in here you want so this is what's really amazing about



327

00:16:28,160 --> 00:16:33,950

stack use and also the reason why we don't specify Heights on stack use is because I can do this boem



328

00:16:34,850 --> 00:16:36,690

boem boem.



329

00:16:36,770 --> 00:16:37,180

OK.



330

00:16:37,190 --> 00:16:40,450

And they all just appear here like this.



331

00:16:40,630 --> 00:16:43,020

We don't want to do this but again here's the point.



332

00:16:43,130 --> 00:16:47,810

If we had not used the stack you would have to have manually set all the constraints on every single



333

00:16:47,810 --> 00:16:48,960

button here.



334

00:16:49,040 --> 00:16:49,640

So let's do that.



335

00:16:49,640 --> 00:16:54,010

We don't want to do that of course but OK get rid of that on now on that one.



336

00:16:54,110 --> 00:16:54,860

OK.



337

00:16:55,310 --> 00:16:56,540

So pretty cool.



338

00:16:56,780 --> 00:17:00,710

Men's women's coed Let's see how her design looks compared to this.



339

00:17:00,800 --> 00:17:05,440

You know I'm guessing we're going in a little bit more space because of the borders which is fine.



340

00:17:05,480 --> 00:17:07,030

So it's clicked that stack view here.



341

00:17:07,070 --> 00:17:11,060

You have to select it from the document outline because when you actually click here it selects the



342

00:17:11,060 --> 00:17:12,140

items inside of a stack.



343

00:17:12,160 --> 00:17:14,330

You see if the selected over here on the left hand side.



344

00:17:14,570 --> 00:17:17,160

And let's go ahead and increase that spacing probably to 20.



345

00:17:17,180 --> 00:17:18,880

So those borders are nice in there.



346

00:17:19,160 --> 00:17:24,200

And let's go ahead and lastly pin this one here and it's really helpful that we see the red lines because



347

00:17:24,200 --> 00:17:25,760

we know it's not done yet.



348

00:17:26,060 --> 00:17:31,460

And let's go ahead and just pin it from the bottom 20 from the bottom turn on the margins is zero from



349

00:17:31,460 --> 00:17:32,830

the left zero from the right.



350

00:17:32,840 --> 00:17:35,820

And let's give it a fixed height of 50 k.



351

00:17:36,230 --> 00:17:38,900

And of course the red lines are drawn.



352

00:17:39,140 --> 00:17:40,880

And let's look at on the different screen sizes here



353

00:17:43,750 --> 00:17:45,060

it all looks really good.



354

00:17:45,070 --> 00:17:47,040

And what we did is we used to stack these.



355

00:17:47,260 --> 00:17:47,970

OK.



356

00:17:47,980 --> 00:17:49,040

Pretty cool stuff.



357

00:17:50,420 --> 00:17:51,930

While we're on a roll.



358

00:17:52,160 --> 00:17:57,230

Let's go ahead and just build up the next screen here since this one turned out so nice so quickly.



359

00:17:57,230 --> 00:18:02,020

Elmo a little bit faster so I'm going to type in the view for view controller when I drag it over here.



360

00:18:02,120 --> 00:18:05,200

Another screen typically you have a view control per screen.



361

00:18:05,210 --> 00:18:08,550

Typically it doesn't have to be that way but that's the Apple way.



362

00:18:08,600 --> 00:18:10,000

And let's look at our design.



363

00:18:10,310 --> 00:18:14,580

So it's not the design we want we want this design here.



364

00:18:15,050 --> 00:18:21,650

Cool so let's go ahead and in fact what I'm going to do is I'm going to close the left hand side here



365

00:18:22,040 --> 00:18:26,460

so I can see my image we'll zoom out there a little bit.



366

00:18:26,460 --> 00:18:31,170

Move it over here and that way I can always just see it right there on the screen.



367

00:18:31,800 --> 00:18:32,140

OK.



368

00:18:32,150 --> 00:18:33,730

So we have our view here.



369

00:18:33,740 --> 00:18:38,450

We need the image of course Amona type an image here at the bottom right of the object library.



370

00:18:38,540 --> 00:18:43,400

And I'll just drag this over here to the corners and we're going to pin it to the four corners like



371

00:18:43,400 --> 00:18:48,000

we've done in the past 0 zero zero zero zero constrain the margins is off.



372

00:18:48,050 --> 00:18:48,740

No way.



373

00:18:48,770 --> 00:18:58,140

It actually goes completely to the edges and they change the image on it to the begin ball are you OK



374

00:18:58,510 --> 00:19:05,180

and the content mode is going to be aspect feel perfect and let's grab this logo here.



375

00:19:05,200 --> 00:19:08,870

Make sure you have the logo selected and not the stack view and make sure it is blue over here.



376

00:19:08,870 --> 00:19:15,340

Command C and then on this you control or down here in the document outline in the view command V to



377

00:19:15,340 --> 00:19:16,050

paste.



378

00:19:16,230 --> 00:19:16,930

OK.



379

00:19:17,140 --> 00:19:19,720

And what we'll do is we'll paste it right here.



380

00:19:20,140 --> 00:19:21,580

Actually you have a better idea.



381

00:19:21,640 --> 00:19:24,060

Why don't we just actually do copy the stack view.



382

00:19:24,220 --> 00:19:24,620

OK.



383

00:19:24,640 --> 00:19:27,990

Like so command C in command VI.



384

00:19:28,140 --> 00:19:31,690

OK we'll move it like up here and guess what.



385

00:19:31,720 --> 00:19:35,020

It's maintaining all the properties like the spacing and things like that.



386

00:19:35,410 --> 00:19:39,070

And so that makes it really easy for us and then on this desired league we just change it to.



387

00:19:39,070 --> 00:19:44,090

I am a like so let's zoom in here.



388

00:19:44,140 --> 00:19:45,620

Sorry it's probably a little bit small for you.



389

00:19:45,620 --> 00:19:48,070

They're cool.



390

00:19:48,190 --> 00:19:49,210

So I may.



391

00:19:49,210 --> 00:19:50,270

That looks good.



392

00:19:50,270 --> 00:19:55,420

And we are gonna have to pin the stack to you because the constraints don't copy over.



393

00:19:55,570 --> 00:20:00,040

So the Super view constraints don't copy over and you pay something the ones inside of a collection



394

00:20:00,040 --> 00:20:04,630

might copy over but the ones for the supervened that are pointing to like the edges of the screen those



395

00:20:04,630 --> 00:20:10,810

won't copy over of course and so on this view controller here in the stack view let's go ahead and pin



396

00:20:10,810 --> 00:20:19,450

it to the top concern the margins is on so let's say 20 from the top and yeah we could say zero from



397

00:20:19,450 --> 00:20:21,310

the left and zero from the right.



398

00:20:21,340 --> 00:20:22,650

No big deal.



399

00:20:23,200 --> 00:20:24,350

OK so that's pinned there.



400

00:20:24,370 --> 00:20:27,140

No red lines which is looking good to me.



401

00:20:27,280 --> 00:20:29,220

And then we've got two buttons here.



402

00:20:29,590 --> 00:20:31,670

So let's just copy two buttons.



403

00:20:31,700 --> 00:20:32,560

I'm holding down shift.



404

00:20:32,560 --> 00:20:33,760

I got two buttons selected.



405

00:20:33,780 --> 00:20:34,620

OK.



406

00:20:34,720 --> 00:20:35,680

Command see.



407

00:20:35,700 --> 00:20:40,000

And this down here and this view command V.



408

00:20:41,080 --> 00:20:45,890

And know I copied one maybe and selected one I ok will command and command Be it again.



409

00:20:46,150 --> 00:20:55,040

So now we have two buttons right cool and this one is going to be called beginner be beginner.



410

00:20:55,040 --> 00:20:55,960

There we go.



411

00:20:56,380 --> 00:20:58,320

And bawler.



412

00:20:58,800 --> 00:20:59,610

OK.



413

00:21:00,010 --> 00:21:04,940

And this is probably one of the coolest things ever created with stacked views.



414

00:21:04,940 --> 00:21:09,810

Do you see this beginner and Bawler lay out here where they're both equally divided on the screen.



415

00:21:09,820 --> 00:21:12,490

This was a nightmare to do before stack views existed.



416

00:21:12,520 --> 00:21:13,820

What we would have to have done.



417

00:21:13,840 --> 00:21:18,520

I'll show you real quick just for sake of example see you know the benefit of using a stacked view.



418

00:21:18,760 --> 00:21:25,270

What you would have to have done is typed in you I view grabbed a view here OK pinned the view to the



419

00:21:25,270 --> 00:21:28,830

corners here and then inside of this view put the buttons.



420

00:21:29,050 --> 00:21:30,500

OK.



421

00:21:30,660 --> 00:21:31,870

Like so.



422

00:21:32,190 --> 00:21:36,780

And then put another one in there and then pin them to each other inside of this view and then pin this



423

00:21:36,810 --> 00:21:38,570

other view to the outside there.



424

00:21:38,580 --> 00:21:39,280

OK.



425

00:21:39,300 --> 00:21:41,920

A lot of work for a very simple feature.



426

00:21:42,120 --> 00:21:42,590

OK.



427

00:21:42,630 --> 00:21:43,850

And I didn't show you all the stats.



428

00:21:43,860 --> 00:21:48,810

I'm just showing you what you kind of had to do to go through now with stack to use if you ever ever



429

00:21:48,870 --> 00:21:52,720

ever want to divide something across the screen like that like in this image here.



430

00:21:52,860 --> 00:21:58,980

Simply select both the items put them in a stack you by clicking the stack button and change the X to



431

00:21:58,980 --> 00:22:01,760

horizontal and boom you're done.



432

00:22:01,950 --> 00:22:04,770

And again you're probably thinking this is ugly.



433

00:22:05,030 --> 00:22:06,470

It's not doing what we want.



434

00:22:06,480 --> 00:22:07,010

Wow.



435

00:22:07,110 --> 00:22:08,690

That's the easy fix.



436

00:22:08,690 --> 00:22:11,830

K. let's let's move this stack view up here.



437

00:22:11,980 --> 00:22:16,590

OK let's move it right here so let's look at this other stack for you.



438

00:22:16,590 --> 00:22:18,060

How far was it from the top.



439

00:22:18,060 --> 00:22:24,390

It was look at its constraint top spaces 50 so the stack is 50.



440

00:22:24,390 --> 00:22:28,790

From this let's keep ours consistent down here so I'm going to click that beginner Bawler stack view



441

00:22:29,340 --> 00:22:35,340

and let's go ahead and say we want a 50 from the I am a label and let's go to zero from the left and



442

00:22:35,340 --> 00:22:36,940

zero from the right margins.



443

00:22:37,110 --> 00:22:37,710

OK.



444

00:22:38,130 --> 00:22:39,870

So it's spreading all the way across.



445

00:22:40,050 --> 00:22:44,100

And you can see that something else is wrong but that's also an easy fix.



446

00:22:44,100 --> 00:22:49,100

So over here you see this icon over here the actuates inspector and your stack view.



447

00:22:49,260 --> 00:22:54,210

Let's look at we have here so the alignment is fill and the distribution is filled so the distribution



448

00:22:54,210 --> 00:22:55,590

is saying hey I don't care how you fill it.



449

00:22:55,620 --> 00:22:56,790

Just fill it.



450

00:22:57,030 --> 00:23:00,120

But that's not what we want because we need some equal spacing here.



451

00:23:00,150 --> 00:23:03,090

So distribution to be filled equally.



452

00:23:03,120 --> 00:23:05,910

Now both the buttons are filled equally.



453

00:23:05,910 --> 00:23:12,280

And the last thing that we have to do is simply add some spacing on that.



454

00:23:12,890 --> 00:23:19,370

And there are going to outline so let's do 25 yeah cool.



455

00:23:19,380 --> 00:23:20,360

It's that easy.



456

00:23:20,560 --> 00:23:21,360

OK.



457

00:23:21,450 --> 00:23:22,730

Really really cool.



458

00:23:23,040 --> 00:23:24,700

I mean I don't know what else to say it's really awesome.



459

00:23:24,710 --> 00:23:28,410

And if you wanted to add another button of course inside of it.



460

00:23:28,440 --> 00:23:32,400

Copy this next button paste the here and drag it in.



461

00:23:32,460 --> 00:23:36,230

It automatically resides then it makes it all equal.



462

00:23:36,510 --> 00:23:39,590

And that would have been near impossible to do before.



463

00:23:39,600 --> 00:23:42,730

I mean we've done it but it's just well anyway.



464

00:23:42,990 --> 00:23:43,860

Really cool stuff.



465

00:23:44,030 --> 00:23:44,810

Thank you.



466

00:23:44,890 --> 00:23:46,940

One more thing on the screen that we need to do.



467

00:23:47,010 --> 00:23:52,500

Is this another button so I will copy this next ball and paste it over here and we will drag it down



468

00:23:52,500 --> 00:23:53,470

here at the bottom.



469

00:23:53,520 --> 00:23:56,810

Double click the label inside megacities finish all caps.



470

00:23:56,810 --> 00:23:59,490

Actually our next button should be all caps too.



471

00:23:59,490 --> 00:24:01,530

That's what the design calls for.



472

00:24:01,530 --> 00:24:04,990

And let's go ahead and pin this 20 to the bottom that's fine.



473

00:24:05,010 --> 00:24:08,520

Zero from the left and from the right because constrain the margins is on.



474

00:24:08,640 --> 00:24:14,730

And of course we are going to need the height there because it's not attached to anything any type of



475

00:24:14,730 --> 00:24:18,230

relationship up here and boom.



476

00:24:18,300 --> 00:24:23,650

So that's it like we designed this layout so fast and I did explain it.



477

00:24:23,670 --> 00:24:26,900

So it took a little while but imagine doing this on your own once you had this down.



478

00:24:26,900 --> 00:24:28,980

It would take like a minute or two max.



479

00:24:28,980 --> 00:24:29,600

OK.



480

00:24:29,880 --> 00:24:31,040

So this is really cool.



481

00:24:31,190 --> 00:24:32,910

Really really cool actually.



482

00:24:33,000 --> 00:24:35,550

And I like what I see so far.



483

00:24:35,550 --> 00:24:38,790

Now of course though the outlines will come when we build and run this now we don't need to do that



484

00:24:38,790 --> 00:24:43,320

right now though we know we know it's going to work so long as our button is a tight border button which



485

00:24:43,320 --> 00:24:47,480

it is because we've been copying and pasting so let's call this video done.



486

00:24:47,490 --> 00:24:49,320

What have we done and learned.



487

00:24:49,410 --> 00:24:49,970

OK.



488

00:24:50,270 --> 00:24:56,420

We have learned that we can you stack views OK to make our life much easier when working with Attilio.



489

00:24:56,460 --> 00:25:01,140

Because a stack view will automatically add constraints to the views inside.



490

00:25:01,380 --> 00:25:06,360

However sometimes a stacked view needs a base point in order to work with.



491

00:25:06,360 --> 00:25:09,720

So you may have to set the width and the height of an element inside of it.



492

00:25:09,720 --> 00:25:15,810

So the other elements know how to react to it and you may say well that's not very scientific and there



493

00:25:15,810 --> 00:25:19,710

isn't a science behind it and it isn't the apple documentation all the details that you need there.



494

00:25:19,800 --> 00:25:26,310

I just showed you how how we solve that problem and stack views though are very very easy.



495

00:25:26,410 --> 00:25:29,710

So really good stuff here.



496

00:25:29,730 --> 00:25:34,650

We use them all the time on the slopes and they are a very useful and powerful tool so you'll be using



497

00:25:34,690 --> 00:25:40,500

these for the rest of your life as an office developer with manual constraints and you also we've talked



498

00:25:40,500 --> 00:25:45,670

about this and the other video but you also learn how to program move things around with frames.



499

00:25:45,670 --> 00:25:50,520

We also do that in the desktops app and a couple of the screens were auto layout didn't work for the



500

00:25:50,520 --> 00:25:55,650

purposes that we need to actually move things on the screen with with programming.



501

00:25:55,650 --> 00:26:05,070

And the example is basically on the main screen of the slopes app we have these swipe Bubel scroll icons



502

00:26:05,160 --> 00:26:09,360

and we need to support it in landscape and in all the different orientations and it needed to be nearly



503

00:26:09,360 --> 00:26:11,390

pixel perfect because our designers really anal.



504

00:26:11,460 --> 00:26:16,080

And so I actually did in that case build some very custom logic with programming moving frames around



505

00:26:16,080 --> 00:26:20,160

and calculatingly device with and all these different things so everything laid out perfectly nice and



506

00:26:20,160 --> 00:26:25,110

all screen devices so you will do that from time to time which is why I showed you but this is what



507

00:26:25,110 --> 00:26:25,440

you'll do.



508

00:26:25,440 --> 00:26:26,080

Most of the time.



509

00:26:26,080 --> 00:26:26,860

So that's it for now.



510

00:26:26,880 --> 00:26:29,280

Marc price at death's slopes dot com.



511

00:26:29,280 --> 00:26:30,120

Moving on for.