1 00:00:00,360 --> 00:00:03,940 So will come back to this first introduction to a scroll. 2 00:00:04,170 --> 00:00:09,810 And before I jump into school and try things I want to show you how a school of you essentially works 3 00:00:10,110 --> 00:00:16,230 in school of you works only in one situation and that situation is when the contents that you have is 4 00:00:16,230 --> 00:00:18,650 larger than the boundaries that you have. 5 00:00:18,810 --> 00:00:20,630 Let me explain what that means. 6 00:00:20,640 --> 00:00:27,120 Look at the home view of your iPhone or your iPhone simulator the contents that we have is larger than 7 00:00:27,210 --> 00:00:28,510 one screen. 8 00:00:28,530 --> 00:00:29,930 That's why we have to scroll. 9 00:00:29,940 --> 00:00:34,730 You have to go through right to see more content or go to the left to see more content. 10 00:00:34,770 --> 00:00:41,480 So the content is actually larger than the size of the screen or view that you're trying to put the 11 00:00:41,490 --> 00:00:42,370 stuff into it. 12 00:00:42,420 --> 00:00:47,970 It doesn't matter what the view you using but it is the entirety of a scale or is a very small one as 13 00:00:47,970 --> 00:00:53,470 long as the content that you have is larger than than that is when you can utilize a scroll of use. 14 00:00:53,510 --> 00:00:59,130 Another place that the score views are used heavily in things such as messaging of course the messaging 15 00:00:59,130 --> 00:01:05,130 application is using something called a table we put a table view built into it is a scroll of view 16 00:01:05,190 --> 00:01:07,090 which allows you to scroll. 17 00:01:07,170 --> 00:01:14,010 It allows you to see more content within a smaller screen without the need of zooming in or cutting 18 00:01:14,010 --> 00:01:15,240 some content out. 19 00:01:15,420 --> 00:01:20,670 So with that in my school helping to escort them I'm when I started my new application that I'm going 20 00:01:20,670 --> 00:01:27,690 to call it a cruel views intro and then my score views intro with I'm going to do is I'm going to go 21 00:01:27,690 --> 00:01:34,890 to my storyboard in here and I'm going to add a scroll view to my UI so I'm going to say scroll wheel 22 00:01:35,730 --> 00:01:36,680 and it's a scroll of view. 23 00:01:36,690 --> 00:01:38,900 I'm going to place it somewhere like here. 24 00:01:39,420 --> 00:01:45,440 And I want to make sure that it kind of pins to the four corners so I know it doesn't change its size. 25 00:01:45,450 --> 00:01:53,040 So I'm going to add constraints to it saying things that I want to add or 20 20 20 and 20 and then I'm 26 00:01:53,040 --> 00:01:57,830 going to say add four constraints and now I have a scroll view here that is in the center of my view 27 00:01:58,100 --> 00:02:02,710 on what they could do is they could actually change the color of my background view so they could see 28 00:02:02,710 --> 00:02:03,840 it a little bit easier. 29 00:02:03,960 --> 00:02:11,390 So my bank view or become the light gray colors and maybe make my a scroll view pitch white. 30 00:02:11,430 --> 00:02:14,820 So we see them clearly so the white area is the school of you. 31 00:02:14,970 --> 00:02:20,730 So the next thing is like I said we have to have some sort of a content that is larger than this. 32 00:02:20,820 --> 00:02:25,460 It is either taller on the vertical sense or wider in the horizontal sense. 33 00:02:25,470 --> 00:02:27,930 And to do that I'm going to add a UI view. 34 00:02:28,170 --> 00:02:33,210 I'm going to say I have a view and this view and when I add it down in here it doesn't matter where 35 00:02:33,210 --> 00:02:37,570 you are that simply because I'm going to remove it from here real soon for that I'm going to do for 36 00:02:37,590 --> 00:02:42,900 it is this I'm going to say it's back on coteries may be green so we can see it clearly. 37 00:02:43,020 --> 00:02:47,270 Now I want to have a view that is larger than the size of this view. 38 00:02:47,280 --> 00:02:54,840 And to do that and go going here had command X carted from here go outside to my view controller and 39 00:02:54,850 --> 00:02:55,950 head commander. 40 00:02:56,160 --> 00:03:03,720 So it essentially pasted somebody in my storyboard without any relation to any specific view controller. 41 00:03:03,720 --> 00:03:10,640 So if I close my view or now the view is still out there in the scene not specific to any particular 42 00:03:10,640 --> 00:03:11,780 view controller. 43 00:03:11,940 --> 00:03:14,840 And that allows me to change its size. 44 00:03:15,000 --> 00:03:21,810 So I'm going to come in here and say for this newly created view I want to have these settings. 45 00:03:21,960 --> 00:03:26,040 I want to have it Savitt to be at maybe 375. 46 00:03:26,040 --> 00:03:30,900 The rest of it doesn't really matter because in this case I'm going to make a vertical school view but 47 00:03:30,900 --> 00:03:33,100 the height of it I might to be as a thousand. 48 00:03:33,110 --> 00:03:39,800 So a really tall one or at least much taller than the normal size or a normal screen size. 49 00:03:39,990 --> 00:03:43,240 So I have a view that is taller than my normal view. 50 00:03:43,390 --> 00:03:48,270 And what they want to do now is I want to make it a child of my school you I'm going to drag it over 51 00:03:48,270 --> 00:03:48,970 to my school. 52 00:03:49,000 --> 00:03:56,610 You make the child of my scroll of view and as you can see my view is actually getting outside the boundaries 53 00:03:56,610 --> 00:04:01,350 of the school of view but it's not going to work like this unless I set my constraints for it. 54 00:04:01,350 --> 00:04:08,940 So the first thing I want to set is this I want to say the view is actually having the same weight as 55 00:04:08,940 --> 00:04:09,850 the scroll view. 56 00:04:09,960 --> 00:04:12,210 So I'm going to say they have equal rights. 57 00:04:12,240 --> 00:04:17,870 I look at the vets and it says View has equal weight to it super view which is exactly what they want 58 00:04:17,870 --> 00:04:18,940 it to have. 59 00:04:19,140 --> 00:04:26,000 Then I'm going to come in here and say my view always always has a height of I'm going to give you that 60 00:04:26,000 --> 00:04:31,620 number manually and say 2000 which is the default one that we said a few minutes ago. 61 00:04:31,740 --> 00:04:37,470 So it always has a value of a 2000 or 1000 units is its height no matter what. 62 00:04:37,770 --> 00:04:43,710 Then I'm going to go ahead and say My view has a leading space to its container being the sole purview 63 00:04:43,710 --> 00:04:45,550 of the Scroll of view. 64 00:04:45,630 --> 00:04:52,740 It has a trailing face to its container being the sole purview of the scroll view again and I'm going 65 00:04:52,740 --> 00:04:55,860 to set most of these leading and trailing to be zero. 66 00:04:55,890 --> 00:05:02,190 So I don't want them to have any values trailing zero leading zero so it's perfectly fit within the 67 00:05:02,190 --> 00:05:06,060 boundaries of the scroll view in the horizontal sense. 68 00:05:06,270 --> 00:05:12,300 Then I'm going to go ahead and say my view against the school of you has a top Spaceways container and 69 00:05:12,440 --> 00:05:14,320 the value is not top. 70 00:05:14,320 --> 00:05:17,930 Minus 197 it's actually zero as well. 71 00:05:18,090 --> 00:05:22,140 So the top of it is actually stuck to the top of the scale of you as well. 72 00:05:22,170 --> 00:05:27,310 I don't know if you guys can see it within these colors sometimes the recording doesn't really illustrate 73 00:05:27,330 --> 00:05:27,730 it. 74 00:05:27,810 --> 00:05:33,960 But right now my view is actually starting from the top left corner of that area that is green which 75 00:05:33,960 --> 00:05:36,580 is the scroll view all the way down here. 76 00:05:36,600 --> 00:05:40,740 So the green you view is perfectly fit inside the scroll of view. 77 00:05:41,010 --> 00:05:46,290 Then I'm going to go in here and say my view against the scroll view or saw has a button a space as 78 00:05:46,290 --> 00:05:46,740 well. 79 00:05:46,890 --> 00:05:54,210 So the Baldemor spaces are merged with each other in a way that they both are set at the same place. 80 00:05:54,210 --> 00:05:57,100 This is probably the most important part of what you have to do. 81 00:05:57,150 --> 00:06:02,500 You have to say your super view is by them is the bottom of the view. 82 00:06:02,700 --> 00:06:07,940 Now you might be wondering why is this working so the way it is working is this euro scroll of view 83 00:06:08,190 --> 00:06:12,760 is being forced to push itself to the bottom of the green. 84 00:06:13,030 --> 00:06:19,290 Hence this one the constraint that says the bottom of the super view is the same as the bottom of the 85 00:06:19,290 --> 00:06:19,750 view. 86 00:06:19,920 --> 00:06:22,680 And if your items are reversed you can simply do this. 87 00:06:22,680 --> 00:06:26,740 You can go in here and say Riveras first and second item. 88 00:06:26,760 --> 00:06:32,730 Now what's the score of you tries to push itself down and reach to the bottom of the green one. 89 00:06:32,730 --> 00:06:40,140 There is another constraint in place which is this one the bottom of this screen is always 20 pixels 90 00:06:40,170 --> 00:06:48,030 below the size of the scroll view because of that this of you has to shrink its review and increase 91 00:06:48,030 --> 00:06:50,310 its content size. 92 00:06:50,340 --> 00:06:53,880 Let's see what that means when we actually simulate this application. 93 00:06:53,950 --> 00:06:59,310 I will do a quick recap of this once again because I have seen it that sometimes for the first time 94 00:06:59,310 --> 00:07:05,870 that guy as they see it they kind of struggle with it so now I have this school of you and I can actually 95 00:07:05,870 --> 00:07:11,840 scroll You see we have this little escrowed indicator on the site that shows us something is actually 96 00:07:11,840 --> 00:07:14,450 a scrolling once again to recap. 97 00:07:14,450 --> 00:07:20,390 Hardest thing happened is you have a school book that has to be within this boundary of the view the 98 00:07:20,390 --> 00:07:26,940 main view screen is not going to go any below or lower right or left is always going to have these gaps. 99 00:07:27,000 --> 00:07:32,470 Then we have a UI view inside it which is much much taller around a thousand units. 100 00:07:32,570 --> 00:07:39,770 So we say let's constrain every corner of the green view to a school view and pushed a scroll of view 101 00:07:39,770 --> 00:07:43,300 to go and try to accommodate for this large size. 102 00:07:43,490 --> 00:07:49,360 But then the school is going to say well I can't become that much taller because I have to finish somewhere 103 00:07:49,360 --> 00:07:52,850 around here 20 units before the screen ends. 104 00:07:53,030 --> 00:07:55,580 So they have to find a common ground between themselves. 105 00:07:55,580 --> 00:08:02,060 What happens is the school of your choice tween kids is content size and the green viewer stays within 106 00:08:02,360 --> 00:08:03,730 the same number they have. 107 00:08:03,740 --> 00:08:08,760 In this case being a housing units because of that because the content size that is like enough. 108 00:08:08,840 --> 00:08:13,670 So that's a very basic introduction on how to use the scroll of use within a storyboard. 109 00:08:13,820 --> 00:08:17,690 Let's move on to our next lesson where we actually do this more programmatically.