So welcome back.
This is actually an exercise on what you have to do is this you have to have a segment that control
Vietri Bardens and whenever each of them is topped the corresponding image to that segment that control
segment should appear in an image.
And for that I have provided you three images and those are the same images we used in the previous
lesson.
So let's go ahead to Axford and in school I'm actually going to make this starting part of the application
for you.
So single view the major switch journalists call it the switcher.
I'm going to save my project the next thing I'm going to do.
I'm going to go to my Finder are these three images.
Yeah.
And I'm going to copy them into my destination folder finished and I'm going to go to a story but I
don't know yet but I have a segmented control on that segment that the control is somewhere up here.
And it happens to have two or three items on it.
And I also have an image of you Madge your view and that image you view is here.
So what you want to do is to properly name all these three items on your segment that's control.
And whichever one of them that is being tapped on the right e-mails should show up in here.
So good like pause the video at this point try it on your own.
And then once you're done have a look at my solution as well and try to compare it with what you managed
to do.
OK.
So now I'm going to get this that.
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
my segment that control.
This is called My sig.
C t r l.
This is my high energy view.
And once again this is my segment that's control for an action and this is segue a change that change
the action you can of course name this whatever you like.
They don't really matter.
So looking again at that age I have two properties one property for my segment that control one property
for my image of you and I have an action for my segment on changed action.
So let's go ahead to our DOT M and see how we're going to tie everything together.
Remember in a storyboard.
I have a segment that's going to work with three Baden's but they haven't named them properly and that
is intentional.
I want to do that programmatically.
So let's go to that Emma.
Emma I'm going to do the usual clean up stuff I know I don't need.
And then here is what I'm going to do.
I'm going to say and this array in my array it is are images array that is this array lock and any of
its objects and the objects are these birds chat and I so let's remember those are chats and the last
one is I pay attention to the fact that I'm not being that.
JP G at the end of them I'm only writing the names of the files I needed to see why this becomes important.
So in my view that load I'm going to say for let's say Genesis string image in images array AMG array
for all three of them.
Let's do this or let's do another type of 4:2 let's do it by counting.
So for our into my 0 I am smaller than images array that counts.
And then I plus plus here's what I want to do.
I want to say my segmental control set titel and the title we want for sacrement index.
So the segment that we want is obviously I that's what I mean.
What's the title you want to put in.
So I'm going to say it's a strange title and that title is going to be images array object that index
pi.
So what's happening what's happening is you're going through all of the elements in our array.
0 1 and 2 because there's only three of them.
Each time we are getting the name that is in there birds caught our eye and we are changing the title
of our segment that control that particular segment to that title.
So by that we should see a segment of the control that says birds count an eye.
Let's see if that's the case.
Let me run the application and see if we have managed to do this successfully.
That was the reason why I didn't want to do it manually in the in this storyboard.
When asked about the time you guys have to get used to doing things more and more using the code as
opposed to using the interface builder.
So great.
I've got birds cats and all three of them are here and the next thing is I know that this function gets
triggered every time we changed our value every time we change the segment it's control.
This thing gets called.
So what should we do with it.
So what should we do is that we have to find the index of the guy that we have tapped on in this case
is 0 1 and 2.
So this is one this is 0 and this is 2 and we have to show that image from this array in the inside
or image view.
So let's do that.
I'm going to say in our let's call it my index that is going to be my segmented control select segment
index.
And you remember this is an integer Y that's an integer.
So we have to cast it.
I'm going to say Forsett to be an integer because the types are interchangeable.
So now I have the index that I need.
So if I have the index that they need I can get the image that I want from this array.
So that's going to be very simple.
Only thing is remember that are in this array image array is now called to our view that Lord and we
have to be able to get access with inside this method.
If you want this application to run successfully so to do that I'm actually going to get the declaration
of A.R.T. and put it right on the top and then I'm going to remove the declaration inside the view that
Lord something we have done several times before.
So now MSRA image array is accessible by view that is accessible by this method or any other method
that you might have and it's definition is happening right when the view looks.
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
you that you imagine requires a new image.
So we have to produce a new image for it.
I'm going to say you are.
You may each image name.
What's the name of the image it is that object depending on the index inside my array.
So let's go ahead and say it is going to be images array object that index and we get myself a little
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
it separate pieces so it kind of makes more sense.
So let's go ahead and say the first thing that we need is that we need a new image.
So you might imagine let's call it this image and this image is going to be a you image the major name.
And he's asking me for the name of the match which I have to feed into it.
So before that I have to find the name of the image.
I'm going to say this thing.
I am Jean name and I am the name is going to be this I decide am I am the object in this.
Next I'm going to get that name of course.
Here I was writing the whole thing in one go.
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
into the image that I need.
So I made a mistake in here.
So I like that.
So once again we find the index of whoever that has been tapped on based on that index.
We find the name of the e-mail that we need which is this one based on that he may tell you that you
may itch which is this one and then that one we feed it into our my image of you.
So do you think this is going to work.
I give you five seconds to think about it or you can pause the video and look at the code then let me
know if it works why you are thinking here's what I'm going to do.
I'm going to reformat my code so I can actually show you everything in one screen so you can zoom into
everything.
Let's see if I can do that.
Perfect.
And even though I don't like it I'm going to put the curly brackets here in front of the declarations
so I can actually show you everything in one screen.
So perfect.
I can zoom into everything now.
So you think this is going to work.
I tell you no it's not going to work.
The reason is the name that I have in here is birds why in the name of the major I need is birds to
JP G so that dot J-P is also important.
And I don't have it inside my array so they have to do is I have to add them in here.
I have to concatenate them to my a.a strings.
So one way of doing it is I could just go ahead in here and say and as a string a string which format
and the format that I want is what ever you find does JP G.
And here is how that's going to be.
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
perfectly going to work for the way that we want it.
Now I'm actually going to rewrite this with two lines of code so it becomes a little bit more a little
bit cleaner.
So here's what's going to be undo a few steps.
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
this string is called JP G.
Did that is going to be unnecessary string format.
What ever you find is the object which object image name because the image name that we have from the
array is for instance cat.
I'm going to say whatever you find in there.
Dot J.
G.
And then I'm going to use the JP As the name for my images.
So that's about that.
Let's run our application and see where we are.
I hope everything works.
Now me launch my.
Yes.
So chat I.
Birds cats birds cat birds and everything is working the way we wanted to keep working.
And of course you know the image just being a search and that's because of the content mode.
So I'm just going to go here say in the content and clip to bounce to boundaries and aspect fit which
is something I usually like to work with for a bike relaunch application and the relaunch.
I'm actually seeing this thing caught by Burts Actually I made a mistake.
I needed an aspect fit another aspect to fit so aspect when I wanted to fill the size of this image
view while maintaining the aspect ratio.
So this should be the one.
So now while everything is working we have a little problem.
I'm going to literally launch the application and you can see the problem.
When the application launches right up here we don't see any images.
Even though Bairds is currently selected.
So we need to somehow tell this function to run at least the ones right at the beginning of the launch
of the application.
And you might be thinking of many different ways for doing that you might be thinking of manually placing
the e-mail that is birds or the very first item off your image area into here but I'm thinking of a
more programmatic way and that is when I type on cat or II or Barretts this function gets called.
So how about we call this function right at the beginning just once.
So when I go to the end of my view the lot I'm going to say self here this market segment change action
around this method for me.
Now the problem is this method is used to be called by Interface Builder and is used to be sent to us
by a sender but they don't have a sense that I'm just calling it myself.
As a result and since this is a very important point.
Since then there is not used anywhere in here.
I'm going to say in a sort of ascender use Ninh it means nobody is sending you just call the function
with this function is going to run is going to find the selected segment index which is the zeroth one.
The very first one and everything else is going to work accordingly.
Let's see when the application launches.
Now we should see the very first image which are the birds right there are the very very beginning.
So let's keep that in mind.
That is how we made our image switch.
It has an array that holds the names of all of our items places all of them inside our segmented control
the names they get to be read from images array and then every time our segment that control changes
we find the right image.
One thing I want to do really really quickly and that's for those of you who are more interested in
you know learning a little bit better and making things may be more complicated for yourselves.
I want to rewrite this entire thing in just one line even though it is not a very common practice.
I don't really like it myself.
I come up across a lot of it in codes that I receive from other people I see other developers.
They do everything in one line.
That's probably because they have a better understanding of what's going on.
It makes the code very difficult for others to read.
However I'm going to try that.
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
the video and then I'm going to write this thing again.
So let's give it a few seconds if you want to pause.
OK.
Now I want to write this whole section in one line.
So what should be my image use image.
I know for a fact it has to be you I image that image should be named that.
What should its name.
It should be named and string thing the string format and the format is what ever you find the data.
JP g of of thought of the name that we have in the array.
What's the name in the array the name in the array is images array object and index.
So what's the index the index is.
My segmented control select the segment index.
So as you can see this essentially replaces all of these lines saying you I you mentioned image name
and that part then in a sort of A-J PGR that it says this part which is an assisting thing with format
and the format is email your name in instead of the email name it says images objects that index which
is what we have up here.
And then it says What's the index the index is my segment that's going to select that segment of that
index which is this line.
Now this would work identically to what we have up here.
It's a little less code if you imagine you know that would be the only line of code in your function.
But like I said I don't personally like seeing these in any brackets next to each other and that kind
of makes the code a little bit difficult to read for me.
So I'm going to stick to the older format which was my image view that image is that or this image and
this one you can keep it for your own learning's if you decide to play it on video.
So with that in mind that's small one.