1
00:00:00,510 --> 00:00:05,430
Come back again in this lesson you're going to talk about re-useable views.

2
00:00:05,510 --> 00:00:12,180
Xiv we have obviously seen you I view classes in the past but never used them with Syabas as a separate

3
00:00:12,270 --> 00:00:13,960
interface when they're fine.

4
00:00:14,130 --> 00:00:20,040
So the reason we do it in this lesson which is within this scroll View section is in the next lesson

5
00:00:20,040 --> 00:00:26,360
I'm going to use one of these reusable views which has a much longer view and be embedded between a

6
00:00:26,370 --> 00:00:27,310
scroll view.

7
00:00:27,330 --> 00:00:33,600
It essentially offers you a way of simplifying your process and being able to have a visual feedback

8
00:00:33,600 --> 00:00:36,700
of what you are doing in a long view.

9
00:00:36,750 --> 00:00:42,210
So let's go ahead and see it in this lesson which doesn't have a high school view but does it have a

10
00:00:42,210 --> 00:00:43,290
usable view.

11
00:00:43,550 --> 00:00:45,630
And I want to show you two different ways.

12
00:00:45,630 --> 00:00:50,460
One of them is using it in the Interface Builder which is what I'm going to do here.

13
00:00:50,520 --> 00:00:54,130
And the other way which is using it during the programming part.

14
00:00:54,150 --> 00:00:56,650
And that's what I'm going to be doing in the next lesson.

15
00:00:56,700 --> 00:01:04,650
So here I'm going to start a new application code reuse and you or you view my reusable UI view.

16
00:01:05,040 --> 00:01:09,550
Here's what they should do and what are going on to start a new file command.

17
00:01:09,560 --> 00:01:16,710
And that's going to be a cocoa touch class of the type Swift and a subclass of you I view.

18
00:01:16,820 --> 00:01:19,350
And I'm going to call this one my view.

19
00:01:19,590 --> 00:01:23,150
So this is going to be a view that is the view that I want to use.

20
00:01:26,260 --> 00:01:31,880
Then the next thing is I'm actually going to go ahead and add another file which is going to be a command

21
00:01:31,940 --> 00:01:36,450
and an empty user interface view file.

22
00:01:36,650 --> 00:01:39,180
And I'm going to name it exactly the same thing.

23
00:01:39,190 --> 00:01:41,630
It doesn't matter that if you name it exactly the same thing.

24
00:01:41,630 --> 00:01:48,720
It really simplifies your life so now you have these two fires one of them is in my view swift.

25
00:01:48,750 --> 00:01:55,860
The other one is in my view that X I'd be so excited because essentially a particular format that most

26
00:01:55,860 --> 00:02:01,820
of the older excludes they used to work with it is an X sendmail interface.

27
00:02:01,890 --> 00:02:10,620
They're kind of file that is kind of like a grand parent of a storyboard itself is like the where they

28
00:02:10,620 --> 00:02:13,100
can not view controllers within them.

29
00:02:13,230 --> 00:02:18,360
They can only have view outlets within them which is exactly what we need for this case.

30
00:02:18,360 --> 00:02:24,220
For instance desex IAB is my view XIV is actually one UI view which is what they need.

31
00:02:24,240 --> 00:02:27,050
And within this you can add different outlets.

32
00:02:27,060 --> 00:02:31,220
I can have a label for instance I can place it up here.

33
00:02:32,350 --> 00:02:38,340
And maybe I can have a button that I'm going to bring it somewhere down in here.

34
00:02:38,620 --> 00:02:45,910
So this is a kind of a way for me to visually design my view in a separate place but then embedded within

35
00:02:45,940 --> 00:02:52,350
a view controller or embedded within a scroll view which is what we are we doing really soon.

36
00:02:52,540 --> 00:02:58,960
So we'll just reformat these things a little bit so we have a more appealing visual set so we can see

37
00:02:58,960 --> 00:03:00,750
things a little bit better.

38
00:03:00,880 --> 00:03:05,550
And my label has a different buy guns on my they found by gone color.

39
00:03:05,710 --> 00:03:12,790
And then going to set constraints for them I'm going to say this one has a height constraint and a constraint

40
00:03:13,670 --> 00:03:20,170
and it has a leading a space that's raising his face and atop top his space.

41
00:03:20,170 --> 00:03:23,240
Same thing for my body and it has a vent.

42
00:03:23,350 --> 00:03:25,250
It has a height.

43
00:03:25,270 --> 00:03:28,190
It has a bottom space.

44
00:03:28,210 --> 00:03:32,830
It has a leading space and it's trailing a space.

45
00:03:33,010 --> 00:03:35,200
So if you have more selfies taken care of now.

46
00:03:35,290 --> 00:03:39,000
Now we can connect these two fires together by any means.

47
00:03:39,010 --> 00:03:40,690
So let's go ahead and worry about that.

