1
00:00:01,860 --> 00:00:02,870
So welcome back.

2
00:00:02,880 --> 00:00:08,790
This is actually an exercise on what you have to do is this you have to have a segment that control

3
00:00:08,790 --> 00:00:16,960
Vietri Bardens and whenever each of them is topped the corresponding image to that segment that control

4
00:00:16,960 --> 00:00:19,510
segment should appear in an image.

5
00:00:19,890 --> 00:00:26,400
And for that I have provided you three images and those are the same images we used in the previous

6
00:00:26,400 --> 00:00:26,870
lesson.

7
00:00:26,880 --> 00:00:33,810
So let's go ahead to Axford and in school I'm actually going to make this starting part of the application

8
00:00:33,810 --> 00:00:34,600
for you.

9
00:00:34,770 --> 00:00:41,550
So single view the major switch journalists call it the switcher.

10
00:00:41,630 --> 00:00:45,530
I'm going to save my project the next thing I'm going to do.

11
00:00:45,630 --> 00:00:50,700
I'm going to go to my Finder are these three images.

12
00:00:50,780 --> 00:00:51,880
Yeah.

13
00:00:52,360 --> 00:01:01,230
And I'm going to copy them into my destination folder finished and I'm going to go to a story but I

14
00:01:01,230 --> 00:01:09,200
don't know yet but I have a segmented control on that segment that the control is somewhere up here.

15
00:01:10,260 --> 00:01:14,040
And it happens to have two or three items on it.

16
00:01:14,040 --> 00:01:21,170
And I also have an image of you Madge your view and that image you view is here.

17
00:01:22,340 --> 00:01:29,860
So what you want to do is to properly name all these three items on your segment that's control.

18
00:01:29,960 --> 00:01:35,140
And whichever one of them that is being tapped on the right e-mails should show up in here.

19
00:01:35,150 --> 00:01:39,610
So good like pause the video at this point try it on your own.

20
00:01:39,710 --> 00:01:45,510
And then once you're done have a look at my solution as well and try to compare it with what you managed

21
00:01:45,530 --> 00:01:47,250
to do.

22
00:01:48,590 --> 00:01:49,060
OK.

23
00:01:49,100 --> 00:01:50,910
So now I'm going to get this that.

24
00:01:50,990 --> 00:01:56,570
And the first thing I'm going to do is I'm going to go to my assistant even though I'm going to make

25
00:01:56,570 --> 00:01:59,030
my segment that control.

26
00:01:59,120 --> 00:02:01,410
This is called My sig.

27
00:02:01,440 --> 00:02:02,920
C t r l.

28
00:02:03,230 --> 00:02:07,840
This is my high energy view.

29
00:02:08,090 --> 00:02:16,700
And once again this is my segment that's control for an action and this is segue a change that change

30
00:02:16,700 --> 00:02:20,760
the action you can of course name this whatever you like.

31
00:02:20,810 --> 00:02:21,970
They don't really matter.

32
00:02:22,130 --> 00:02:30,200
So looking again at that age I have two properties one property for my segment that control one property

33
00:02:30,200 --> 00:02:36,930
for my image of you and I have an action for my segment on changed action.

34
00:02:37,100 --> 00:02:41,910
So let's go ahead to our DOT M and see how we're going to tie everything together.

35
00:02:42,110 --> 00:02:43,980
Remember in a storyboard.

36
00:02:44,000 --> 00:02:49,330
I have a segment that's going to work with three Baden's but they haven't named them properly and that

37
00:02:49,330 --> 00:02:50,300
is intentional.

38
00:02:50,300 --> 00:02:53,040
I want to do that programmatically.

39
00:02:53,120 --> 00:02:55,490
So let's go to that Emma.

40
00:02:55,640 --> 00:02:59,560
Emma I'm going to do the usual clean up stuff I know I don't need.

41
00:02:59,630 --> 00:03:02,370
And then here is what I'm going to do.

42
00:03:02,390 --> 00:03:14,370
I'm going to say and this array in my array it is are images array that is this array lock and any of

43
00:03:14,490 --> 00:03:30,390
its objects and the objects are these birds chat and I so let's remember those are chats and the last

44
00:03:30,390 --> 00:03:37,480
one is I pay attention to the fact that I'm not being that.

45
00:03:37,500 --> 00:03:45,780
JP G at the end of them I'm only writing the names of the files I needed to see why this becomes important.

