1 00:00:00,600 --> 00:00:01,850 So I'll come back again. 2 00:00:01,860 --> 00:00:08,550 This list is actually a very simple we're just going to add one 12 so all of you that allows it to do 3 00:00:08,550 --> 00:00:09,480 paging. 4 00:00:09,580 --> 00:00:11,110 But voile I'm doing that. 5 00:00:11,120 --> 00:00:15,350 I thought it would help if we recap the things that we at the very very beginning. 6 00:00:15,420 --> 00:00:21,300 And that was how to make you or your school view in the storyboard that has a content size. 7 00:00:21,300 --> 00:00:29,070 So with that in mind the school and into school to start a new application called paging the scroll 8 00:00:29,160 --> 00:00:29,940 view. 9 00:00:30,130 --> 00:00:34,800 And in my paging a school view of course I would need a scroll view in my storyboard. 10 00:00:34,800 --> 00:00:36,740 That's nothing you know we can do about it. 11 00:00:36,840 --> 00:00:43,230 So I'm going to say you a score of you when I get in here and I'll set constraints for it to be 20 20 12 00:00:43,230 --> 00:00:44,590 20 and 20. 13 00:00:44,610 --> 00:00:49,090 So it's a start to the four corners by 20 units margins. 14 00:00:49,320 --> 00:00:54,540 I'm going to say it's back on college to become a light gray color something like that. 15 00:00:54,690 --> 00:00:57,440 And then I'm going to add a view to it. 16 00:00:57,450 --> 00:01:02,360 I'm going to say I love you and this you be I'm going to place it on the top left corner. 17 00:01:02,610 --> 00:01:09,300 I go all the way to bottom right corner and maybe I make it a different color maybe an orange color 18 00:01:09,300 --> 00:01:10,740 or something like that. 19 00:01:10,740 --> 00:01:12,450 Now here's what I want to happen. 20 00:01:12,450 --> 00:01:18,690 I want to have this you you used the orange you are you are to be three times as wide as a scroll of 21 00:01:18,690 --> 00:01:19,110 view. 22 00:01:19,290 --> 00:01:24,460 So once again orange you has to become three times as wide as the scroll of view. 23 00:01:24,480 --> 00:01:25,710 So let's go ahead and do that. 24 00:01:25,710 --> 00:01:32,690 I'm going to go in here and say my view against the scroll view has a leading space of zero. 25 00:01:32,760 --> 00:01:35,210 And I can see those constraints right away. 26 00:01:35,250 --> 00:01:36,590 It says zero. 27 00:01:36,840 --> 00:01:43,180 And then I'm going to go ahead and say my view against the score of you has a top a space of a gain 28 00:01:43,300 --> 00:01:43,920 zero. 29 00:01:43,950 --> 00:01:46,210 So again these are stuck to the top. 30 00:01:46,260 --> 00:01:54,090 Then I'm going to go ahead and say my view against the scroll of you has a bottom a space of a gain 31 00:01:54,240 --> 00:01:54,780 zero. 32 00:01:54,780 --> 00:01:56,950 So the value is once again zero. 33 00:01:57,330 --> 00:02:05,400 Then I'm going to go ahead and say my view against the scroll of view has a trailing space and even 34 00:02:05,400 --> 00:02:07,750 this one I'm going to set it to zero. 35 00:02:07,920 --> 00:02:13,560 The only thing I want to keep in mind is I make sure that the first item is the super view that railing 36 00:02:13,860 --> 00:02:20,190 against the view that's railing and the value is zero so versus the three times coming from for that 37 00:02:20,220 --> 00:02:26,390 I'm going to go ahead and say my view against the scroll of view has an aspect ratio of constraints 38 00:02:26,790 --> 00:02:30,350 and that aspect ratio constraint is set like this. 39 00:02:30,360 --> 00:02:34,200 It says There views of it equals superb views. 40 00:02:34,230 --> 00:02:39,440 Vits in an order of tree by 1. 41 00:02:39,450 --> 00:02:45,900 So the view of is three times the super of you it under boundaries in the wireframe actually shows us 42 00:02:46,140 --> 00:02:49,200 that it's actually three times or more than it is there. 43 00:02:49,260 --> 00:02:52,660 The only missing constraint in here is the height. 44 00:02:52,800 --> 00:02:58,320 So for the height I'm going to say The View has an equal height to the superb view. 45 00:02:58,620 --> 00:03:00,130 So now we have everything that we need. 46 00:03:00,150 --> 00:03:05,070 And if we run this application this is the thing to do is at the very beginning of this section we should 47 00:03:05,070 --> 00:03:10,410 be able to score from left to right and see Diskworld indicator at the bottom. 48 00:03:10,410 --> 00:03:17,130 So if I try it now I can see the score indicator down there you see when I scroll it shows up by the 49 00:03:17,130 --> 00:03:18,110 scrolls. 50 00:03:18,120 --> 00:03:21,960 Now here's the thing that I want to show you in this listen as I scroll. 51 00:03:21,960 --> 00:03:27,610 I can essentially go anywhere I can go here I can go somewhere in the middle I can go further towards 52 00:03:27,620 --> 00:03:29,310 the right over there I want. 53 00:03:29,520 --> 00:03:31,190 But what if that wasn't the case. 54 00:03:31,200 --> 00:03:37,240 What we want is to be able to score into a specific places like one page at a time. 55 00:03:37,470 --> 00:03:44,280 So to do that I'm actually going to go ahead and add three new views to my orange view or at least Torneo 56 00:03:44,280 --> 00:03:47,540 views so I can see where I stand with that. 57 00:03:47,550 --> 00:03:52,560 So I'm going to go ahead and say Give me a view that's going to be a I view. 58 00:03:52,650 --> 00:03:54,700 Is a child of my view. 59 00:03:54,930 --> 00:04:01,200 And this one is going to be the one that I make it to be a red color for instance something like this. 60 00:04:01,440 --> 00:04:06,090 And then this one against Super of you has these parameters. 61 00:04:06,090 --> 00:04:10,920 It has a leading face and that value is zero. 62 00:04:11,100 --> 00:04:14,340 So again I'm going to close this one down so it doesn't confuse me. 63 00:04:14,430 --> 00:04:18,950 I'm going to say the views the leading value is zero. 64 00:04:19,110 --> 00:04:21,360 And if you don't mind I'm actually going to rename this. 65 00:04:21,390 --> 00:04:24,100 So this one is going to be the orange review. 66 00:04:24,270 --> 00:04:25,750 So I know it's the orange one. 67 00:04:25,860 --> 00:04:28,170 So it's orange. 68 00:04:28,170 --> 00:04:29,910 This one is red. 69 00:04:29,940 --> 00:04:31,980 I haven't made it I feel ready made it the. 70 00:04:32,010 --> 00:04:33,540 We just can't see it. 71 00:04:33,550 --> 00:04:42,870 So it does the leading of zero and it has it top of space and it has a boy on his face and it has an 72 00:04:42,930 --> 00:04:52,590 equal height and against your engine it has an aspect ratio for its Vitt riches. 73 00:04:53,020 --> 00:04:57,920 And I want you to guess what is that because that leads one to a tree. 74 00:04:57,930 --> 00:04:59,810 So one two or three. 75 00:04:59,830 --> 00:05:06,890 So it's always one tared of the orange view and now you select this red guy and we set all the constraints 76 00:05:06,890 --> 00:05:13,080 with the correct values such as the bottom to be zero and the top to be zero. 77 00:05:13,500 --> 00:05:17,160 We should be able to see it fill the entirety of the screen. 78 00:05:17,160 --> 00:05:22,290 Now if I run this application until this point we should be able to see a scroll view of the scrolls 79 00:05:22,410 --> 00:05:28,420 and we see this we essentially see something that shows us one of the colors and then the other one. 80 00:05:28,440 --> 00:05:30,870 Now let's go ahead and add another view. 81 00:05:30,870 --> 00:05:38,950 This time I'm going to add a live view and that you I say again a child of the orange. 82 00:05:39,020 --> 00:05:45,050 This one I'm going to call it Green simply because I'm going to make it spider and B Green as well. 83 00:05:45,060 --> 00:05:47,370 So some sort of figurine like that. 84 00:05:47,370 --> 00:05:53,830 Now for this one I need to essentially is sticking to the far right corner of the orange. 85 00:05:54,000 --> 00:05:57,270 One more time to the far right corner of the Orangeville. 86 00:05:57,270 --> 00:06:02,210 So for that I'm going to say the top a space is going to be 0. 87 00:06:02,220 --> 00:06:04,590 So let me change those on the fly. 88 00:06:04,650 --> 00:06:06,120 The top his face is zero. 89 00:06:06,120 --> 00:06:07,980 So that's why it's taken care of. 90 00:06:07,980 --> 00:06:14,680 Again green against the orange the top of them a space this time is going to be zero as well. 91 00:06:14,850 --> 00:06:20,110 So the top and bottom are 0 1 0 and you can see the wireframe is already shaping the way we want it. 92 00:06:20,400 --> 00:06:26,670 Then I'm going to say green against the orange has a trailing a space of 0. 93 00:06:26,700 --> 00:06:29,190 So it's stuck to the far right corner. 94 00:06:29,520 --> 00:06:32,010 And then I'm going to say green again still orange. 95 00:06:32,040 --> 00:06:34,080 It has the same height. 96 00:06:34,310 --> 00:06:36,030 So they have the exact same height. 97 00:06:36,240 --> 00:06:38,910 And finally I'm going to say green against the orange. 98 00:06:38,940 --> 00:06:46,710 It has an aspect ratio and that aspect ratio is going to be between the vets of the green for the vets 99 00:06:46,800 --> 00:06:51,140 of the orange and the value is 1 2 3. 100 00:06:51,150 --> 00:06:55,050 So now if we run this up we should be able to see this application. 101 00:06:55,070 --> 00:06:58,270 It goes from one column to the middle because the third column. 102 00:06:58,620 --> 00:07:00,260 And that's exactly where they wanted to see. 103 00:07:00,360 --> 00:07:03,640 But as you can see you can essentially go anywhere in it. 104 00:07:03,780 --> 00:07:08,340 Even though these seem like three separate pages I can actually go and stand in the middle. 105 00:07:08,340 --> 00:07:12,130 Wish for a lot of ops This isn't a good idea to fix that. 106 00:07:12,150 --> 00:07:16,020 And that's the part I said about being a very very simple lesson. 107 00:07:16,060 --> 00:07:17,310 So they got a score of you. 108 00:07:17,360 --> 00:07:20,390 They go up here and we say paging an ape. 109 00:07:20,400 --> 00:07:22,170 And then you enable paging. 110 00:07:22,170 --> 00:07:26,130 It enables the paging on both horizontal and vertical sites. 111 00:07:26,130 --> 00:07:34,590 And it says if content as much as an entire boundary event of that is when you stop scrolling otherwise 112 00:07:34,590 --> 00:07:35,700 you keep scrolling. 113 00:07:35,700 --> 00:07:36,720 Let's see how that works. 114 00:07:36,720 --> 00:07:42,690 In reality when I run the application now I should be able to do this I go in the middle I let's call 115 00:07:42,690 --> 00:07:43,770 it pushes back. 116 00:07:43,900 --> 00:07:48,490 I go there it pushes back I go more than half it pushes for. 117 00:07:48,560 --> 00:07:53,020 Now I then it pushes back I go more than half and it pushes to the other side. 118 00:07:53,160 --> 00:08:00,330 So this is paging making sure that you have to scroll at least one whole page otherwise you go back 119 00:08:00,330 --> 00:08:01,830 to where you used to be. 120 00:08:01,830 --> 00:08:05,690 Now let's keep that in mind and let's move on to our next lesson.