1
00:00:00,910 --> 00:00:01,900
Come back again.

2
00:00:01,980 --> 00:00:07,510
This is something to talk about two very important aspects of a school to be one of them is called content

3
00:00:07,510 --> 00:00:09,330
size which is the most important one.

4
00:00:09,490 --> 00:00:12,100
And there's another one called the content inset.

5
00:00:12,130 --> 00:00:17,520
So let's go ahead and see how they use either of these to go to school and start a new application.

6
00:00:17,530 --> 00:00:19,260
Obviously I'm going to call it a scroll.

7
00:00:19,330 --> 00:00:26,530
Your content size and the content size is something that they kind of saw it in our previous list and

8
00:00:26,530 --> 00:00:31,300
when we were setting it in this storyboard but this time I want to do it programmatically.

9
00:00:31,300 --> 00:00:37,770
So I'm going to come in here say I have a school for you so you buy a scroll of you and you ask all

10
00:00:37,780 --> 00:00:41,450
of you somebody in here just like the last time I'm going to place it so.

11
00:00:41,830 --> 00:00:46,360
I know I almost always use these for numbers but those are kind of irrelevant.

12
00:00:46,360 --> 00:00:48,210
You can place it whenever you like.

13
00:00:48,250 --> 00:00:52,840
And these are just numbers so maybe at this time I'm going to place a hundred units from the bottom

14
00:00:53,320 --> 00:00:56,930
so place it there and that is going to be or a school of you.

15
00:00:56,980 --> 00:01:00,220
And then I'm going to read a little bit of a different background color.

16
00:01:00,270 --> 00:01:04,960
So she has a light gray color and I'm going to go ahead and make an outfit for it.

17
00:01:05,020 --> 00:01:05,830
So yes.

18
00:01:06,220 --> 00:01:13,090
I'm going to say my school view becomes my scroll of view and that's all I have to do in this story

19
00:01:13,760 --> 00:01:18,940
now is go ahead into our view controller and imagine that we have some contents that we want to add

20
00:01:18,940 --> 00:01:23,760
to this school of you I'm going to say that content is going to be a huge eye view.

21
00:01:23,780 --> 00:01:32,100
So I'm going to severa I'm going to say my read view or any kind of view century is going to be a view.

22
00:01:32,460 --> 00:01:40,080
And then in my view that blog I'm going to go ahead and say My Read view is a view WAIT A C direct and

23
00:01:40,080 --> 00:01:40,990
that's Hegira.

24
00:01:41,050 --> 00:01:43,890
I'm going to make it to be these values.

25
00:01:43,900 --> 00:01:46,540
Let's stick it to the top left corner.

26
00:01:46,870 --> 00:01:49,600
So the top left corner was zero and zero.

27
00:01:49,780 --> 00:01:52,840
I'm going to give it the same it as my a scroll of use.

28
00:01:52,840 --> 00:02:01,380
I'm going to say my scroll view not bounce bounce not bounces bounce out of it.

29
00:02:01,480 --> 00:02:06,190
So I get the better of it and apply it to the weight of my right view and then the height of it I'm

30
00:02:06,190 --> 00:02:09,080
going to put a man who will Number three let's say 2000.

31
00:02:09,220 --> 00:02:14,370
So it's a very very long view a long read of you and I have to make it read as well.

32
00:02:14,370 --> 00:02:20,470
So I'm going to say in my view Dodd's background color becomes you eye color dark red.

33
00:02:20,620 --> 00:02:25,540
So now I have a school of you that I have to fit this red view inside.

34
00:02:25,660 --> 00:02:28,610
So to do that I'm going to say my escrowed view.

35
00:02:28,660 --> 00:02:32,710
I saw you on I'm going to read the view into it now.

36
00:02:32,770 --> 00:02:36,870
The problem is if you're on the application now and nothing is going to happen and to prove that I'm

37
00:02:36,880 --> 00:02:39,610
actually going to do that I'm going to run the application.

38
00:02:39,610 --> 00:02:45,340
And even though all red view is trying to be a view of the 2000 units on the height it is still is not

39
00:02:45,340 --> 00:02:49,300
going to force the school view to as cruel as you can see as much as I try.

40
00:02:49,310 --> 00:02:55,570
Nothing really happens in here and that's simply because the default content size of a scroll of view

41
00:02:55,870 --> 00:02:58,040
is the same size of its boundaries.

42
00:02:58,180 --> 00:03:03,440
So to fix that I have to apply a new size to the content size of my school.

43
00:03:03,770 --> 00:03:10,690
I'm going to go in here and say that my school view not the content sites and is asking for a C.G. size.

44
00:03:10,780 --> 00:03:17,740
I'm going to say it's a CGI size of what I have to provide two values to it and height so their width

45
00:03:17,770 --> 00:03:23,860
and height of this school you have to be the same as the width and height of my Read view if I meant

46
00:03:23,860 --> 00:03:28,770
to completely cover the entirety of the school view with the rest of you.

47
00:03:28,780 --> 00:03:33,090
So I'm going to say that to value as well as 2000.

48
00:03:33,220 --> 00:03:38,880
You could of course place yourself inside at different valuable and I in here over there.

49
00:03:39,010 --> 00:03:42,070
But for now I'm going to say my size is actually 2000.

50
00:03:42,070 --> 00:03:43,610
Let's see what happens now.

51
00:03:45,820 --> 00:03:51,460
Advance my view loads I can see that now I can actually scroll and we see this little indicator on the

52
00:03:51,460 --> 00:03:54,280
right side that is scrolling on the high.

