1

00:00:02,320 --> 00:00:09,030

This what everyone does go to the dot.com.



2

00:00:09,040 --> 00:00:14,310

And in this exciting lesson we're going to learn how to work with auto layout and multiple screen sizes



3

00:00:14,320 --> 00:00:16,470

namely iPad versus iPhone.



4

00:00:16,540 --> 00:00:23,110

What a lot of new developers do is they'll just make one set of designs that look good.



5

00:00:23,110 --> 00:00:23,730

OK.



6

00:00:23,730 --> 00:00:24,250

And I bet.



7

00:00:24,250 --> 00:00:26,560

But it's mostly for iPhone but they want a spore iPad only.



8

00:00:26,560 --> 00:00:31,990

But that's not the Apple way the apple weighs to build a user interface that accentuates the larger



9

00:00:31,990 --> 00:00:34,860

screen size and makes the experience even better.



10

00:00:35,140 --> 00:00:37,820

And so I'm in a pulp in a couple of images here.



11

00:00:38,150 --> 00:00:40,520

OK so this app is called The Death profile.



12

00:00:40,650 --> 00:00:41,470

OK.



13

00:00:41,590 --> 00:00:45,700

And notice here there are some differences between the phone version and the pad version.



14

00:00:45,760 --> 00:00:46,340

OK.



15

00:00:46,570 --> 00:00:50,610

So the phone version you know the these icons right here are lined up here in the middle.



16

00:00:50,620 --> 00:00:52,350

Centered in the middle of the screen.



17

00:00:53,080 --> 00:00:59,170

This icon this image here is a little bit taller Looking at least when you compare them side by side



18

00:00:59,180 --> 00:01:03,880

it's taller versus when you can see there's more space between this computer and the bottom than there



19

00:01:03,880 --> 00:01:09,250

is right here in here on the iPad these three icons are on the right hand side of the screen and then



20

00:01:09,250 --> 00:01:11,310

on the iPhone These are squares.



21

00:01:11,310 --> 00:01:14,180

But on the iPad these are rectangles.



22

00:01:14,370 --> 00:01:17,470

And one more thing on the iPad there's a button called customized dashboard.



23

00:01:17,470 --> 00:01:18,880

I'm on the iPhone that doesn't exist.



24

00:01:18,880 --> 00:01:20,230

It's hidden altogether.



25

00:01:20,560 --> 00:01:25,910

And this is a lesson that a lot of courses and lessons out there neglect to teach.



26

00:01:25,960 --> 00:01:32,650

And that's how to use basically traits for the different devices.



27

00:01:32,650 --> 00:01:40,690

So basically being able to build a layout for let's say a compact with which is an iPhone versus a regular



28

00:01:40,690 --> 00:01:44,540

with regular height which is an iPad and then varying for those different traits.



29

00:01:44,530 --> 00:01:49,840

And so you can do lots of things so that you can hide and show things you can have bigger font sizes



30

00:01:49,840 --> 00:01:52,930

for bigger tablets and things bigger devices and things like that.



31

00:01:53,090 --> 00:01:54,780

OK so that's what we're going to work on.



32

00:01:54,850 --> 00:01:56,050

But first things first.



33

00:01:56,170 --> 00:01:58,570

Let's go ahead and just clone repo here.



34

00:01:58,840 --> 00:02:03,100

You don't have to follow the step unless you've created a repo for this project which you probably should



35

00:02:03,250 --> 00:02:08,380

get help you should go create a repo for your project and then clone it like so which is what I'm going



36

00:02:08,380 --> 00:02:08,530

to do.



37

00:02:08,530 --> 00:02:09,880

I'm going to clone the S-sh.



38

00:02:09,880 --> 00:02:10,630

You are ill.



39

00:02:10,690 --> 00:02:13,530

And then at my terminal here I'm already in the right directory.



40

00:02:13,600 --> 00:02:18,600

I'm just going to say get clone and paste in the URL like so.



41

00:02:19,190 --> 00:02:20,310

And it's going to cloning here.



42

00:02:20,380 --> 00:02:22,830

And I've cloned an empty repository which is fine.



43

00:02:22,870 --> 00:02:30,310

LS And there it is so a CD app dev profile and this is cool so all I need to do now is create an X code



44

00:02:30,310 --> 00:02:31,260

project in here.



45

00:02:31,300 --> 00:02:40,030

So let's do that and go to X code beta create a new X code project single view app is fine and I'm going



46

00:02:40,030 --> 00:02:42,280

to call this dev Dasch profile.



47

00:02:42,520 --> 00:02:44,560

And this all looks good here.



48

00:02:45,430 --> 00:02:52,130

And then let's go ahead and just put it in the APTA profile here and click Create awesome.



49

00:02:52,310 --> 00:02:54,130

