Hey what's up guys.
My name's Jacob Bloodsworth slopes dot com.
And in our last lesson we got our map view all working and showing our current location.
So that was really cool.
And this one we're going to get that cool slider switch all hooked up so if you remember from our current
run Visi we're going to make this you I am a you slide over and when it hits when it goes over the pause
button will have it and the run and return back to the begin run visi.
It's really cool and it's not too hard and it really adds you know a pretty sweet feature to the app.
But before we get started let's open up our terminal.
And like I said you don't have to always be making a new branch but you should definitely be committing
all your changes and all that good stuff.
So I'm going to create a new branch for this lesson lesson six
right.
And we're good to go.
All right so we have our begin run Visi we have our run log Visi and then we have our location Visi
that we're sharing between the begin run VC and the current run VC just so so we can share the same
C-L location manager but we don't have a VC set up for this guy yet so let's go ahead and Right-Click
our control or folder and his new file and go ahead and click on iOS Cocco touch class and we will name
this current Ron VC All right make sure language Swift is selected.
Make sure your target your project selected go ahead and create it.
And we can delete all of this stuff and we don't need this common code here.
And let's see now let's go back to our storyboard and we have to connect this Visi swift file to our
storyboard.
So open up your
attributes inspector or I'm sorry.
Identity inspector and right were custom classes.
Pull that down and just find our current run we see that we just created.
And now it's tied to that.
And now we can hook up all of our IP outlets.
So let's go ahead and do that.
Open up the assistant editor and if it doesn't automatically open the VC we just connected.
No big deal you can usually go to Automattic here and click on current run Visi or you can go through
your whole project and find it manually.
So once we have our VC up we can connect I.V. outlets.
So we're going to have to connect our our background to the slaughter switch and also the UI image that's
actually sliding.
And the reason we're connecting the background is that we're going to be using that center location
of that view to know where our slider is it's just easier than referencing the whole VC or like the
background image Visi it makes a little easier as well for supporting other screen sizes and all that
cool stuff.
So let's go ahead and with the background.
You I image you selected let's just control drag right above the view did load and we will call this
background.
Let's see what's a good name.
We can just call this the Swype background image view.
Right.
And let's give it some space underneath and connect this round image view.
So select that and just control drag right below the background one and we will call this the slider
image view.
All right great.
We're not going to worry about the other ideologies at this time because we only care about the slider
switch.
So let's go ahead and close the assistant editor and open up our current run visi.
So here's what we have a couple of things we're going to have to do.
So we're going to need a pan a pan gesture recognizer attached to our slider image.
We're also going to have to set the delegate for the pan the pan or the gesture recognizer.
So with all that good stuff and then we're also going to have to create a a function that gets called
when our gesture is being used.
So with all that being said in view did low.
Let's go ahead and create our Swype gesture.
So we knew Let's see let swipe gesture
OK.
Sorry about that.
Had to silence some of my devices so let's go ahead and make that swipe gesture.
Let's swipe gesture equal you hi pan gesture recognizer.
And we want this one where you can pass the target and selector in and the target is going to be self
and the action.
So we need to create a function that will get called.
So we will just go ahead and pass and one will make in a second.
So go ahead and hit the hash tag type selector and then open in parentheses.
And now you would just pass in the function we're going to create and we'll call this the end run swipe
and run swiped.
So the end run was swiped.
Right.
And we need to pass in a sender and just do a call in there and then let's close all of our parentheses
out.
And that is our gesture created.
And it's going to yell at us because this function does not exist.
So if we go ahead and create that function right now just right underneath view did load go funk and
run swiped.
And we need to have a ascender variable and this is going to be of type UI hand gesture recognizer and
then closing parentheses and opening and closing brackets.
And there is our function.
So far so good.
And now we have to attach our gesture recognizer to our to our view.
Right.
So we want it on our slider image view.
So if we call our slider image view and we say add gesture recognizer perfect and we just pass in the
gesture we just create it just like that.
And then we also want to enable user interaction.
So slider image view enable OK is user interaction enabled and then we want to set that to true right.
That's good.
And now we need the gesture recognizer delegate attached to our swipe gesture.
So go ahead and you swipe gestured.
DELEGATE.
OK.
And then so we need to set this to self and cast it as a UI hand gesture recognizer.
Delegate well you get not pand just gesture sir.
There we go and that is done and I just forgot that we also want this current run VC to inherit from
our location VC.
So let's just erase the view controller.
We don't want an inheritance from that and Pessin our location Visi perfect.
Ok so now let's go down to our end run swiped selector that we created.
And so we're going to be moving our slider image view but we're going to be comparing it to the background
image view location.
So we're going to do everything off the center of our Swype background image.
So for that to work we're going to need a minimum and maximum offset because if everything goes off
the center we need to know where the far left side is and the far right side is.
So we're going to create a C.G. float for our minimum adjust and this is a C.G. float and we're going
to set this to I don't know let's I'm guessing like 80 and we can always adjust that later.
And it's basically going to be like when we slide it to the left side if it goes further and we want
it or not far enough we'll change that number accordingly and then we'll also make a max of just C.G.
float and we're going to make this one a little bigger because it's actually going outside of the view
because that pause button is separate.
So we'll start at like 130 and just We'll see if that's good it's it might be too much and might be
too little.
I'm not sure yet.
Okay.
And then we need to.
So the sender being passed in we need to get a reference to that view.
So that slider image view is the sender and we need to just set a variable to it and we'll just do that
with an IF let.
And this will be slider view equals sender view so we're setting the sender's view to a new variable
called slider view are it an opening and closing brackets.
And now we need to check for the state of our gesture.
So there are a few like did the gesture begin.
Did it change all that stuff.
We want to just check for beginning and changing.
OK.
So if sender that state equals you I gesture recognizers state DOT began.
OK.
We want to know if it begins.
We also or if the sender.
That state equals you.
I gesture recognizers state is equal to dot changed whoops changed.
OK so every time that are just your recognizer has began or changed it will come into this if statement.
OK.
So once it gets in here we'll have to check for the center of our slider view and we only care about
the X location because we don't want it to move vertically in our and our Visi right.
We're just sliding left and right.
So we need to check to see if our view is within the minimum and maximum range to move it right.
So let's go ahead and say if slider view dot center so the center so the center of our slider view image
that X we only care about the x coordinate we want to know if it's greater than or equal to our are
what we call our Swype background or Swype background image view data center that X we want to know
if it's greater than arm far.
Basically right now we're just seeing if it is greater than the center of our background image which
obviously it's not going to be because it's to the left of it.
So now we subtract our minimum adjust and so that is going to just check to make sure it's greater than
the minimum we just set on it.
So if it is greater than that it's going to allow us to enter this function.
So we also want to make sure so do.
And we also want to make sure that the wider view sensor that X is less than or equal to the Swype background
image center that X plus Max adjust.
So this is just making sure it's not further then as far as we want it to go on the right side.
Right.
So if it's between our two points that we want our slider image to be we will then set the center to
our slider image to a new point and that will allow it to move.
So now let's do our slider view.
Data Center equals.
This is a C.G. point.
So we had to adjust the X and the Y.
So go ahead and do that.
And it is the C-g float and our x value is going to be
the current center of our slider view that X plus the the translation and the translation is basically
wherever your finger is when you slide it.
It's going to add or subtract the difference from that point.
And I just realized we actually forgot to set our translation but it's super easy.
So let's see right underneath the if statement here.
If it changed let's go ahead and just say let translation equal sender dot translation of self view
OK.
And that gives us the translation of you know the senator being passed in.
And so the translation is just literally how many points we're adding or subtracting from the current
location.
So now we can just take our X location.
So that's our slider view center dot X and add the translation dot next.
And so that'll take care of if it's negative or positive it will just set that and our Y location we
don't want to change so we're just going to send in our slider view center Y and nothing nothing needs
to change.
So OK so if our point is between these two points we can move it around.
And I'm I'm pretty sure that's all we need.
We just have to.
OK.
So right here.
Is Outside of this if statement but inside of the gesture recognizer if it began or changed we just
need to now do sender dot set translation and you're going to pass an R C G C C G point zero.
And we want to just pass in our view and that would just be self view all right.
Cool.
So now if we run this we should be able to move our slider image view back and forth OK let's start
our run and look at that we can drag this back and forth.
It got stuck here.
So we'll have to do some adjustments.
And did you also notice that the slider was behind the end run so we'll also have to fix that.
So let's go into our storyboard.
And open up the tree here and now our slider image needs to just be on the other side underneath the
end run label and that will take care of that.
And then if we go back to our current run see less than or equal to
our Max.
Just
OK.
I think this is OK for now so what we're going to have to do is if it does hit the max area or it goes
above the max area we want to set the slider view center to the max so we can still continue to move
it.
Otherwise like when it got stuck it got outside of a max area and then obviously it doesn't answer the
if statement anymore.
And we're also going to do the same thing for minimum so if it goes to the minimum point or further
we want to just set it to the minimum point.
OK.
So let's go ahead and do an else here and we want to else if slider view center x is greater than or
equal to our Swype background image view center that X plus the max and just
and like us the far right place so we're just kind of off center in the center.
So if it's greater than this we want to just make sure we set the center to that.
So take our slider view data center dot X and we want to just set this to C-g point
or we can just center not we don't need a C.G. point.
We will just do our Swype background view data center and X plus the maksud just and that will take
care of that.
All right.
Cool.
You know we don't even have to do this C-g point stuff here either.
Why don't we just do slider image center dot X
and we'll do the same thing we'll just do slider view dot center dot X plus the translation dot X and
that should accomplish the same thing.
And then so after this so if it's greater than our max point we set it to the max point.
And then lastly else this would just be if it's minimum right.
We just set our slider view center dot X equals the Swype image background or background image view
center X minus our minimum.
Just
and that should do it.
So now if we run this we should build a slide back and forth.
All right let's try it out like that.
So yeah we can slide it back and forth.
This is awesome and it actually looks like this is kind of where we want it.
So if this went farther than over like over here or like not close enough we would just adjust the minimum
adjustment.
So it's 80 right now so you can make it 85 90 70 whatever you need like all of our screens are probably
a little different.
So you guys might have to change it and notice it's in front of the end run now.
And I think it probably goes a little further than we want it so let's adjust that one.
So it's a little off center.
Let's go ahead and stop this and let's just make this like one.
Twenty one twenty six is probably too much but let's just say OK so click Start Run and let's see.
Yes it's a little too much so I think that's all right let's just do like 128 and we'll call it a day.
Save your project and.
All right.
So now there's a few things we need to do when it hits the max adjust we want the run to end right.
So underneath here we can we're going to add some code so and run code goes here.
So whatever we use to end our run later.
And we also want to dismiss the the VC right so dismiss animated.
True yes completion handle or nil.
We don't need that.
So calling this will now dismiss our view and we'll go back to the main the main view which is really
cool and we don't want anything to happen on the minimum view so that's good.
But what we do want let's run this again.
We want when we let go of this at any point we wanted to animate.
And back to the beginning right.
Let's make sure and our exit work.
So that's really cool.
So what we want is if the sender state hasn't began or changed we want to do an else here.
Let's see.
Else we'll do it.
Else if.
And then we want to check the sender state again.
And if it's equal to you I gesture or state that ended.
All right.
So if it ended if we stopped using the gesture recognizer we want to then animate our view back to the
beginning right and doing the animation super easy we can just do a UI view
animate with duration and let's you ration
completion the way
time interval with duration I guess this one is great.
So with duration let's set it till like point 1 we want it to go really quick.
And then inside of this code it will just set our slider view center to the minimum just right.
So we will just do slider view center X equals Swype background view data center that X minus minimum
adjust and let's run this and see if it worked.
We got all that one second.
Requires self oh we just need to do self because we're inside a completion handler
and let's run it.
Now
all prying itself on the slider views well maybe not.
OK let's start it.
And now if I'm dragging and let go look at that.
It shifts back to the left.
Pretty cool so we just made our own custom slider.
That's great.
That's awesome.
So we're going to call this lesson done.
But before we do let's pull up our terminal and do it get ad period get commit Dasch am and we we set
up our custom slider's switch.
Good work guys.
Awesome.
All right.
So we are done with that.
And in the next lesson we'll finish getting all these labels and Iby outlets hooked up and start working
on the awesome awesome stuff behind just tracking the runner's location.
How we find the pace and distance that's really cool.
So I'll see you guys in the next lesson.