1
00:00:02,330 --> 00:00:08,010
So it will come back again in this lesson and you're going to talk about segmented controls.

2
00:00:08,040 --> 00:00:13,700
This is the part of the day you die and the user interface that helps us to develop things such as radio

3
00:00:13,750 --> 00:00:20,870
buttons buttons that they have different conditions and only one of them can be valid at any given time.

4
00:00:21,110 --> 00:00:24,010
So just go ahead into school in school.

5
00:00:24,020 --> 00:00:29,780
I'm going to make my self a new project you're going to close this one first make a new project this

6
00:00:29,780 --> 00:00:38,870
one I'm going to call it sick man said segment that control app in here.

7
00:00:41,660 --> 00:00:45,040
The hat for a storyboard my storyboard.

8
00:00:45,070 --> 00:00:48,450
I want to have a segmented control.

9
00:00:48,830 --> 00:00:55,780
That's one so that's a segment of the control that can have multiple different you know situations are

10
00:00:55,810 --> 00:01:03,370
in this one the default one has only to first and second and then I want to have a label on the label

11
00:01:03,370 --> 00:01:04,290
I'm going to put that in.

12
00:01:04,310 --> 00:01:08,540
Yeah it's just going to show us of which one has been selected.

13
00:01:08,830 --> 00:01:17,340
So that and then finally I'm going to change some of these and the last thing you're going to do in

14
00:01:17,350 --> 00:01:21,420
the interface building is you're going to add these other outlets to our blog.

15
00:01:21,430 --> 00:01:23,200
HYL.

16
00:01:23,200 --> 00:01:29,420
So when I go to the assistant editor a lot my daughter age gets rid of all the comments.

17
00:01:29,500 --> 00:01:39,810
Get myself a little bit more space control drag this one and call it my Sega CD or L and then control

18
00:01:39,810 --> 00:01:44,510
it like my label and call it the Reds label.

19
00:01:44,830 --> 00:01:47,500
So I have two outlets now.

20
00:01:47,500 --> 00:01:53,440
The other thing we have to do is that every time that we tap on this segment that console it switches

21
00:01:53,440 --> 00:01:58,550
from first to second or so on and so forth to other numbers if there were more.

22
00:01:58,750 --> 00:02:05,920
So we have to trigger a function that it's going to hold control like my Sigmond that control and say

23
00:02:06,210 --> 00:02:16,450
instead of an outlet give me an action and the action for it is let's call it a segue or tap on sake.

24
00:02:16,720 --> 00:02:23,200
Now something as important to note this is the last time the events that we were using was touch up

25
00:02:23,200 --> 00:02:26,220
inside because we were tapping on a button.

26
00:02:26,410 --> 00:02:33,300
But this time the value of the segmented control is being changed and we will see how that works.

27
00:02:33,340 --> 00:02:34,840
Why is that.

28
00:02:35,050 --> 00:02:36,440
Someone pressed that.

29
00:02:36,690 --> 00:02:45,820
And now if I jump back into my thought am I have that function or that action that is going to be called

30
00:02:45,880 --> 00:02:48,490
every time the top on my segment.

31
00:02:48,490 --> 00:02:55,450
So this first test to make sure it is actually working to do that I'm first got clean things up in here.

32
00:02:55,720 --> 00:03:03,100
So that's that going to meet any of those guys and in here I'm going to go ahead and say and Aslaug

33
00:03:03,550 --> 00:03:12,370
say segment's was typed on that's all he's going to say every time it happens it is going to say segment

34
00:03:12,370 --> 00:03:16,680
was top 10 and let's run our application and see what do we get.

35
00:03:18,160 --> 00:03:19,480
Once it launches

36
00:03:26,460 --> 00:03:35,340
so I have my concert at the bottom and I actually got a clearance so here every time I tap it says segment's

37
00:03:35,450 --> 00:03:36,840
was top done.