So it looks good to me.



50

00:02:54,140 --> 00:02:57,080

Let's go back to my terminal command space for the spotlight.



51

00:02:57,230 --> 00:03:01,170

And last year and we got this new project a profile.



52

00:03:01,250 --> 00:03:10,640

So now we're in here and see get status so we've got our changes here so get at a good commit am initial



53

00:03:10,730 --> 00:03:18,090

tax code project and then the last thing I want to do is actually just create a branch so get check



54

00:03:18,100 --> 00:03:22,840

out Ashby and we're going to call this lesson 0 1 boom.



55

00:03:22,950 --> 00:03:23,190

OK.



56

00:03:23,200 --> 00:03:24,790

So we're all set up ready to go.



57

00:03:25,000 --> 00:03:28,450

And again you don't have to use version control and this if you want but I recommend that what you do



58

00:03:28,450 --> 00:03:32,200

is whenever you can it Project going to get a new project specially if you're learning and want to get



59

00:03:32,200 --> 00:03:37,120

a job having these projects on there will help you get exposure and let people look at your code and



60

00:03:37,120 --> 00:03:37,810

your work.



61

00:03:38,140 --> 00:03:42,580

So what we're going to do first is we're going to build out the iPhone screen here.



62

00:03:42,610 --> 00:03:50,620

What I typically like to do is look at both the profiles or both the iPad and the iPhone layouts together



63

00:03:50,710 --> 00:03:55,630

like we did and kind of just think about what I'm going to have to do differently for an iPad because



64

00:03:55,770 --> 00:03:59,170

what we'll end up doing is we'll build the iPhone first but it lets us think ahead.



65

00:03:59,170 --> 00:04:02,610

So I already know that you know this image might be a little different.



66

00:04:02,650 --> 00:04:06,640

I know that these icons might be a little different and these ones here and this one here so it's just



67

00:04:06,640 --> 00:04:10,270

something worth thinking about as we're building the iPhone layout.



68

00:04:10,320 --> 00:04:13,000

So let's go ahead and do the iPhone first.



69

00:04:13,000 --> 00:04:16,190

So what I want to do is zoom out here so I can keep this image open at all times.



70

00:04:17,250 --> 00:04:20,420

Like so it's not letting me move it as usual.



71

00:04:20,500 --> 00:04:24,130

That's OK we'll just move this right here and move this over here.



72

00:04:25,490 --> 00:04:27,410

And now this is looking real nice.



73

00:04:27,760 --> 00:04:28,340

OK.



74

00:04:29,430 --> 00:04:35,150

Cool and so actually open up our navigator here again and let's go into our main storyboard and we've



75

00:04:35,150 --> 00:04:36,360

got a blank canvas here that's great.



76

00:04:36,360 --> 00:04:40,770

So the next thing I want to do is just bring over all the images that are required for the project.



77

00:04:40,770 --> 00:04:42,290

I've got them here and a folder.



78

00:04:42,510 --> 00:04:43,780

You have them as well.



79

00:04:43,980 --> 00:04:47,750

And all we're going to do is go into the assets folder and we're going to drag all those and so command



80

00:04:47,770 --> 00:04:50,120

a on the images that are on my other screen here.



81

00:04:50,190 --> 00:04:55,470

And I'm going to drag them in and I've given you 1 x 2 x 3 x images for everything.



82

00:04:55,530 --> 00:04:56,300

Cool.



83

00:04:56,700 --> 00:04:58,560

So back to the main story board.



84

00:04:58,710 --> 00:05:00,410

Let's go ahead and build this layout.



85

00:05:00,450 --> 00:05:02,930

So first things first is I know this is an image back here.



86

00:05:03,090 --> 00:05:07,380

And so what we're going to do like I mean this could have been you know a view that we set a grading



87

00:05:07,380 --> 00:05:08,360

on and put an image in the middle.



88

00:05:08,370 --> 00:05:11,010

But the way our designer did it was he gave us a single image.



89

00:05:11,130 --> 00:05:11,720

OK.



90

00:05:13,080 --> 00:05:14,460

So let's open up the right hand side here.



91

00:05:14,460 --> 00:05:20,190

Right clicking this top right icon over here utilities and I'm going to type in the word image to bring



92

00:05:20,190 --> 00:05:23,760

up an image of you and we're simply going to drag it up here to the top.



93

00:05:23,760 --> 00:05:25,970

And I'm just going to eyeball this.



94

00:05:26,280 --> 00:05:27,730

I'm going to make a pixel perfect.



95

00:05:27,900 --> 00:05:34,020

And what I'm going to do is go ahead and pin this from the top from the left and from the right and



96

00:05:34,560 --> 00:05:36,290

I will give this a fixed height.



97

00:05:36,310 --> 00:05:41,040