46
00:03:45,780 --> 00:03:58,710
So in my view that load I'm going to say for let's say Genesis string image in images array AMG array

47
00:03:59,070 --> 00:04:00,720
for all three of them.

48
00:04:00,720 --> 00:04:06,030
Let's do this or let's do another type of 4:2 let's do it by counting.

49
00:04:06,030 --> 00:04:16,690
So for our into my 0 I am smaller than images array that counts.

50
00:04:17,280 --> 00:04:20,020
And then I plus plus here's what I want to do.

51
00:04:20,160 --> 00:04:31,930
I want to say my segmental control set titel and the title we want for sacrement index.

52
00:04:31,940 --> 00:04:35,860
So the segment that we want is obviously I that's what I mean.

53
00:04:36,020 --> 00:04:37,960
What's the title you want to put in.

54
00:04:38,000 --> 00:04:47,720
So I'm going to say it's a strange title and that title is going to be images array object that index

55
00:04:47,750 --> 00:04:48,850
pi.

56
00:04:48,860 --> 00:04:55,060
So what's happening what's happening is you're going through all of the elements in our array.

57
00:04:55,310 --> 00:04:58,380
0 1 and 2 because there's only three of them.

58
00:04:58,580 --> 00:05:06,560
Each time we are getting the name that is in there birds caught our eye and we are changing the title

59
00:05:06,770 --> 00:05:12,360
of our segment that control that particular segment to that title.

60
00:05:12,560 --> 00:05:17,970
So by that we should see a segment of the control that says birds count an eye.

61
00:05:18,190 --> 00:05:19,280
Let's see if that's the case.

62
00:05:19,280 --> 00:05:24,470
Let me run the application and see if we have managed to do this successfully.

63
00:05:24,470 --> 00:05:29,720
That was the reason why I didn't want to do it manually in the in this storyboard.

64
00:05:29,720 --> 00:05:35,720
When asked about the time you guys have to get used to doing things more and more using the code as

65
00:05:35,720 --> 00:05:38,180
opposed to using the interface builder.

66
00:05:38,480 --> 00:05:39,200
So great.

67
00:05:39,200 --> 00:05:46,280
I've got birds cats and all three of them are here and the next thing is I know that this function gets

68
00:05:46,300 --> 00:05:52,250
triggered every time we changed our value every time we change the segment it's control.

69
00:05:52,520 --> 00:05:54,110
This thing gets called.

70
00:05:54,140 --> 00:05:55,700
So what should we do with it.

71
00:05:55,880 --> 00:06:03,240
So what should we do is that we have to find the index of the guy that we have tapped on in this case

72
00:06:03,240 --> 00:06:05,260
is 0 1 and 2.

73
00:06:05,270 --> 00:06:13,170
So this is one this is 0 and this is 2 and we have to show that image from this array in the inside

74
00:06:13,180 --> 00:06:14,340
or image view.

75
00:06:14,360 --> 00:06:15,440
So let's do that.

76
00:06:15,500 --> 00:06:25,490
I'm going to say in our let's call it my index that is going to be my segmented control select segment

77
00:06:25,610 --> 00:06:26,560
index.

78
00:06:26,630 --> 00:06:30,710
And you remember this is an integer Y that's an integer.

79
00:06:30,710 --> 00:06:32,130
So we have to cast it.

80
00:06:32,140 --> 00:06:37,350
I'm going to say Forsett to be an integer because the types are interchangeable.

81
00:06:37,520 --> 00:06:40,230
So now I have the index that I need.

82
00:06:40,310 --> 00:06:45,760
So if I have the index that they need I can get the image that I want from this array.

83
00:06:45,770 --> 00:06:47,790
So that's going to be very simple.

84
00:06:47,810 --> 00:06:54,950
Only thing is remember that are in this array image array is now called to our view that Lord and we

85
00:06:54,950 --> 00:06:58,510
have to be able to get access with inside this method.

86
00:06:58,520 --> 00:07:04,880
If you want this application to run successfully so to do that I'm actually going to get the declaration

87
00:07:04,880 --> 00:07:12,530
of A.R.T. and put it right on the top and then I'm going to remove the declaration inside the view that

88
00:07:12,600 --> 00:07:15,580
Lord something we have done several times before.

89
00:07:15,590 --> 00:07:23,090
So now MSRA image array is accessible by view that is accessible by this method or any other method

90
00:07:23,090 --> 00:07:28,520
that you might have and it's definition is happening right when the view looks.