38
00:03:36,840 --> 00:03:39,570
Tap tap tap tap tap tap tap.

39
00:03:39,570 --> 00:03:44,350
It doesn't know which one I have done it just knows that it has been top done.

40
00:03:44,430 --> 00:03:51,900
So it is now left up to us to find out which one top line and to get that we have to get the index of

41
00:03:51,930 --> 00:03:53,610
the Koren's we selected.

42
00:03:53,940 --> 00:03:54,770
Let's see that.

43
00:03:54,810 --> 00:04:03,360
If I go to my storyboard it says this has two segments segment zero.

44
00:04:03,620 --> 00:04:12,810
It's saying First let's change that to hello hello and then I say this second segment segment one.

45
00:04:12,990 --> 00:04:15,130
It says a wall.

46
00:04:15,270 --> 00:04:16,590
So one of them says hello.

47
00:04:16,590 --> 00:04:21,380
One of them says Well of course if you want we could change this and add more to them.

48
00:04:21,420 --> 00:04:27,930
But what is important is to notice this segments they have or they're so the first one is zero like

49
00:04:27,930 --> 00:04:28,710
an array.

50
00:04:28,740 --> 00:04:36,250
The second one is one so on and so forth so that we can use to find out which segment has been currently

51
00:04:36,300 --> 00:04:37,200
selected.

52
00:04:37,450 --> 00:04:39,490
Let's jump back into that.

53
00:04:40,050 --> 00:04:49,820
I think my that and I'm going to go ahead and say integer our current index is the name of my segmented

54
00:04:49,830 --> 00:05:02,050
control which I recorded my sig control going to say well it's my sig sorry my sig control dot select

55
00:05:02,070 --> 00:05:10,740
that segment index the name of that Corinth segment that control on the selected segment index.

56
00:05:10,800 --> 00:05:13,200
So which one is currently selected.

57
00:05:13,320 --> 00:05:16,440
Of course this is an integer and this is an integer.

58
00:05:16,440 --> 00:05:21,780
So if you want to you have to cast it to each other and once they crossed it into an integer.

59
00:05:21,810 --> 00:05:25,890
So now we got the current index that's printed out.

60
00:05:25,950 --> 00:05:30,600
I'm going to say corons index is.

61
00:05:30,840 --> 00:05:34,930
And then I'm going to have that on say current index.

62
00:05:34,950 --> 00:05:41,730
So if you run this application now every time without it has to tell us of which segment we have actually

63
00:05:42,160 --> 00:05:48,990
are currently selected and me clearly my console and then now it says current indexes 1.

64
00:05:49,030 --> 00:05:51,060
Now I said Krant index is zero.

65
00:05:51,060 --> 00:05:52,870
So on and so forth.

66
00:05:53,400 --> 00:05:55,830
Obviously the rest of it is quite straightforward.

67
00:05:55,830 --> 00:06:05,530
For instance like with say if current index is zero then read the label that dot text should show us

68
00:06:05,610 --> 00:06:06,970
hello.

69
00:06:07,460 --> 00:06:18,120
I don't know where are the WMD and the fit every time else our rez is a label d'arte text has to be

70
00:06:18,120 --> 00:06:21,620
Tom wall and that's about that.

71
00:06:21,810 --> 00:06:27,750
So right now everything that gets called it finds out which one has been tapped on based on that makes

72
00:06:27,750 --> 00:06:29,570
a decision simple.

73
00:06:29,730 --> 00:06:32,030
So we can see it in here.

74
00:06:32,100 --> 00:06:33,670
So that's about now.

75
00:06:33,960 --> 00:06:39,270
Another thing we could do is we could obviously change the number of these segments.

76
00:06:39,270 --> 00:06:44,790
We could go ahead and say there are three segments and that's segment 2 or the last one.

77
00:06:44,790 --> 00:06:47,610
Let me just zoom in here a little bit.

78
00:06:47,640 --> 00:06:51,540
This zooming sometimes doesn't work well in video recording.

