1 00:00:00,210 --> 00:00:06,540 So or come back in this exercise you're supposed to take your iPhone screen divide it into a grid of 2 00:00:06,630 --> 00:00:13,600 equal four by four blocks and then each block you develop a different set of items. 3 00:00:13,620 --> 00:00:16,020 So one block would only have a label. 4 00:00:16,120 --> 00:00:22,800 Another bloke would have a vertical split of a label on a button and either one would have a split of 5 00:00:23,280 --> 00:00:29,580 two buttons on one image view and another one would have an image in the back yard. 6 00:00:29,700 --> 00:00:34,130 So essentially something like this of develop the beginning of it for you. 7 00:00:34,350 --> 00:00:36,980 So there is a label on the top left there. 8 00:00:37,080 --> 00:00:43,410 There is a label on it by then on the top right there are three divisions on the lower left and one 9 00:00:43,410 --> 00:00:45,200 division on the lower right. 10 00:00:45,300 --> 00:00:48,060 Now obviously I have just put these objects in yeah. 11 00:00:48,060 --> 00:00:55,230 And the moment they switch to a different device everything breaks and nothing maintains its proper 12 00:00:55,230 --> 00:00:56,100 size. 13 00:00:56,100 --> 00:01:02,520 So that's essentially your goal to make sure that whichever iPhone that you design everything at the 14 00:01:02,520 --> 00:01:10,240 very beginning it will maintain this design through all different devices and different orientations. 15 00:01:10,260 --> 00:01:12,610 So that's what you have to do. 16 00:01:12,750 --> 00:01:16,900 Pause the video now if you wish and give it a try on your own. 17 00:01:17,070 --> 00:01:20,720 And once you're done you can follow along with my approach. 18 00:01:22,560 --> 00:01:23,100 All right. 19 00:01:23,160 --> 00:01:24,800 So I'm going to go to. 20 00:01:25,230 --> 00:01:31,770 And one thing that I did and I'm not sure if you have followed the same system is that I actually tried 21 00:01:31,770 --> 00:01:37,360 to direct my objects into as many views as to per views as I could. 22 00:01:37,410 --> 00:01:43,060 So essentially I have this one which is left and this one that is right my left object if I move with 23 00:01:43,110 --> 00:01:47,060 a little bit you can actually see it easier on these guys. 24 00:01:47,070 --> 00:01:51,430 Everything is on the left side of the screen and the right one obviously the right one. 25 00:01:51,660 --> 00:01:56,340 And then within the left I have the top section and then I have the bottom section. 26 00:01:56,340 --> 00:01:57,690 Same thing on the right. 27 00:01:57,690 --> 00:02:02,520 And you will see how these will really help me develop my interface. 28 00:02:02,520 --> 00:02:04,390 So let's go ahead in here. 29 00:02:04,470 --> 00:02:05,920 I'm going to go to the left. 30 00:02:05,940 --> 00:02:13,810 The very first thing I want to set constraint for it I'm going to say left against SUPERVALU top his 31 00:02:13,880 --> 00:02:21,650 face so that topis face is now taking care of then left against the super view leading space. 32 00:02:21,660 --> 00:02:27,910 So that's taken care of I'm going to say left against a superb view of the bottom of space. 33 00:02:27,930 --> 00:02:34,620 So now the top left and bottom are taking off the only thing that's left is the vet and I have of my 34 00:02:34,620 --> 00:02:37,480 left is half the width of the super view. 35 00:02:37,500 --> 00:02:44,040 So I'm going to say left against the super of you give me an aspect ratio and I'm going to go find the 36 00:02:44,050 --> 00:02:48,840 aspect asphyxiation double click on it and say left it. 37 00:02:48,860 --> 00:02:55,200 He was so proud of you with and the ratio is 1 to 2. 38 00:02:55,200 --> 00:03:01,210 So by now I should have my left finding its way around the different devices. 39 00:03:01,230 --> 00:03:08,940 So for instance if I go to a larger device that might it more this thing defined on caller maybe the 40 00:03:08,940 --> 00:03:09,990 dark gray. 41 00:03:10,020 --> 00:03:18,130 Yes it is properly adjusting itself and if I go to a different orientation again it just itself properly. 42 00:03:18,180 --> 00:03:19,920 It's just that it's children. 43 00:03:19,920 --> 00:03:21,630 They don't do that and that's OK. 44 00:03:21,630 --> 00:03:23,940 We're going to come back to that in a moment. 45 00:03:23,970 --> 00:03:28,950 So let's go back to the original design in the original design which is this one. 46 00:03:29,310 --> 00:03:34,730 I'm going to say give me the right one the right object against the same thing. 47 00:03:35,100 --> 00:03:45,960 So another leading his space trailing space hyperspace bottom in space and I'm going to say the right 48 00:03:46,440 --> 00:03:51,580 against the left side horizontal spacing between them. 49 00:03:51,600 --> 00:03:58,770 That's essentially like a gap between these two which are maintaining zero for now simply because they 50 00:03:58,870 --> 00:04:01,680 are both exactly at the same. 51 00:04:02,070 --> 00:04:08,720 What happened there was exactly where the left and right is starts. 52 00:04:08,760 --> 00:04:11,340 So now we have both of them taking care of. 53 00:04:11,350 --> 00:04:17,640 And if I go to a different view we can see that both left and right are doing exactly what we wanted 54 00:04:17,640 --> 00:04:18,390 them to do. 55 00:04:18,750 --> 00:04:23,900 If they have a different background color maybe like that that's perfect. 56 00:04:23,910 --> 00:04:29,290 So now what you have to do is we have to assign the constraints for their children. 57 00:04:29,520 --> 00:04:39,270 So I'm going to go in here and say for the left one this fun top so top is doing this against the parents 58 00:04:39,390 --> 00:04:46,310 leading a space tapas space trailing a space. 59 00:04:46,710 --> 00:05:00,050 And it has a height which is an aspect ratio and that aspect ratio is one to two tall half of it's one 60 00:05:00,050 --> 00:05:02,860 to two but it's not too high. 61 00:05:02,870 --> 00:05:06,520 It's rather height to height. 62 00:05:06,600 --> 00:05:13,210 So now if you go to a different iPhone perfect our label is now being taken care of. 63 00:05:13,910 --> 00:05:19,010 So I'm guessing it's becoming more and more expensive arteries so I'm going to go a little bit faster 64 00:05:19,010 --> 00:05:20,140 through the rest of them. 65 00:05:20,140 --> 00:05:23,950 For stands for this one of the lower right corner. 66 00:05:24,110 --> 00:05:28,050 I'm going to say this image of you against the them. 67 00:05:28,070 --> 00:05:30,350 So we have to first take care of the bottom. 68 00:05:30,350 --> 00:05:34,030 So I'm going to say by them against right is the trailing. 69 00:05:34,070 --> 00:05:36,590 It's got a bottom a space. 70 00:05:36,830 --> 00:05:46,310 It's got a leading Ismailis and it has an aspect ratio and that aspect ratio is one to two. 71 00:05:46,640 --> 00:05:52,840 But the outlets are different it's height against height. 72 00:05:52,940 --> 00:06:00,860 So that's taken care of then I'm going to say my emails you got 20 picks those margin from every side. 73 00:06:00,860 --> 00:06:04,920 So 20 20 20 and 20 sts. 74 00:06:04,940 --> 00:06:13,570 So now that's completely taken care of this go ahead to these two guys that is going to be top of 75 00:06:16,620 --> 00:06:28,400 it right top so they gain top is going to be needing a space trailing space top space and that aspect 76 00:06:28,400 --> 00:06:37,490 ratio which is again the same challenges before so height to height with a ratio of one to two. 77 00:06:37,850 --> 00:06:45,100 And then I'm going to go ahead and say within those objects or within the top of the right split by 78 00:06:45,120 --> 00:06:55,990 then is topis face leaving a space training in space and aspect ratio of one half. 79 00:06:56,050 --> 00:07:02,540 So it's just doing the same thing over and over and over and just knowing what you're trying to do otherwise 80 00:07:02,880 --> 00:07:08,190 or even just learning you have already done it and then try this one little bit differently they're 81 00:07:08,200 --> 00:07:08,650 split. 82 00:07:08,680 --> 00:07:16,330 But then I'm going to say the bar then has a leaving a space to its container trailing a space to its 83 00:07:16,330 --> 00:07:17,360 container. 84 00:07:17,510 --> 00:07:20,020 But then the space through its container. 85 00:07:20,230 --> 00:07:27,320 And I'm going to say it has a top vertical spacing to this other label and the vertical spacing. 86 00:07:27,320 --> 00:07:32,560 Automatically try to set it based on intrinsic content's value. 87 00:07:32,590 --> 00:07:37,780 I want to come here and say actually manually make it zero. 88 00:07:38,110 --> 00:07:40,820 So it automatically adjusts itself. 89 00:07:40,840 --> 00:07:42,180 Let's see that's perfect. 90 00:07:42,190 --> 00:07:47,740 So everything is now working except for the lower left corner. 91 00:07:48,070 --> 00:07:50,820 So this is the one that's not working yet. 92 00:07:50,860 --> 00:07:53,940 So let's go back to original design in the original one. 93 00:07:53,950 --> 00:08:00,330 I'm going to say left Bodom which doesn't have any constraints just yet. 94 00:08:00,760 --> 00:08:14,530 So leaving a space filling a space for them a space and an aspect ratio of 1 2 to 4. 95 00:08:14,580 --> 00:08:23,090 Of course the height I have to change this so another part of the left side is actually working on a 96 00:08:23,100 --> 00:08:25,110 Prunty have misspelled that too. 97 00:08:25,130 --> 00:08:28,140 But I don't know what that is but to them. 98 00:08:28,530 --> 00:08:29,030 OK. 99 00:08:29,190 --> 00:08:34,580 So the next thing is I have to split these guys between the bottom part. 100 00:08:34,590 --> 00:08:41,760 So in here I'm going say the first one is that you are you make sure it doesn't really matter in which 101 00:08:41,760 --> 00:08:45,140 order you go because they all kind of work independently. 102 00:08:45,150 --> 00:08:48,490 But if you want to be very very careful you can go in or there. 103 00:08:48,630 --> 00:08:59,320 So in order for make you view leading his face and he made you view trailing space and you made you 104 00:08:59,320 --> 00:09:04,930 view topless face and an image of you against the bottom. 105 00:09:04,950 --> 00:09:16,040 It has an aspect ratio of one to a tree so height to height one two three one to three. 106 00:09:16,300 --> 00:09:17,030 Perfect. 107 00:09:17,050 --> 00:09:24,430 So then I'm like oh I had to walk in to the one at the bottom of the screen say it has a leading edge 108 00:09:24,430 --> 00:09:27,290 space in has a trailing space. 109 00:09:27,490 --> 00:09:37,930 It has a bar them a space and I'm going to say boy then two against an image view equal heights. 110 00:09:38,260 --> 00:09:42,840 So it always keeps its height the same as the EMH view. 111 00:09:43,000 --> 00:09:45,770 That's a that's a new thing that we need right now. 112 00:09:46,000 --> 00:09:52,630 And then finally have the bottom one and I'm going to say this one it actually has a vertical space 113 00:09:52,630 --> 00:09:56,200 from the sky which is set at zero. 114 00:09:56,560 --> 00:10:08,200 It has a vertical space to this Sky-High which is again set to zero and then it has a leading face and 115 00:10:08,200 --> 00:10:10,300 a trailing face. 116 00:10:10,390 --> 00:10:13,770 And if I take it you feel perfectly safe there. 117 00:10:13,780 --> 00:10:17,910 So let's go ahead and try it on all sorts of different devices. 118 00:10:19,660 --> 00:10:26,280 So deaths that there are different orientations. 119 00:10:26,470 --> 00:10:30,070 Everything is working exactly the way you want them. 120 00:10:30,130 --> 00:10:31,470 So that's about that. 121 00:10:31,470 --> 00:10:37,540 With this exercise are like I said it's a lot of repetitious stuff that you have to do but it really 122 00:10:37,540 --> 00:10:39,220 helps that you do some exercise. 123 00:10:39,220 --> 00:10:45,940 So when we get a more complicated way you want to do more complex interfaces you know what you have 124 00:10:45,940 --> 00:10:46,450 to do. 125 00:10:46,700 --> 00:10:53,710 And one thing that I would recommend is maintaining a very good hierarchy of objects and trying to keep 126 00:10:53,740 --> 00:10:56,330 every group as separate as possible. 127 00:10:56,480 --> 00:11:00,110 That really helps you in developing complex stuff. 128 00:11:00,490 --> 00:11:02,470 And yeah I've seen the next lesson.