For now I may change it later if we need to but for now I'll give it a fixed height and just assuming



98

00:05:41,040 --> 00:05:42,440

it will work on both iPhone and iPad.



99

00:05:42,450 --> 00:05:47,180

Again you don't want to stress out about supporting both screen sizes at the same time.



100

00:05:47,190 --> 00:05:50,070

Build it out for iPhone first and then go onto the iPad.



101

00:05:50,070 --> 00:05:53,990

So give it a fixed height let's say 150 since it's a more even number.



102

00:05:54,150 --> 00:05:56,280

And that looks good.



103

00:05:56,280 --> 00:06:01,440

Now the next thing is I'm going to select this image here and let's just go ahead and get the background.



104

00:06:01,460 --> 00:06:03,580

And it's just this slow speed here.



105

00:06:03,780 --> 00:06:05,000

And of course we have a problem.



106

00:06:05,010 --> 00:06:05,990

It's stretching it.



107

00:06:06,090 --> 00:06:09,260

So instead of Skelp to feel how about aspect feel.



108

00:06:09,450 --> 00:06:15,390

Now you notice when we do aspect feel it goes out of the edges here OK which isn't good.



109

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

We don't want it to do that we want to cut it off.



110

00:06:17,700 --> 00:06:21,090

And so whenever you're working with aspect feel if your image goes beyond the bounds.



111

00:06:21,090 --> 00:06:22,350

All you have to do.



112

00:06:22,380 --> 00:06:27,210

You can do this via code or here an interface builder is go down to clip to bounce and click it and



113

00:06:27,210 --> 00:06:30,080

what's going to happen is anything that's out of the bounds is going to be clipped.



114

00:06:30,090 --> 00:06:34,360

And this is a common problem that a lot of new developers have is this clip to bounce Oh what do I do.



115

00:06:34,360 --> 00:06:37,020

How do I it's going off the edge and they think something's wrong.



116

00:06:37,200 --> 00:06:41,520

That happens a lot is that you sometimes just like to bleed out and stack TVs and you think your stack



117

00:06:41,640 --> 00:06:44,720

is broken but it's not it's just your clip to bounce.



118

00:06:44,770 --> 00:06:47,630

I'm going to turn that on so it clips it cool.



119

00:06:47,760 --> 00:06:48,740

That was easy.



120

00:06:48,750 --> 00:06:52,240

So next thing we'll do is this little icon here on the left hand side.



121

00:06:52,350 --> 00:06:55,090

So I want to do another image of you.



122

00:06:55,270 --> 00:06:58,570

This might be you like a profile right like on a profile screen or something.



123

00:06:58,600 --> 00:07:01,680

So let's just say 150 by 150.



124

00:07:01,720 --> 00:07:02,960

That's a little large.



125

00:07:03,070 --> 00:07:08,930

Say one 21:20 that's still seemed a little big.



126

00:07:08,930 --> 00:07:10,910

How about 110 by 110.



127

00:07:10,920 --> 00:07:12,050

Again I'm just eyeballing this.



128

00:07:12,050 --> 00:07:17,620

I know it is a square but just eyeballing it drag it around here and looks about right.



129

00:07:17,630 --> 00:07:23,290

It's going to change the image on this and this one is like a profile image so that's not it.



130

00:07:24,000 --> 00:07:27,560

Let's look for depth slopes profile logo.



131

00:07:27,560 --> 00:07:28,890

There it is perfect.



132

00:07:29,030 --> 00:07:32,370

And let's just go ahead and do aspect fill it.



133

00:07:32,390 --> 00:07:34,690

It's not going to stretch because the image is a square.



134

00:07:34,820 --> 00:07:38,060

I always keep it an aspect feel anyway in case it ever did change.



135

00:07:38,090 --> 00:07:39,740

So I've got this image here.



136

00:07:39,770 --> 00:07:47,550

Let's get the label on the screen that says depth slopes and notice how it's not actually here in the



137

00:07:47,550 --> 00:07:49,470

center if it's in the center.



138

00:07:51,170 --> 00:07:53,560

On the image if it's in the center it just doesn't look quite right.



139

00:07:53,560 --> 00:07:54,980

Looks like it's almost a little lower.



140

00:07:55,430 --> 00:08:00,600

But for the time being I will put it in the center just to just to keep things easy for now.



141

00:08:00,620 --> 00:08:02,090

We'll go back and adjust later.



142

00:08:02,900 --> 00:08:08,740

Going to go change my font to custom am I go to Avenir I just like that font.



143

00:08:08,830 --> 00:08:14,960

Avenir And let's just change it to medium and change the font size a little bit.



144

00:08:15,280 --> 00:08:17,250

And we're gonna make the same slopes.



145

00:08:17,530 --> 00:08:23,740