79
00:06:51,540 --> 00:06:53,050
I hope it works by now.

80
00:06:53,280 --> 00:06:55,980
Hello war are you all.

81
00:06:56,010 --> 00:06:56,640
Yes.

82
00:06:56,640 --> 00:06:59,780
So the last one essentially says I or yes.

83
00:07:00,030 --> 00:07:06,450
Now that's one way of adding them of course you could add them programmatically and they could add them

84
00:07:06,720 --> 00:07:11,250
by essentially dynamically to put them on the fly.

85
00:07:11,400 --> 00:07:13,040
Let's see how we could do that.

86
00:07:13,080 --> 00:07:17,230
I'm going to add two more buttons in here are two buttons essentially.

87
00:07:17,490 --> 00:07:21,060
So that's one of.

88
00:07:21,450 --> 00:07:24,680
Like that again but.

89
00:07:25,470 --> 00:07:28,380
So this is the one button.

90
00:07:28,800 --> 00:07:30,260
It says.

91
00:07:30,280 --> 00:07:33,890
I mean OK it's a little bit larger.

92
00:07:33,890 --> 00:07:37,220
I like it to be nice and tidy when I'm working.

93
00:07:37,230 --> 00:07:39,940
So I'm going to say you remove.

94
00:07:40,100 --> 00:07:40,900
Right.

95
00:07:40,950 --> 00:07:49,380
So my remove has a darker background and then I have another one which actually happens to have a brighter

96
00:07:49,380 --> 00:07:50,100
background.

97
00:07:50,220 --> 00:07:52,490
And this one says that.

98
00:07:52,600 --> 00:07:55,240
So let's go ahead on our two functions for them.

99
00:07:55,260 --> 00:08:03,810
I'm going to go to the assistant editor and into that age I'm going to say this is to remove action

100
00:08:04,400 --> 00:08:07,910
and I don't want an outlet I want an action.

101
00:08:07,920 --> 00:08:11,650
It's important to remember that that's not.

102
00:08:11,700 --> 00:08:13,650
And then I have another one.

103
00:08:13,680 --> 00:08:16,320
This one is called add action

104
00:08:19,120 --> 00:08:23,230
action say Action.

105
00:08:23,740 --> 00:08:24,150
Perfect.

106
00:08:24,150 --> 00:08:27,550
So now I have the two buttons and they both have functions.

107
00:08:27,550 --> 00:08:31,210
If I go with the editor you can quickly have a look at our age.

108
00:08:31,340 --> 00:08:37,120
We have that function or the action that it's called when the top on the segment we have to have one

109
00:08:37,120 --> 00:08:39,680
for the remote but then on the one for the output.

110
00:08:39,830 --> 00:08:41,480
And what do we want to do with them.

111
00:08:41,500 --> 00:08:48,460
So I'm going to go in here get myself a little bit more space and I'm going to come in here and say

112
00:08:48,520 --> 00:08:56,860
in the Remove option do this my segmented controller remove Signum and add index.

113
00:08:57,160 --> 00:09:01,710
Let's say you remove the very first one and it is animated.

114
00:09:01,810 --> 00:09:04,350
All of that's true.

115
00:09:04,510 --> 00:09:05,850
So very simple.

116
00:09:05,860 --> 00:09:11,870
It says take my Sigma the controller remove an object that this index and it is animated.

117
00:09:12,190 --> 00:09:15,620
And that is dynamically moving segments from it.

118
00:09:15,670 --> 00:09:22,960
And now we're going to go to the heart and I'm going to say my segment that control and or sorry insert

119
00:09:23,320 --> 00:09:29,630
segment title and the title I want to have is are Android.

120
00:09:29,680 --> 00:09:33,750
Why not at index of one.

121
00:09:33,850 --> 00:09:35,310
Is it animated.

122
00:09:35,560 --> 00:09:36,870
It is animated.