91
00:07:28,520 --> 00:07:36,140
So now they know that I'm going to go in here I'm going to say my image of you that image remember image

92
00:07:36,190 --> 00:07:39,890
you that you imagine requires a new image.

93
00:07:39,890 --> 00:07:43,140
So we have to produce a new image for it.

94
00:07:43,190 --> 00:07:44,360
I'm going to say you are.

95
00:07:44,380 --> 00:07:46,410
You may each image name.

96
00:07:46,730 --> 00:07:54,680
What's the name of the image it is that object depending on the index inside my array.

97
00:07:54,680 --> 00:08:03,770
So let's go ahead and say it is going to be images array object that index and we get myself a little

98
00:08:03,770 --> 00:08:13,630
bit of a space and that is going to be my index not if you one I'm happy to break this down and make

99
00:08:13,630 --> 00:08:17,650
it separate pieces so it kind of makes more sense.

100
00:08:17,660 --> 00:08:22,670
So let's go ahead and say the first thing that we need is that we need a new image.

101
00:08:22,670 --> 00:08:32,900
So you might imagine let's call it this image and this image is going to be a you image the major name.

102
00:08:33,080 --> 00:08:36,800
And he's asking me for the name of the match which I have to feed into it.

103
00:08:36,790 --> 00:08:40,240
So before that I have to find the name of the image.

104
00:08:40,370 --> 00:08:42,560
I'm going to say this thing.

105
00:08:43,460 --> 00:08:51,240
I am Jean name and I am the name is going to be this I decide am I am the object in this.

106
00:08:51,280 --> 00:08:54,040
Next I'm going to get that name of course.

107
00:08:54,050 --> 00:08:56,740
Here I was writing the whole thing in one go.

108
00:08:56,780 --> 00:09:03,920
Now I'm getting the I AM name I'm feeding it into my you I imagine and I'm feeding you my you eye image

109
00:09:03,950 --> 00:09:05,990
into the image that I need.

110
00:09:06,410 --> 00:09:08,660
So I made a mistake in here.

111
00:09:08,670 --> 00:09:10,640
So I like that.

112
00:09:10,650 --> 00:09:17,210
So once again we find the index of whoever that has been tapped on based on that index.

113
00:09:17,240 --> 00:09:23,960
We find the name of the e-mail that we need which is this one based on that he may tell you that you

114
00:09:23,960 --> 00:09:30,280
may itch which is this one and then that one we feed it into our my image of you.

115
00:09:30,390 --> 00:09:31,990
So do you think this is going to work.

116
00:09:32,090 --> 00:09:37,910
I give you five seconds to think about it or you can pause the video and look at the code then let me

117
00:09:37,910 --> 00:09:41,540
know if it works why you are thinking here's what I'm going to do.

118
00:09:41,540 --> 00:09:48,370
I'm going to reformat my code so I can actually show you everything in one screen so you can zoom into

119
00:09:48,380 --> 00:09:49,020
everything.

120
00:09:49,040 --> 00:09:51,190
Let's see if I can do that.

121
00:09:51,200 --> 00:09:52,060
Perfect.

122
00:09:52,280 --> 00:09:57,950
And even though I don't like it I'm going to put the curly brackets here in front of the declarations

123
00:09:58,280 --> 00:10:01,510
so I can actually show you everything in one screen.

124
00:10:01,790 --> 00:10:02,470
So perfect.

125
00:10:02,510 --> 00:10:04,260
I can zoom into everything now.

126
00:10:04,490 --> 00:10:06,620
So you think this is going to work.

127
00:10:06,650 --> 00:10:08,510
I tell you no it's not going to work.

128
00:10:08,510 --> 00:10:15,880
The reason is the name that I have in here is birds why in the name of the major I need is birds to

129
00:10:15,890 --> 00:10:19,660
JP G so that dot J-P is also important.

130
00:10:19,660 --> 00:10:25,180
And I don't have it inside my array so they have to do is I have to add them in here.

131
00:10:25,190 --> 00:10:29,260
I have to concatenate them to my a.a strings.

132
00:10:29,330 --> 00:10:38,810
So one way of doing it is I could just go ahead in here and say and as a string a string which format

133
00:10:39,140 --> 00:10:45,810
and the format that I want is what ever you find does JP G.

134
00:10:46,580 --> 00:10:49,480
And here is how that's going to be.