We're not going to write any code in this lesson or this is all about supporting iPad and iPhone using



146

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

just the constraint system OK.



147

00:08:26,260 --> 00:08:30,730

And the different size classes so def slow Silex good.



148

00:08:30,760 --> 00:08:34,780

And also I'm not going to go in the code and show you how to do these rounded corners.



149

00:08:34,780 --> 00:08:36,590

You already know how to do that which is.



150

00:08:36,780 --> 00:08:42,940

You can either reference an ideology or create a custom view and then set Lehre dark corner radius and



151

00:08:42,940 --> 00:08:46,350

then it'll set the corner radius on this on this image here.



152

00:08:46,420 --> 00:08:52,060

So you can do that on your own for practice and then I'm going to put three more images these icons



153

00:08:52,060 --> 00:08:52,240

here.



154

00:08:52,240 --> 00:08:54,720

You know these could be buttons as well.



155

00:08:54,800 --> 00:08:57,050

Now I guess we can make them Bundes let's make them buttons.



156

00:08:57,130 --> 00:09:01,120

Why not make three little buttons like so.



157

00:09:01,210 --> 00:09:08,020

And we'll take out the word button and what we'll do is we'll put an image here and this image is probably



158

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

going to be the camera icon with the camera but the camera button.



159

00:09:11,870 --> 00:09:12,690

There we go.



160

00:09:12,760 --> 00:09:19,440

Make it a little bigger I'm holding down shift so it stays in the square it maintains the aspect ratio.



161

00:09:19,630 --> 00:09:25,860

And all I'm going to do is command c command V or I can command d to duplicate the same thing.



162

00:09:25,860 --> 00:09:27,600

You've got three buttons that's the camera.



163

00:09:27,610 --> 00:09:29,440

I think this other one is the favorite.



164

00:09:29,440 --> 00:09:36,520

So a second favorite button and this one is in box but and like so.



165

00:09:36,550 --> 00:09:38,980

And of course it probably makes sense to put those in a stack.



166

00:09:39,110 --> 00:09:40,780

You will get to that in a minute.



167

00:09:40,960 --> 00:09:46,300

So whenever you start seeing grid things like this immediately comes to mind stack you stack because



168

00:09:46,670 --> 00:09:50,120

it just it makes things really easy to work with here on this.



169

00:09:50,140 --> 00:09:55,090

I'm not sure yet if we want to use a stacked view because we may have to manipulate the text and it's



170

00:09:55,120 --> 00:09:55,920

position and stuff.



171

00:09:55,920 --> 00:09:57,440

So anyway we'll see.



172

00:09:57,520 --> 00:09:59,920

Let's go and get these other four images on here.



173

00:09:59,920 --> 00:10:04,720

So we had an image here and for an iPhone it's a square right.



174

00:10:04,720 --> 00:10:07,030

So let's let's round let's guess.



175

00:10:07,090 --> 00:10:10,760

You know we want 150 but 150 could be four on there.



176

00:10:10,810 --> 00:10:14,780

You know maybe let's do one 30 by 130 just to be safe for now.



177

00:10:15,740 --> 00:10:18,120

And what we'll do is we'll set the image on this one.



178

00:10:18,170 --> 00:10:24,170

So this one is data and it's stretching it stretching stretching the graphic a little bit so let's say



179

00:10:24,170 --> 00:10:26,100

aspect feel OK.



180

00:10:26,150 --> 00:10:30,540

And then of course turn on clip to bounce because it's bleeding.



181

00:10:30,560 --> 00:10:31,790

Looks good to me.



182

00:10:31,790 --> 00:10:38,360

And then let's go ahead and commanded a duplicate and we got another image right here and this one is



183

00:10:38,360 --> 00:10:42,440

going to be data not data.



184

00:10:42,440 --> 00:10:47,720

This one is video code videos image and it's not right.



185

00:10:48,690 --> 00:10:52,280

I think it's just image images image.



186

00:10:52,310 --> 00:10:53,630

That's a weird name.



187

00:10:53,630 --> 00:10:54,720

Blame it on the designer.



188

00:10:54,730 --> 00:10:55,750

You can yell at him later.



189

00:10:55,790 --> 00:10:56,490

OK.



190

00:10:56,690 --> 00:10:58,740

So now we can probably put these two in a stack.



191

00:10:58,760 --> 00:11:02,260

You just to make sure we start tying tying up the loose ends here.



192

00:11:02,270 --> 00:11:08,440

We got to tie some loose ends so let's select this and this and let's put them in a stack.



193

00:11:08,740 --> 00:11:12,640

And of course you're like oh it's broken again what do I do again Mark.



194

00:11:12,650 --> 00:11:13,850

Stock futures are scary.



195

00:11:13,850 --> 00:11:17,120