123
00:09:37,030 --> 00:09:41,140
So one of them removes a segment the other one inserts a segment.

124
00:09:41,180 --> 00:09:49,280
Let's run this code and if it all works well you should be able to not only tap on these items and get

125
00:09:49,280 --> 00:09:51,250
to see different things.

126
00:09:51,260 --> 00:09:58,270
We should also be able to remove that gets rid of one of them and either that adds another one remove

127
00:09:58,900 --> 00:09:59,590
it.

128
00:09:59,660 --> 00:10:00,560
Perfect.

129
00:10:00,560 --> 00:10:02,720
So it all works well up here.

130
00:10:02,880 --> 00:10:09,170
Now I want to show you two really quick things and here one of them is what if our segment that control

131
00:10:09,500 --> 00:10:15,780
our view wanted to actually connect it to the code that functions with the code.

132
00:10:15,860 --> 00:10:17,560
It would actually be a very very simple.

133
00:10:17,600 --> 00:10:23,790
It would be my view that Lord I would have to say my segment of control are the target.

134
00:10:23,790 --> 00:10:25,800
This is exactly like what we did for a.

135
00:10:25,800 --> 00:10:33,410
But then the target is in the center of the action has a selector and the event is just like what this

136
00:10:33,420 --> 00:10:37,240
cost is going to be of value you change.

137
00:10:37,280 --> 00:10:43,180
So it's going to be I don't know why it doesn't autocomplete sometimes.

138
00:10:43,580 --> 00:10:48,730
So you are in control events you like control control.

139
00:10:48,870 --> 00:10:51,820
It doesn't other company because of the brackets.

140
00:10:52,100 --> 00:10:54,590
It's all in here.

141
00:10:54,760 --> 00:11:04,260
You control events are for some reason it doesn't show me the value changed to search for its tight

142
00:11:04,370 --> 00:11:08,900
shot publication venues or a touch of value change.

143
00:11:08,910 --> 00:11:09,610
Perfect.

144
00:11:09,800 --> 00:11:13,150
So that's how we would be doing it programmatically.

145
00:11:13,160 --> 00:11:16,790
So we removed that and that's pretty much about it.

146
00:11:16,790 --> 00:11:24,860
So that's how you segment that control something I intentionally you know left out is there is times

147
00:11:24,860 --> 00:11:30,470
that you know when you call on a function whether it is a segmented contour or a button or anything

148
00:11:30,920 --> 00:11:35,720
the sender is not necessarily the same thing that you're expecting.

149
00:11:35,840 --> 00:11:43,460
So right now this sender is essentially the segmented controlled is saying that object is sending us

150
00:11:43,460 --> 00:11:48,250
to this function and it's of the type which means any kind of object.

151
00:11:48,260 --> 00:11:51,360
So we can't be sure what is that.

152
00:11:51,530 --> 00:11:58,400
In our case we got lucky because we already had an outlet for our segment that control what we did and

153
00:11:58,490 --> 00:11:59,680
here is what we could do.

154
00:11:59,690 --> 00:12:10,060
We could say you are segmented control this segment that's controlled is going to cost you segment that

155
00:12:10,060 --> 00:12:12,130
is controlled out of sender.

156
00:12:12,320 --> 00:12:13,640
I would say send there.

157
00:12:13,700 --> 00:12:16,940
I know it is going to be a guys segment that control.

158
00:12:17,000 --> 00:12:23,930
This is of course of course casting something is not the best idea unless you are absolutely sure that

159
00:12:23,930 --> 00:12:26,750
that is the case and that's the type of it.

160
00:12:26,900 --> 00:12:29,110
Otherwise there is another solution.

161
00:12:29,270 --> 00:12:36,680
So the other solution is this if you want to have an action that you know send is absolutely a segmented

162
00:12:36,680 --> 00:12:39,710
control you could actually write it differently.

163
00:12:39,710 --> 00:12:41,250
I'm going to put that edge.