53
00:03:54,280 --> 00:03:59,740
It's the same very principle would be upright if you wanted to make it a score on the horizontal level

54
00:04:00,070 --> 00:04:01,770
which is sometimes happening.

55
00:04:01,780 --> 00:04:06,810
But I would say that most often your school reviews are doing vertical scrolling.

56
00:04:06,840 --> 00:04:13,230
Now we got to see what a scroll view content size is but what is a content inset.

57
00:04:13,240 --> 00:04:14,380
Let me explain that to you.

58
00:04:14,380 --> 00:04:18,540
I'm going to say my scroll view not the content inset.

59
00:04:18,730 --> 00:04:22,570
And that's asking for a UI edge insets.

60
00:04:23,080 --> 00:04:28,070
I'm going to produce a page instead with four values top left by them and right.

61
00:04:28,180 --> 00:04:34,190
So the purpose of the content instead is to essentially make that interaction area of a scroll of view

62
00:04:34,380 --> 00:04:36,790
is smaller than the actual area.

63
00:04:36,790 --> 00:04:39,670
Now you might be wondering where would that be actually useful.

64
00:04:39,670 --> 00:04:43,930
Let me show you an example of how this could actually play to our advantage.

65
00:04:43,930 --> 00:04:50,080
Let me go to storyboard and here in my story what I'm actually going to go ahead and add a button for

66
00:04:50,100 --> 00:04:54,810
the but then I'm going to place it somewhere up here and I'm going to place it like that.

67
00:04:54,810 --> 00:04:58,550
Say it's the heights of maybe 64.

68
00:04:58,870 --> 00:05:06,550
It's a little bit taller and is placed right there in my scroll view is what is not a child of my scroll

69
00:05:06,550 --> 00:05:12,580
view if it's actually a child of the actual Superville and my Badenhorst something like this it has

70
00:05:12,610 --> 00:05:16,650
a background color that is somehow semi-transparent.

71
00:05:16,670 --> 00:05:22,510
I may I a color that is semi-transparent like green like that and semi-transparent.

72
00:05:22,510 --> 00:05:30,120
And then my color may be it is black and then the button says Come to me or something to that effect

73
00:05:30,130 --> 00:05:31,240
that doesn't really matter.

74
00:05:31,420 --> 00:05:33,300
Now I understand the constraints for it.

75
00:05:33,310 --> 00:05:38,580
I'm going to say is constrained to the leading edge to the thrilling.

76
00:05:39,100 --> 00:05:45,310
It is always the same heights and is constantly the top of this scroll of view.

77
00:05:45,310 --> 00:05:47,770
So they both have the same top.

78
00:05:47,770 --> 00:05:51,460
Now the height of my button was 64.

79
00:05:51,850 --> 00:05:58,090
If I remember that I'm going to go in here as the 64 I'm going to go to my view contour and say the

80
00:05:58,090 --> 00:06:00,300
top of it 64 units.

81
00:06:00,310 --> 00:06:03,610
We are not going to see anything left on by them and right.

82
00:06:03,610 --> 00:06:05,160
I'm going to keep it the same.

83
00:06:05,170 --> 00:06:10,040
So like I said you want to change the interaction area of the scroll view.

84
00:06:10,260 --> 00:06:14,480
If you run this application now will see that underneath still.

85
00:06:14,560 --> 00:06:19,320
But then even though we can see it it doesn't distract us from the content.

86
00:06:19,480 --> 00:06:24,940
So you can actually a scroll and the content actually ends right where the burden is.

87
00:06:24,940 --> 00:06:30,790
But then when I scroll they actually go under the button and that actually happens from time to time.

88
00:06:30,790 --> 00:06:37,120
For example in your photos up on your iPhone you can actually a scroll the content under the menu on

89
00:06:37,120 --> 00:06:43,300
the top but yet the content instead allows you to be able to make interaction with the objects that

90
00:06:43,300 --> 00:06:44,440
are under it.

91
00:06:44,440 --> 00:06:49,300
Imagine in this situation if I didn't have the content instead so there would be something like this

92
00:06:49,390 --> 00:06:55,630
at all times some of my content would be on there of the button which is not really a good thing maybe

93
00:06:55,630 --> 00:07:00,400
I wanted to be able to read them properly or I wanted to be able to make interactions with them.

94
00:07:00,520 --> 00:07:05,530
So they use the content instead to make sure that our interaction area is actually different.

95
00:07:05,530 --> 00:07:08,680
Another example I can give you which is something that I've been showing you.

96
00:07:08,680 --> 00:07:14,230
Towards the end of this whole courseware we talk about a all of different solutions is for instance

97
00:07:14,260 --> 00:07:20,180
if you have a text field within this red view and you want to be able to tap on it and start typing

98
00:07:20,260 --> 00:07:20,730
stuff.

99
00:07:20,860 --> 00:07:25,520
So the moment you do that tap the keyboard appears and actually hides that text.

100
00:07:25,660 --> 00:07:32,200
So in a situation like that you actually use the content inset to push the content above as long as

101
00:07:32,200 --> 00:07:33,600
the keyboard is visible.

102
00:07:33,730 --> 00:07:38,680
And that really helps because it allows us to see the content of the text field for as long as the keyboard

103
00:07:38,680 --> 00:07:43,630
is up and also allows us to scroll properly between the score view.

104
00:07:43,630 --> 00:07:46,430
So this was all of us content size and content.

105
00:07:46,480 --> 00:07:47,310
Inset.

106
00:07:47,440 --> 00:07:49,060
Let's move on to our next lesson.