Well it is really annoying that it does this but we'll fix it.



196

00:11:17,120 --> 00:11:22,940

So what's happened here is stack views they like to do the thinking for you right remember they do constraints



197

00:11:22,940 --> 00:11:23,780

for you.



198

00:11:23,900 --> 00:11:30,110

And so without putting some type of limitations on the stack we have weird things that happen like this.



199

00:11:30,140 --> 00:11:34,240

And so what I want to do is maybe set a max with on this one image here.



200

00:11:34,250 --> 00:11:36,830

Let's say a max with and this is how you do it.



201

00:11:36,860 --> 00:11:42,590

So let's click the pin button on this image so that kind of select the image itself here data image



202

00:11:43,050 --> 00:11:50,480

could depend button and sets sort of Max with 500 but let's add it to what we had it one say 130.



203

00:11:50,820 --> 00:11:51,400

OK.



204

00:11:52,730 --> 00:11:54,070

Is that really that small.



205

00:11:54,090 --> 00:11:59,980

OK maybe we should say 1 140 on 140 on that looks a little bit small.



206

00:12:00,210 --> 00:12:01,320

OK 140.



207

00:12:01,350 --> 00:12:05,730

And notice how when I double clicked on that constraint so select your image and see that constraint



208

00:12:05,730 --> 00:12:07,830

there the with equals 140.



209

00:12:07,860 --> 00:12:14,760

So with stack views you don't typically want to fix with a fixed height you can it and it'll work in



210

00:12:14,760 --> 00:12:20,640

most cases but sometimes it'll break so what's actually better to do is set a less than or equal to



211

00:12:20,640 --> 00:12:21,660

or greater than or equal to.



212

00:12:21,660 --> 00:12:28,020

So we we want the value be less than or equal to 140 in case it's like on an iPhone and it's really



213

00:12:28,020 --> 00:12:28,520

small.



214

00:12:28,530 --> 00:12:30,440

We don't want to set a fix with 140.



215

00:12:30,450 --> 00:12:33,460

We want it to be able to scale down on its own so we stack views.



216

00:12:33,540 --> 00:12:35,570

You can set a fix within six.



217

00:12:35,580 --> 00:12:39,060

Apple actually recommends doing a less than or equal to or greater than or equal two.



218

00:12:39,060 --> 00:12:43,320

Not to actually do the equal to itself and that's fine.



219

00:12:43,320 --> 00:12:47,790

So that looks OK but of course this is like really long.



220

00:12:47,790 --> 00:12:50,100

And so we can set one more constraint on it.



221

00:12:50,100 --> 00:12:56,010

So what I want to do is I'm going to select this image data image click the pin menu and I'm going to



222

00:12:56,010 --> 00:12:57,840

click this icon here called aspect ratio.



223

00:12:57,840 --> 00:12:59,560

So we've set a max with OK.



224

00:12:59,580 --> 00:13:04,390

And so if you have a max with with an aspect ratio It'll keep it as a square.



225

00:13:04,490 --> 00:13:09,870

OK which is what we want here in iPhone so click aspect ratio and you may notice I didn't do anything



226

00:13:09,870 --> 00:13:10,180

Mark.



227

00:13:10,200 --> 00:13:15,060

Well that's because the aspect ratio is the one that is the way it looks right now is the 14 to 25 but



228

00:13:15,060 --> 00:13:15,630

we don't want that.



229

00:13:15,630 --> 00:13:18,080

We want a 1 to 1 ratio a nice little square.



230

00:13:18,120 --> 00:13:20,690

So double click the aspect ratio constraint.



231

00:13:20,850 --> 00:13:25,730

And we're just going to type in one colon one and it's going to put it into a square.



232

00:13:26,070 --> 00:13:28,250

I hope this isn't overly confusing to you.



233

00:13:28,460 --> 00:13:33,540

So if I can recap this when you're working with a stack you remember stack views add that constraints



234

00:13:33,570 --> 00:13:34,400

for you.



235

00:13:34,570 --> 00:13:37,240

OK but it didn't look the way we wanted it.



236

00:13:37,290 --> 00:13:42,610

It's it's smart thinking wasn't smart enough for our apps so we just saw a few limitations on the stack.



237

00:13:42,610 --> 00:13:45,460

One is we say hey don't let it be any wider than this.



238

00:13:45,480 --> 00:13:47,510

And then we also forced it to a square.



239

00:13:47,640 --> 00:13:47,850

OK.



240

00:13:47,850 --> 00:13:51,660

Using a 1 to one aspect ratio that way it always stays a square.



241

00:13:51,660 --> 00:13:52,300

OK.



242

00:13:52,590 --> 00:13:54,520

And so we got those constraints there.



243

00:13:54,540 --> 00:13:59,100

But of course this one didn't really obey Well what I'm going to do first is I'm going to go to my stack