48
00:03:40,690 --> 00:03:46,720
How is this file my view that Swift is going to be connected to my view that XIV first and let it go

49
00:03:46,720 --> 00:03:48,400
to my Streetfighter.

50
00:03:48,880 --> 00:03:55,780
The one thing that you absolutely need to have is some sort of a content view that is this view Dumaine

51
00:03:55,960 --> 00:03:58,220
view of your X I'll be fine.

52
00:03:58,360 --> 00:04:02,950
So that's something that we must have something to have an IP outlet.

53
00:04:03,270 --> 00:04:04,480
Very very.

54
00:04:04,500 --> 00:04:10,650
But you could use the assistant Bindo for this if you wanted to but later typing it like this content

55
00:04:10,650 --> 00:04:11,730
of your wishes.

56
00:04:11,760 --> 00:04:13,200
You are right.

57
00:04:13,510 --> 00:04:19,980
So this is the one that we absolutely must have a copy of this and add something for my label as well

58
00:04:20,000 --> 00:04:21,700
say top label.

59
00:04:21,990 --> 00:04:29,650
And that's going to be a new label type then I'm going to come in here and say whenever this view is

60
00:04:29,700 --> 00:04:30,670
initialized.

61
00:04:30,670 --> 00:04:37,000
So in it and I'm going to use that decoder in it simply because if you use that in a tweet frame that

62
00:04:37,000 --> 00:04:39,640
is when you want to initialize it using programming.

63
00:04:39,640 --> 00:04:44,270
And that's what I'm going to be doing in the next lesson in this this an ongoing initialising initialize

64
00:04:44,350 --> 00:04:49,930
it using the storyboards so initialize using storyboards.

65
00:04:49,930 --> 00:04:57,610
So in the initialization I'm going to go ahead and say super dot in it using the same decoder and then

66
00:04:57,730 --> 00:05:03,890
I'm going to go ahead and say I need to find this particular x I'll be fine somehow.

67
00:05:03,940 --> 00:05:11,760
So to do that I'm going to say bundle are two main door node map name.

68
00:05:12,490 --> 00:05:19,990
And the name of that load the fight is my view is a string called in my view the owner of it is going

69
00:05:19,990 --> 00:05:23,380
to be self and the options for it is going to be.

70
00:05:23,590 --> 00:05:26,210
I don't have any particular options when I'm loading this.

71
00:05:26,440 --> 00:05:31,680
So whenever it is initialized it is going to initialize itself.

72
00:05:31,900 --> 00:05:33,950
I'd be fine as well.

73
00:05:33,960 --> 00:05:40,990
Once it did that I'm going to go ahead and say add this sub view you and you have to add this content

74
00:05:40,990 --> 00:05:42,400
view to it.

75
00:05:42,410 --> 00:05:49,150
Now this might be a little bit confusing for you wondering why and why adding the content view of myself

76
00:05:49,150 --> 00:05:50,270
to myself.

77
00:05:50,440 --> 00:05:51,120
That's the thing.

78
00:05:51,130 --> 00:05:54,120
It is not the content view of itself.

79
00:05:54,130 --> 00:05:57,090
My view is a separate view.

80
00:05:57,130 --> 00:06:03,520
That's the one that you're initialising the content view is the view of the Exide be fine.

81
00:06:03,520 --> 00:06:06,100
So these are essentially two separate things.

82
00:06:06,100 --> 00:06:12,430
That's why you hear you say at of view you're essentially adding the content of you the one that you

83
00:06:12,430 --> 00:06:15,430
can work on individually to do this one.

84
00:06:15,430 --> 00:06:20,070
The one that you can not work on it visually because we only have it in the code.

85
00:06:20,350 --> 00:06:28,470
And then once I have that I'm going to say content you know frame becomes self-taught thunderous.

86
00:06:28,540 --> 00:06:32,710
So essentially it takes on the same space as my my view.

87
00:06:32,710 --> 00:06:36,970
So self-taught boundaries if you plug it into the frame of the content you.

88
00:06:37,240 --> 00:06:43,310
So now I have my view and I'm going to go ahead into my view does it say be in my view the IBM when

89
00:06:43,310 --> 00:06:46,080
it go to files owner and in here.

90
00:06:46,230 --> 00:06:52,390
Going I go ahead and say the class for it is essentially going to become the class that we had in that

91
00:06:52,390 --> 00:07:00,040
which is the my view here I'm going to say the class is my view and as you can imagine the moment we

92
00:07:00,040 --> 00:07:03,600
set the my view in year we can have access to those outlets.

93
00:07:03,610 --> 00:07:09,580
We have the content view and the top label someone to drive the content view over the main view here

94
00:07:10,290 --> 00:07:12,570
and the top level over the top plate.

95
00:07:13,090 --> 00:07:20,300
So that's all you had to do in here for our view to do a quick recap this view you're the one index

96
00:07:20,330 --> 00:07:22,950
IB is the file that belongs to.