135
00:10:49,490 --> 00:10:59,120
So you're saying what ever you find in this IDM Let's say you find a or b and then dot J PGE and that's

136
00:10:59,120 --> 00:11:01,970
perfectly going to work for the way that we want it.

137
00:11:02,010 --> 00:11:07,580
Now I'm actually going to rewrite this with two lines of code so it becomes a little bit more a little

138
00:11:07,580 --> 00:11:08,850
bit cleaner.

139
00:11:08,870 --> 00:11:12,450
So here's what's going to be undo a few steps.

140
00:11:12,460 --> 00:11:19,700
So I know where I am here's what you Arvie get the image name and then I'm going to say a string and

141
00:11:19,700 --> 00:11:22,500
this string is called JP G.

142
00:11:22,720 --> 00:11:27,760
Did that is going to be unnecessary string format.

143
00:11:27,860 --> 00:11:35,740
What ever you find is the object which object image name because the image name that we have from the

144
00:11:35,740 --> 00:11:38,070
array is for instance cat.

145
00:11:38,060 --> 00:11:40,560
I'm going to say whatever you find in there.

146
00:11:40,640 --> 00:11:41,980
Dot J.

147
00:11:42,020 --> 00:11:42,710
G.

148
00:11:43,280 --> 00:11:48,840
And then I'm going to use the JP As the name for my images.

149
00:11:49,310 --> 00:11:51,050
So that's about that.

150
00:11:51,050 --> 00:11:54,340
Let's run our application and see where we are.

151
00:11:54,440 --> 00:11:55,650
I hope everything works.

152
00:11:55,650 --> 00:11:57,880
Now me launch my.

153
00:11:57,920 --> 00:11:58,650
Yes.

154
00:11:58,740 --> 00:12:00,860
So chat I.

155
00:12:01,070 --> 00:12:07,230
Birds cats birds cat birds and everything is working the way we wanted to keep working.

156
00:12:07,410 --> 00:12:12,220
And of course you know the image just being a search and that's because of the content mode.

157
00:12:12,260 --> 00:12:20,330
So I'm just going to go here say in the content and clip to bounce to boundaries and aspect fit which

158
00:12:20,330 --> 00:12:27,440
is something I usually like to work with for a bike relaunch application and the relaunch.

159
00:12:27,470 --> 00:12:34,200
I'm actually seeing this thing caught by Burts Actually I made a mistake.

160
00:12:34,200 --> 00:12:41,940
I needed an aspect fit another aspect to fit so aspect when I wanted to fill the size of this image

161
00:12:41,980 --> 00:12:47,000
view while maintaining the aspect ratio.

162
00:12:47,390 --> 00:12:49,640
So this should be the one.

163
00:12:50,030 --> 00:12:53,530
So now while everything is working we have a little problem.

164
00:12:53,540 --> 00:12:57,440
I'm going to literally launch the application and you can see the problem.

165
00:12:57,740 --> 00:13:02,310
When the application launches right up here we don't see any images.

166
00:13:02,330 --> 00:13:05,310
Even though Bairds is currently selected.

167
00:13:05,420 --> 00:13:12,740
So we need to somehow tell this function to run at least the ones right at the beginning of the launch

168
00:13:12,740 --> 00:13:13,990
of the application.

169
00:13:14,090 --> 00:13:20,330
And you might be thinking of many different ways for doing that you might be thinking of manually placing

170
00:13:20,330 --> 00:13:27,200
the e-mail that is birds or the very first item off your image area into here but I'm thinking of a

171
00:13:27,200 --> 00:13:35,140
more programmatic way and that is when I type on cat or II or Barretts this function gets called.

172
00:13:35,300 --> 00:13:40,230
So how about we call this function right at the beginning just once.

173
00:13:40,290 --> 00:13:49,130
So when I go to the end of my view the lot I'm going to say self here this market segment change action

174
00:13:49,560 --> 00:13:51,920
around this method for me.

175
00:13:51,920 --> 00:13:58,370
Now the problem is this method is used to be called by Interface Builder and is used to be sent to us

176
00:13:58,370 --> 00:14:03,390
by a sender but they don't have a sense that I'm just calling it myself.

177
00:14:03,500 --> 00:14:06,940
As a result and since this is a very important point.

178
00:14:07,100 --> 00:14:10,880
Since then there is not used anywhere in here.

179
00:14:10,940 --> 00:14:17,930
I'm going to say in a sort of ascender use Ninh it means nobody is sending you just call the function