244

00:13:59,150 --> 00:14:05,070

view and I want to change the properties because most of the time you don't need to set those same constraints



245

00:14:05,070 --> 00:14:06,750

on every single thing in there.



246

00:14:06,750 --> 00:14:09,120

Sometimes you might have to but sometimes you don't.



247

00:14:09,120 --> 00:14:14,410

And when do I not use constraints and when do I use constraints or when do I use them.



248

00:14:14,440 --> 00:14:19,650

You adjustments here in the in in these items here.



249

00:14:19,650 --> 00:14:21,460

It's just you have to play and fill around with it.



250

00:14:21,570 --> 00:14:27,330

So what I'm going to do is make sure my distribution says feel equally OK and notice how it made the



251

00:14:27,330 --> 00:14:28,550

other ones match.



252

00:14:28,560 --> 00:14:30,930

So what happened was this first image it has limitations.



253

00:14:30,930 --> 00:14:31,080

Right.



254

00:14:31,080 --> 00:14:36,050

We set one to one aspect ratio and a max with was some when we say when we say feel equally then it



255

00:14:36,050 --> 00:14:37,050

has to adopt those.



256

00:14:37,050 --> 00:14:40,410

On the other items in there and so we don't then we don't have to go and add those constraints because



257

00:14:40,410 --> 00:14:43,750

it's doing it for us automatically which is really nice.



258

00:14:43,770 --> 00:14:49,140

So now that we have the stack view looking about the way that we want K we're going to go and well we



259

00:14:49,140 --> 00:14:53,010

should pin from the top down we're not ready to pin it yet so let's go ahead and start pinning these



260

00:14:53,010 --> 00:14:53,600

items.



261

00:14:53,670 --> 00:14:56,970

So we have been this I believe this image up here.



262

00:14:57,390 --> 00:15:00,030

It's the next thing to do is to pin this.



263

00:15:00,030 --> 00:15:04,920

So what I'm going to do is I'm just going to pin it in the left margin at zero with the margins on and



264

00:15:04,920 --> 00:15:10,690

we'll say 100 from the top just to keep it equal and we'll give this a fix with a fixed height.



265

00:15:11,190 --> 00:15:12,680

So it doesn't do anything weird.



266

00:15:12,900 --> 00:15:17,970

And then this label here I'm just going to pin it itself to this image right here.



267

00:15:17,970 --> 00:15:22,410

I had them in a stack when I was building this out and I just couldn't get the height and positioning



268

00:15:22,590 --> 00:15:25,190

the exact right way that I want and you can try it with a stack you.



269

00:15:25,410 --> 00:15:30,060

But again when stacked these aren't giving you the look that you want you you just set the manual constraints



270

00:15:30,060 --> 00:15:31,460

which is no big deal.



271

00:15:31,470 --> 00:15:37,990

So what we're going to do is I'm going to select this and this OK and I'm going to click the align menu



272

00:15:38,070 --> 00:15:42,120

and I want to give these guys vertical centers here.



273

00:15:42,120 --> 00:15:49,470

Now the slopes label is going to adopt to the depth slopes logo image because those already have constraints



274

00:15:49,470 --> 00:15:49,920

on them.



275

00:15:49,920 --> 00:15:53,740

So when I click vertical centers it'll move them slopes just slightly there.



276

00:15:53,820 --> 00:15:58,920

So these will now always be in the vertical center to each other always the same.



277

00:15:58,920 --> 00:16:04,320

Now what I'm going to do is click the slopes logo and I'm going to just pin it to the left.



278

00:16:04,320 --> 00:16:06,960

So pin it to the image here by eight.



279

00:16:07,390 --> 00:16:09,870

And yeah OK good.



280

00:16:09,910 --> 00:16:11,420

I don't think we need to know all that.



281

00:16:11,440 --> 00:16:13,750

There's no read there so I think that's not going to move anywhere.



282

00:16:13,840 --> 00:16:17,830

It's going to stay at the center of this image here and it's going to stay just to the right of it because



283

00:16:17,830 --> 00:16:19,460

we've been over there to the right.



284

00:16:19,870 --> 00:16:21,460

So that's looking real nice.



285

00:16:21,460 --> 00:16:28,520

And then the next thing is holding shifts like these three buttons and click the stack view.



286

00:16:29,140 --> 00:16:34,990

And let's go over to the attributes and let's go ahead and distribution feel equally and let's just



287

00:16:34,990 --> 00:16:36,190

add some spacing.



288

00:16:36,220 --> 00:16:40,260

No big deal just some nice nice spacing.



289

00:16:40,270 --> 00:16:41,850

Very good.



290

00:16:41,850 --> 00:16:42,380

OK.



291

00:16:43,850 --> 00:16:50,450

