1 00:00:09,210 --> 00:00:09,480 OK. 2 00:00:09,560 --> 00:00:11,660 Let's look at the hazy stack. 3 00:00:11,690 --> 00:00:15,570 So we said this stack allows us to stack things on top of each other. 4 00:00:15,590 --> 00:00:15,910 All right. 5 00:00:15,910 --> 00:00:18,080 So if I changes to Zee like that. 6 00:00:18,080 --> 00:00:21,440 In fact let's go ahead and find as it is right now save even run. 7 00:00:21,800 --> 00:00:22,910 Looks like we have a problem. 8 00:00:22,910 --> 00:00:28,340 So it says that spacing extra argument pacing is being called which is not allowed. 9 00:00:28,760 --> 00:00:29,480 Why is that. 10 00:00:29,480 --> 00:00:31,930 Well the reason why is because we don't need spacing. 11 00:00:31,940 --> 00:00:34,700 If things are actually stacked on top of each other. 12 00:00:34,700 --> 00:00:35,660 Right. 13 00:00:35,660 --> 00:00:36,410 Makes sense. 14 00:00:36,410 --> 00:00:38,360 So that's why we're complaining here. 15 00:00:38,480 --> 00:00:45,200 And to make this disappear we just get rid of it and we can get rid of all through the alignment in 16 00:00:45,200 --> 00:00:50,790 everything because we don't need any of that to save this now and run we should have no problem whatsoever. 17 00:00:50,840 --> 00:00:52,310 And look what's going to happen. 18 00:00:52,310 --> 00:00:54,270 Everything is on top of each other. 19 00:00:54,290 --> 00:00:59,180 That's exactly what is a stack does to make all of these a little bit more visible. 20 00:00:59,180 --> 00:01:01,890 I'm going to change all these texts. 21 00:01:01,940 --> 00:01:07,220 Let's say font let's change this one to sub headline. 22 00:01:07,220 --> 00:01:10,870 This one dot font be dot. 23 00:01:10,910 --> 00:01:13,400 Let's see a headline. 24 00:01:13,640 --> 00:01:14,960 OK so that's looks good. 25 00:01:14,960 --> 00:01:18,410 Let's save these and run. 26 00:01:18,470 --> 00:01:18,980 Very good. 27 00:01:18,980 --> 00:01:20,210 Still unhelpful helpful here. 28 00:01:20,210 --> 00:01:26,600 So what are we going to do actually is we going to enclose all of these texts inside of different stacks. 29 00:01:26,780 --> 00:01:27,380 Right. 30 00:01:27,380 --> 00:01:31,380 We can actually stack stacks inside of stacks. 31 00:01:31,400 --> 00:01:33,980 I'm going to put a vertical stack. 32 00:01:34,000 --> 00:01:34,960 OK. 33 00:01:35,180 --> 00:01:38,940 Copy this without inside the bear. 34 00:01:38,940 --> 00:01:43,400 Let's just do all of this good copy like that. 35 00:01:43,670 --> 00:01:46,900 Let's get rid of all of that. 36 00:01:46,970 --> 00:01:47,360 Very good. 37 00:01:47,360 --> 00:01:50,620 So now we have all of these stacks here and everything you can do. 38 00:01:50,630 --> 00:01:57,560 You can actually select all of your code so command a and if you say control I you will indent everything 39 00:01:57,560 --> 00:01:59,580 so everything looks much better. 40 00:01:59,600 --> 00:01:59,820 OK. 41 00:01:59,870 --> 00:02:00,230 Very good. 42 00:02:00,680 --> 00:02:06,350 So now we have is this stack which contains these all these vertical stacks which in turn they contain 43 00:02:06,350 --> 00:02:06,860 text. 44 00:02:07,340 --> 00:02:14,930 If we run this nothing has changed except we have the same text rights organization as another. 45 00:02:15,010 --> 00:02:19,320 Let's see yellow and this one just kind put. 46 00:02:19,320 --> 00:02:20,180 World. 47 00:02:20,180 --> 00:02:28,450 This is just to differentiate things and then make this bigger so headline gets a large title. 48 00:02:28,460 --> 00:02:29,130 That's fine. 49 00:02:29,130 --> 00:02:30,080 Let's say give a run 50 00:02:32,980 --> 00:02:33,310 OK. 51 00:02:33,320 --> 00:02:33,680 Very good. 52 00:02:33,680 --> 00:02:38,690 So this is a little bit more distinct in a way that we have different text. 53 00:02:38,690 --> 00:02:38,990 Very good. 54 00:02:38,990 --> 00:02:44,760 So now what I'm going to do is for each stack let's add a background color and let's say background. 55 00:02:44,890 --> 00:02:51,090 These are going to be color and green and these are the ones going to be background color. 56 00:02:51,100 --> 00:02:58,070 Let's say the color that blue in the last one is going to be that background color. 57 00:02:58,070 --> 00:03:04,630 When I say color that orange Point Light save and run 58 00:03:07,980 --> 00:03:14,430 you can see now the power of the index like we said before whatever we added first is going to be in 59 00:03:14,430 --> 00:03:14,820 the back. 60 00:03:14,820 --> 00:03:18,740 So another which is green notice is way in the back. 61 00:03:18,870 --> 00:03:25,710 We have the other v stack here which has another Halo text there and the color is blue. 62 00:03:25,740 --> 00:03:29,880 And then last but not least we have another world color orange. 63 00:03:29,880 --> 00:03:30,650 OK. 64 00:03:30,820 --> 00:03:36,260 This one here I hope we can start seeing the power that we have using stacks right. 65 00:03:36,260 --> 00:03:37,840 Using horizontal stack. 66 00:03:37,840 --> 00:03:44,670 So each stack vertical stacks and of course v stack because creating this stacks it's much easier to 67 00:03:44,670 --> 00:03:52,230 move things around and also a day or two the paradigm that swift brings to us which is the declarative 68 00:03:52,340 --> 00:03:58,940 composing views into smaller pieces so that we can then put together a more complex user interface. 69 00:03:59,440 --> 00:04:04,140 OK so what I want you to do again is play around with this concept here. 70 00:04:04,200 --> 00:04:07,310 We talked about horizontal stack and vertical stack. 71 00:04:07,300 --> 00:04:11,940 So go ahead and play around and start thinking may perhaps have something a little bit more elaborate 72 00:04:12,000 --> 00:04:16,190 that you can put together real quick considering all the things that you've learned so far. 73 00:04:16,200 --> 00:04:19,830 Very good so go ahead and knock yourself out and I'll see you in the next video.