164
00:12:41,330 --> 00:12:44,330
I'm going to write another option.

165
00:12:44,450 --> 00:12:49,190
You have to do it kind of manually or you could modify an existing one.

166
00:12:49,190 --> 00:12:57,890
I'm going to say be action my say action that's the action that I'm writing and I'm going to say it's

167
00:12:57,900 --> 00:13:03,740
sent there is not of that type I.D. It is you I segmented control.

168
00:13:03,890 --> 00:13:10,380
I'm saying I know that the sender for this action is always you or I segment that control.

169
00:13:10,490 --> 00:13:13,390
And as you can imagine these are all just names.

170
00:13:13,400 --> 00:13:14,750
None of them really matters.

171
00:13:14,750 --> 00:13:16,490
You can call this whatever you want.

172
00:13:16,670 --> 00:13:18,870
You can call sender whatever you want.

173
00:13:18,970 --> 00:13:24,900
And there could be put stg you know or input segment that control or whatever you want to call it.

174
00:13:24,980 --> 00:13:26,420
It doesn't really matter.

175
00:13:26,420 --> 00:13:33,290
Now that I have that I can go to my storyboard and in my story word I could let me add another segment

176
00:13:33,290 --> 00:13:33,980
to the control.

177
00:13:33,980 --> 00:13:37,070
So we kind of get a sense of this as well.

178
00:13:37,340 --> 00:13:41,200
So that's there in here.

179
00:13:41,210 --> 00:13:47,810
I'm going to go ahead and say this action that I have received my sig action.

180
00:13:47,880 --> 00:13:49,750
I'm going to drag it over here.

181
00:13:49,910 --> 00:13:53,020
Say you change the.

182
00:13:53,100 --> 00:13:57,820
All right now in my thought end I have to copy this method.

183
00:13:58,000 --> 00:14:03,600
This function I'm going to go to my dad and say this is the function.

184
00:14:03,730 --> 00:14:11,130
And now that input segment it refers to the segment that is calling this function.

185
00:14:11,320 --> 00:14:15,790
So you could modify your Iby actions whichever way you like.

186
00:14:15,790 --> 00:14:17,080
They are not set on a stone.

187
00:14:17,090 --> 00:14:21,550
The only thing that matters about them is this that they are Iby actions.

188
00:14:21,580 --> 00:14:24,040
Other than that not that it really matters.

189
00:14:24,040 --> 00:14:27,160
You can modify it whichever way you like it.

190
00:14:27,190 --> 00:14:32,650
I am however going to remove all of this which is a little bit outside the scope of this lesson and

191
00:14:32,670 --> 00:14:38,080
then when to go to my main storyboard I'm going to delete that guy and when I go to that age you know

192
00:14:38,170 --> 00:14:38,900
that guy.

193
00:14:39,010 --> 00:14:43,750
But remember that when you're writing methods these things they don't necessarily mean anything they

194
00:14:43,750 --> 00:14:45,700
could be called anything.

195
00:14:46,090 --> 00:14:48,020
And they all saw that type.

196
00:14:48,040 --> 00:14:53,860
You could specifically use it for instance for ease to remove action the action.

197
00:14:53,990 --> 00:14:56,220
Now we know there are going to be you I.

198
00:14:56,340 --> 00:14:58,250
They're absolutely going to be you.

199
00:14:58,260 --> 00:15:00,400
But they're not going to be anything else.

200
00:15:00,400 --> 00:15:02,300
So we could actually change them to you.

201
00:15:02,310 --> 00:15:05,900
I don't remember whether you change here in your adult H.

202
00:15:05,910 --> 00:15:11,410
You have to change it in here in your thought am I as well you can just drop it.

203
00:15:11,880 --> 00:15:13,300
And that's about that.

204
00:15:13,300 --> 00:15:19,120
With that in mind I think this is the end of this lesson and we'll move on to our next one to deal with

205
00:15:19,540 --> 00:15:20,050
images.