180
00:14:18,380 --> 00:14:23,890
with this function is going to run is going to find the selected segment index which is the zeroth one.

181
00:14:23,890 --> 00:14:27,620
The very first one and everything else is going to work accordingly.

182
00:14:27,670 --> 00:14:29,770
Let's see when the application launches.

183
00:14:29,770 --> 00:14:36,050
Now we should see the very first image which are the birds right there are the very very beginning.

184
00:14:36,380 --> 00:14:38,630
So let's keep that in mind.

185
00:14:38,630 --> 00:14:42,760
That is how we made our image switch.

186
00:14:43,100 --> 00:14:50,950
It has an array that holds the names of all of our items places all of them inside our segmented control

187
00:14:51,010 --> 00:14:57,320
the names they get to be read from images array and then every time our segment that control changes

188
00:14:57,650 --> 00:14:59,600
we find the right image.

189
00:14:59,600 --> 00:15:05,210
One thing I want to do really really quickly and that's for those of you who are more interested in

190
00:15:05,210 --> 00:15:10,270
you know learning a little bit better and making things may be more complicated for yourselves.

191
00:15:10,430 --> 00:15:17,240
I want to rewrite this entire thing in just one line even though it is not a very common practice.

192
00:15:17,240 --> 00:15:19,110
I don't really like it myself.

193
00:15:19,160 --> 00:15:25,420
I come up across a lot of it in codes that I receive from other people I see other developers.

194
00:15:25,580 --> 00:15:27,740
They do everything in one line.

195
00:15:27,740 --> 00:15:31,610
That's probably because they have a better understanding of what's going on.

196
00:15:31,760 --> 00:15:34,490
It makes the code very difficult for others to read.

197
00:15:34,640 --> 00:15:36,250
However I'm going to try that.

198
00:15:36,260 --> 00:15:42,140
So I'm going to pause the video here in case you want to catch up once you're caught up to here on pause

199
00:15:42,140 --> 00:15:44,490
the video and then I'm going to write this thing again.

200
00:15:44,540 --> 00:15:47,490
So let's give it a few seconds if you want to pause.

201
00:15:47,950 --> 00:15:48,340
OK.

202
00:15:48,410 --> 00:15:51,400
Now I want to write this whole section in one line.

203
00:15:51,410 --> 00:15:55,940
So what should be my image use image.

204
00:15:55,970 --> 00:16:02,180
I know for a fact it has to be you I image that image should be named that.

205
00:16:02,360 --> 00:16:03,780
What should its name.

206
00:16:03,860 --> 00:16:12,670
It should be named and string thing the string format and the format is what ever you find the data.

207
00:16:12,680 --> 00:16:19,260
JP g of of thought of the name that we have in the array.

208
00:16:19,340 --> 00:16:26,650
What's the name in the array the name in the array is images array object and index.

209
00:16:26,660 --> 00:16:30,080
So what's the index the index is.

210
00:16:30,320 --> 00:16:35,870
My segmented control select the segment index.

211
00:16:35,870 --> 00:16:43,930
So as you can see this essentially replaces all of these lines saying you I you mentioned image name

212
00:16:43,960 --> 00:16:51,830
and that part then in a sort of A-J PGR that it says this part which is an assisting thing with format

213
00:16:52,130 --> 00:16:58,850
and the format is email your name in instead of the email name it says images objects that index which

214
00:16:58,850 --> 00:17:00,270
is what we have up here.

215
00:17:00,320 --> 00:17:05,840
And then it says What's the index the index is my segment that's going to select that segment of that

216
00:17:05,870 --> 00:17:07,630
index which is this line.

217
00:17:07,640 --> 00:17:11,950
Now this would work identically to what we have up here.

218
00:17:11,990 --> 00:17:17,360
It's a little less code if you imagine you know that would be the only line of code in your function.

219
00:17:17,360 --> 00:17:23,150
But like I said I don't personally like seeing these in any brackets next to each other and that kind

220
00:17:23,150 --> 00:17:26,090
of makes the code a little bit difficult to read for me.

221
00:17:26,170 --> 00:17:35,120
So I'm going to stick to the older format which was my image view that image is that or this image and

222
00:17:35,120 --> 00:17:40,330
this one you can keep it for your own learning's if you decide to play it on video.

223
00:17:40,460 --> 00:17:42,620
So with that in mind that's small one.