Yeah working with stack use an interface builder is kind of like like you know painting like Bob Ross



292

00:16:50,450 --> 00:16:55,550

like where you just kind of go on the canvas and you're just like you splash things on and you put a



293

00:16:55,550 --> 00:16:56,720

little inspiration in it



294

00:17:00,090 --> 00:17:08,870

and you and I know it's a little annoying for those of us who are more scientific us us programmers



295

00:17:08,870 --> 00:17:12,810

or people who are more into math because we want everything to be perfect.



296

00:17:12,890 --> 00:17:16,810

But when it comes to stack use some things just aren't perfect.



297

00:17:16,820 --> 00:17:17,840

It's just the way that it is.



298

00:17:17,840 --> 00:17:23,860

But the benefit of it not being perfect is it looks good on multiple screens without having to write



299

00:17:23,870 --> 00:17:26,400

tons of code which I think is more important.



300

00:17:26,420 --> 00:17:29,460

It's about the user experience more than anything else.



301

00:17:29,540 --> 00:17:31,700

So that looks good.



302

00:17:31,700 --> 00:17:33,530

We've gone ahead and made it equal.



303

00:17:33,530 --> 00:17:37,310

I just want to go ahead and pin this in the center of the container.



304

00:17:37,310 --> 00:17:41,720

Like so and then I'm going to pin it to the top of this.



305

00:17:42,120 --> 00:17:42,810

Let's see.



306

00:17:42,950 --> 00:17:50,240

It's this depth slopes immature 24 hours to say 20 let's say let's just leave it at 24 I like that.



307

00:17:50,260 --> 00:17:53,020

So 24.



308

00:17:53,280 --> 00:17:53,530

OK.



309

00:17:53,530 --> 00:17:56,730

So that's going to stay right there in the middle which is looking really good.



310

00:17:56,730 --> 00:17:56,960

OK.



311

00:17:56,980 --> 00:18:01,900

Now we have this bad boy here this stack to you so let's do something similar it's pinnate 24 from the



312

00:18:01,900 --> 00:18:02,640

top.



313

00:18:02,890 --> 00:18:04,120

Similar to the other one.



314

00:18:04,180 --> 00:18:09,400

And in this case I will pin it to the edges so let's make sure margins are on and I'm going to say say



315

00:18:09,430 --> 00:18:16,450

eight from the left and eight from the right are perfect and let's go ahead and add some spacing to



316

00:18:16,450 --> 00:18:17,280

this stack.



317

00:18:17,350 --> 00:18:19,450

So we have the nice spacing in the middle.



318

00:18:19,450 --> 00:18:21,720

Notice how it shrinks down automatically.



319

00:18:21,760 --> 00:18:22,260

OK.



320

00:18:22,330 --> 00:18:23,470

This is really important.



321

00:18:23,470 --> 00:18:28,140

Remember when I went in here and I said it's a with of less than or equal to 100.



322

00:18:28,270 --> 00:18:31,230

We've basically given it permission to shrink itself down which is what we want.



323

00:18:31,230 --> 00:18:35,980

If I just set max with this would not be doing what we wanted to do in fact we'd probably have something



324

00:18:35,980 --> 00:18:36,790

broken right now.



325

00:18:36,790 --> 00:18:42,010

So again when working with things inside a stack you can use fixed width and height but sometimes it



326

00:18:42,010 --> 00:18:45,930

can break and so it's better to use greater than or equal to or less than or equal to.



327

00:18:46,360 --> 00:18:52,150

And that's a good let's say 15 spacer and I'm OK with that right there.



328

00:18:52,150 --> 00:18:53,000

This is awesome.



329

00:18:53,000 --> 00:18:55,130

This has come this is really come on together.



330

00:18:55,180 --> 00:18:55,590

All right.



331

00:18:55,600 --> 00:18:57,740

And so yeah this is looking good.



332

00:18:58,030 --> 00:19:02,270

And then let's go ahead and Kamandi to duplicate this.



333

00:19:02,270 --> 00:19:04,210

And I feel like it just did something naughty.



334

00:19:04,210 --> 00:19:04,780

It did.



335

00:19:04,810 --> 00:19:07,900

It just pasted junk out here in the no man's land.



336

00:19:08,470 --> 00:19:09,160

OK.



337

00:19:09,190 --> 00:19:11,840

All right interface builder you just keep acting weird.



338

00:19:11,890 --> 00:19:18,970

So I just command see that stack and it can even be in here and just drag it down like so it's just



339

00:19:18,970 --> 00:19:20,050

acting weird.



340

00:19:20,410 --> 00:19:27,060

And in our stack here we had a spacing of 15 so we want this to be 15 away from the stack above it.



341

00:19:27,060 --> 00:19:30,540

So I'm going to go ahead and pin it 15 from the top.



