Hey everybody what's going on this is Caleb with Deb's slopes dot com.
And in this video we're going to set up our segment controller to properly will not only show but to
switch between images.
So we're going to be able to tap on a segment and change the image on our screen.
So go ahead and pull open your project and go into your assets.
The assets folder and this is where you need to pull in the assets in the source code that you downloaded.
So if you didn't download that go ahead and head back to the first video of the course and that there
should be a little folder with a download icon you can tap on and you can either save that to your Mac
or download it to your iPhone and airdrop it to your Mac either way.
So go ahead and select these for photos and drag them in like so.
And now we have four photos here that we can use in our project.
We've got some food some nature a cool skate scene and we've got a cat a big cat and we're going to
go ahead and head into our storyboard and set an initial image here.
So let's go ahead and just set the skate park to be the initial image.
And we're also going to need to call aspect fill here so that it doesn't get stretched out.
And we're also going to want to clip it to bounds so that it stays within the confines of the UI image
view.
Now we are getting a problem here.
It's getting stretched out.
And so what I'm going to do is I'm going to go ahead and take our stack view which is here.
Oh you know what.
I think part of the problem here is that everything is just it's on film mode right.
OK.
So since it's on film modem's going to go ahead and give this a fixed height of 3:35 which is the same
as the width.
And that'll pull it down to exactly the right size.
All right.
Very cool stuff.
So what we can do now since we have linked this up to an I.V. outlet.
We can go into our project here and this is the Iby action where we are connected so whenever we tap
on the segment this function will be called.
And so what we can do is we can access a property called selected segment index and that comes from
the segment controller and basically we can write a switch statement saying hey if the case is zero
meaning the first segment do this if this switch comes in and we say that's the number two segment we're
going to do something for the number two segment.
So go ahead and write a switch statement called switch sender because the sender is a segment control
and we can do selected segment index.
OK.
Give it some curly brackets there.
And now we need to go ahead and set some cases.
So go ahead and type case 0.
Meaning if the first item is selected We're going to do something.
And you know what what we're going to do is we're actually going to go ahead and set selected image
view to have an image for the first segment.
So go ahead and type selected image of your image and we're going to set it to be you I image.
OK.
And we're going to use you I image named and we need to pass in a name.
Now what is the name of the first segment skate and what is the name of the skate file skate.
OK.
So we're going to just go ahead and pass in skate.
Now you I image here this is an optional UI image and it's basically being safe it's saying hey if you
I image is not an actual image it's going to be Nelle.
But we know that it's an actual image so we can force on rapid case so this is what happens if the first
item is selected in the segment control.
But what if number one was selected I'm going to go ahead and type case 1.
And now if one is selected We're going to set selected image you dot image equals UI image named.
And what is the second an index food.
Right.
And the image is called food.
So go ahead and type food and force and wrap it then case two selected image view.
That image is going to be equal to you I image named.
And the third item I don't remember what it is it is cat.
So we need to go ahead and type cat and force unwrap it and then for the fourth one case three selected
image viewed that image equals you image named.
And the last one is nature.
OK.
I'm going to force unwrap it.
Now if I build this you'll see it'll give me an error.
It says Hey switch must be exhaustive.
Now a segment control can have up to.
I don't even know if it has a top but you can put more than just four items in a UI segment control.
So basically we need to handle a default case let's say that our segment segment control suddenly maybe
the user could add a new category in our app.
Suddenly it has five and we can't handle what happens in that case.
So we're going to set what's called a default case and that basically handles anything other than these
four cases.
So type default default and just set it to be equal to selected image view that image and set it to
skate because by default we want it to show the skate image at the beginning.
Anything else it should just show the skate image.
So I don't know about you but I want to build and run this and see if it worked.
So go ahead and build and run it to a simulator later on you're going to have to build it to your actual
device because we need access to the microphone.
And so that's coming up.
But for now we can just build the UI and test it on our simulator so as soon as it's done building we'll
check it out.
OK.
So this looks pretty great.
The skate image showed up and if I click on food watch what happens boom food shows up cat nature.
So cool.
Everything is showing up.
We are successfully able to switch between all of our images.
I love it.
That is so so good.
Now this is pretty much it for the interface of our app.
We have our button wired up that it can do stuff when it's pressed.
Our segment now can properly switch between images are toggle switch can be activated and basically
the status can be accessed through our Iby outlet and this label can also be changed.
So we have everything hooked up the way we need to in the next video we're going to actually learn how
to start a screen recording.
We're going to actually you know be able to grant access to the screen and microphone will be able to
turn off the toggle switch while we're recording all kinds of really cool stuff so let's go over to
the next video where we're going to use replay kit to start our very first recording.
I'll see you there.