97
00:07:22,950 --> 00:07:24,240
They say be fine.

98
00:07:24,400 --> 00:07:33,220
And we now connected it to define owner of someone called my view but this my view your view is not

99
00:07:33,310 --> 00:07:35,220
the one that we are viewing here.

100
00:07:35,590 --> 00:07:38,140
There is stick content view of it.

101
00:07:38,260 --> 00:07:43,720
It becomes a bit of a long way on the process but that's that's what it is and that's the only way to

102
00:07:43,720 --> 00:07:44,350
do it.

103
00:07:44,530 --> 00:07:50,530
So now you have the content and it has some stuff in it and it is being loaded from this particular

104
00:07:50,530 --> 00:07:52,770
view and everything is the way we wanted it.

105
00:07:52,770 --> 00:07:57,890
We cannot go to work storyboard and actually add the one of these views to here.

106
00:07:58,090 --> 00:08:05,320
So and yet I'm going to say I have a view and I can use the you I view because my view is a subclass

107
00:08:05,320 --> 00:08:06,320
of the you i view.

108
00:08:06,330 --> 00:08:08,860
So they would work identically to each other.

109
00:08:08,860 --> 00:08:10,270
So I'm going to say this one.

110
00:08:10,270 --> 00:08:18,190
Let's place it right on the 000 zero space it's all over the space and I'm going to go ahead and say

111
00:08:18,280 --> 00:08:20,880
it's class is of that type.

112
00:08:21,010 --> 00:08:24,190
My view it is using of the type.

113
00:08:24,190 --> 00:08:26,340
My view for it's class.

114
00:08:26,470 --> 00:08:31,900
The next thing I'm going to do is I'm going to go to the assistant window and add an outlet for this

115
00:08:31,990 --> 00:08:32,470
object.

116
00:08:32,470 --> 00:08:39,340
So I'm going to say that I get over here and I'm going to call this one container or container view

117
00:08:39,340 --> 00:08:43,410
simply because this is the one that contains everything else.

118
00:08:43,600 --> 00:08:48,990
I'm going to connect it and do it automatically decide that the container is of the type.

119
00:08:49,000 --> 00:08:51,440
My view which is really great.

120
00:08:51,610 --> 00:08:56,890
And now I'm going to go ahead to a view controller and say the one thing that they want to happen is

121
00:08:56,890 --> 00:09:10,250
this in the view is a lot I want to say container dot top playbill dot text say no that from view control.

122
00:09:10,870 --> 00:09:15,840
So let's run this application and see figure out what we expect to see if it's all going to work.

123
00:09:15,850 --> 00:09:22,840
We should be able to see the content of this view within the view controller as well as having something

124
00:09:22,840 --> 00:09:24,770
changed for it from here.

125
00:09:25,240 --> 00:09:30,730
So now about once a happy occasion lot I can't see that update says loaded from the view controller

126
00:09:30,940 --> 00:09:33,430
we have to buy them which doesn't really do anything.

127
00:09:33,640 --> 00:09:41,530
And data view that we designed in the interface builder we did it visually is being presented here on

128
00:09:41,530 --> 00:09:44,650
my iPhone simulator interface.

129
00:09:44,650 --> 00:09:51,640
So really quickly to do a quick recap of all of these things what you do is you have a view which is

130
00:09:51,640 --> 00:09:58,350
of the type you view that view you also have an X I be fine for it that is way hitting command and adding

131
00:09:58,360 --> 00:10:00,540
a user interface.

132
00:10:00,880 --> 00:10:04,900
And then you add the view to your Exidy file.

133
00:10:04,900 --> 00:10:10,620
So you go to your XIV and you say your file is owner class is whatever human made it.

134
00:10:10,900 --> 00:10:15,150
And then in your initialization you say initialize it.

135
00:10:15,140 --> 00:10:20,410
Loading this Nibbe name and the name is the name of the file that you have.

136
00:10:20,530 --> 00:10:24,730
And then one last piece which is very important is this content.

137
00:10:24,750 --> 00:10:31,630
If you're having some sort of a view that contains your entire background view this is something that

138
00:10:31,630 --> 00:10:33,710
you know it's really really helpful.

139
00:10:33,790 --> 00:10:36,450
It has helped me in so many different developments.

140
00:10:36,640 --> 00:10:40,970
But at the same time the first time you see it it feels a little bit complicated.

141
00:10:41,110 --> 00:10:46,480
So maybe you want to spend a little time maybe review this video once again and make sure you fully

142
00:10:46,480 --> 00:10:52,390
understand how you can design this system essentially and then move on to the next lesson where we use

143
00:10:52,390 --> 00:10:53,400
the same thing.

144
00:10:53,590 --> 00:11:00,910
Not decoding using a code rather using a frame and be embedded within a scroll view this time.

145
00:11:01,090 --> 00:11:02,550
So I'll see you there then.