342

00:19:30,820 --> 00:19:34,460

And again similarly eight from the left eight from the right.



343

00:19:34,840 --> 00:19:36,970

And boom.



344

00:19:36,970 --> 00:19:38,630

I like it.



345

00:19:39,000 --> 00:19:41,500

You know it's there we don't have enough spacing on the bottom.



346

00:19:41,500 --> 00:19:42,750

I'm OK with that.



347

00:19:42,790 --> 00:19:43,610

What we could do.



348

00:19:43,660 --> 00:19:46,420

So it's less than or equal to 140.



349

00:19:46,480 --> 00:19:47,480

We can make it smaller.



350

00:19:47,500 --> 00:19:49,460

I could say 130 we can give that a shot.



351

00:19:49,480 --> 00:19:58,370

So if I said less than or equal to 1 30 it's still not enough Yeah it's OK.



352

00:19:58,440 --> 00:20:00,650

What you're probably asking why is it's not working.



353

00:20:00,650 --> 00:20:05,570

The reason is stacked at the constraints automatically so it will decide on its own if it wants to shrink



354

00:20:05,570 --> 00:20:06,710

it or not.



355

00:20:06,710 --> 00:20:11,180

So one thing we could do is reduce the space here and the space here to move these up but I don't want



356

00:20:11,180 --> 00:20:11,450

to.



357

00:20:11,480 --> 00:20:15,920

I'm OK with the way it looks if the designer really cares that much he can come yell at us later about



358

00:20:15,920 --> 00:20:17,180

all this here.



359

00:20:17,180 --> 00:20:19,790

So let me make sure that this is all looking good.



360

00:20:19,790 --> 00:20:23,070

So if I go to i-Pad here I should look almost identical.



361

00:20:23,480 --> 00:20:24,370

OK cool.



362

00:20:24,380 --> 00:20:26,250

So here's the problem with the iPad right.



363

00:20:26,240 --> 00:20:31,270

So like Will these mark these images are too big to change images to actually do that here.



364

00:20:31,520 --> 00:20:33,210

We're looking at it like the images are too big.



365

00:20:33,230 --> 00:20:35,490

Yeah I know it looks like the iPhone right.



366

00:20:35,510 --> 00:20:37,790

But it I don't know.



367

00:20:37,790 --> 00:20:42,220

It just doesn't feel like the right experience and it's not like this is not the right experience it's



368

00:20:42,220 --> 00:20:46,600

the right experience for iPhone but not the right experience for for iPad.



369

00:20:46,610 --> 00:20:55,190

So I just change this image of the video on and this one is the code one I'm typing in code called the



370

00:20:57,060 --> 00:20:58,200

data image code.



371

00:20:58,410 --> 00:20:58,680

Yeah.



372

00:20:58,740 --> 00:20:59,740

There you go.



373

00:20:59,850 --> 00:21:01,250

You know these aren't very well named.



374

00:21:01,250 --> 00:21:05,280

You can blame the on Evan LAYON our designer next time you see him.



375

00:21:05,310 --> 00:21:09,180

OK so there's four images is not looking great and it's definitely not looking according to our designs



376

00:21:09,180 --> 00:21:10,930

if you remember correctly right.



377

00:21:11,130 --> 00:21:16,270

OK this is a better user experience because you know the icons are better you're utilizing the space.



378

00:21:16,290 --> 00:21:17,540

And this is over here.



379

00:21:17,550 --> 00:21:19,170

You know better laid out.



380

00:21:19,170 --> 00:21:20,460

You know you don't need it here.



381

00:21:20,810 --> 00:21:25,110

And then we have this extra button that you know the iPad calls for you can customize your dashboard



382

00:21:25,320 --> 00:21:29,130

where maybe you couldn't do that on iPhone because there's not enough screen space so we have a few



383

00:21:29,130 --> 00:21:34,620

things to fix here but what we've done so far is we've built out the we've built out the layout for



384

00:21:34,620 --> 00:21:40,500

iPhone and all is looking well and good so we're going to call this video done and in the next video



385

00:21:40,500 --> 00:21:45,180

we're actually going to use what's called size classes size classes will allow you to specify specific



386

00:21:45,180 --> 00:21:51,630

traits for different screen sizes that affect that screen size only and not other screen sizes and that's



387

00:21:51,630 --> 00:21:56,410

how we create wonderful user experiences without having to write any other code under the hood.



388

00:21:56,430 --> 00:22:00,660

You can hide stuff and turn things off but you don't have to write extra code which is really nice so



389

00:22:00,720 --> 00:22:01,410

that's it for now.



390

00:22:01,410 --> 00:22:03,610

Mark Price it does slow dot com.



391

00:22:03,750 --> 00:22:19,240

Let's support i-Pad.