So well come back again.
This is actually an exercise on what you're supposed to be doing is you have to make a school of you
with a page control.
So essentially you have to find a way to control the page controller's place with the scroll of use
Koren's place of the scroll as well as the opposite of it controlling the scroll do you.
When they use the taps on the page control.
Now I would encourage you to do this on your own and if you felt like you needed some help you can look
at my solution as well.
Pushover Let's start in just a few seconds.
If you're still wondering how that relationship should be between the page controller and a scroll if
you just look at the main view of your iPhone or your simulator when you scroll one whole page it goes
for the next one.
I mean you type on the page controller it just crawls the whole view.
One more page to this site that you have typed on.
So this relationship is what you have to be doing in this exercise.
So I'm going to start in a few seconds if you want to compose the video now and then hopefully we'll
get there.
And if you want to look at my solution as well.
OK.
Let's get started.
I'm going to go to school and in yeah I'm going to start a new application called the scroll of view
page control of and you might ask for a view with page control.
I'm going ahead to the storyboard and I will have to make a scroll for you as well as a page controller.
So you are a page control.
I'm going to place it maybe around here make it much wider.
I'm going to give it a thank you.
Color of black.
So it's quite visible.
Then I'm going to are this cruel of you.
I will place it right under the page controller but place it here.
You can cover the entire screen.
I'm not doing that just to show you that you don't have to.
So the page can do it I'm going to have to add some constraints for it.
It has a constant from the top a leading constraint and a trailing constraint that they have to reset
it to be zero.
So it's trailing will be also a constant value of zero.
So it covers the entire width of the screen.
And if you can actually add it as well so it has equal weights.
The view was a super view.
Now my school view I'm going to make it a background that is a light very great.
It has a kind of strange to the page control the vertical spacing and that the value is actually going
to make sure it is zero.
It is.
So it has no constant value then it has a leading space a trailing space.
It has an equal right to the actual view and the one that I have an aspect ratio on it that says As
find that aspect ratio it says the height of the scroll view.
So I'm going to have to reverse it.
The height of a school equals the Vittal feet in a one to one.
So again you don't have to necessarily follow these instructions.
These are just the settings I'm using.
I'm going to have a square shaped scroll view and I want to be right underneath the page control there
are a lot of thumbs.
Actually most often the page one too is actually at the bottom of this global view but all of these
things you can just decide on your own.
So the next thing is we need to have a view that is a container of view that is the view that we to
put everything else in sight.
So let's go ahead and say I have a of view and I went at that view and place it right there.
On here.
Exactly.
And if you recall the last time we had to do a constraint that would automatically set the vet of this
you to be one fifth of the scroll view or essentially making the scroll of you accommodate for five
of these.
This time I'm going to do things a little differently.
So it's going here and I'm going to say I have a leading space constraint so that's something that they
have to have.
I'm going to have a top space constraint.
That's something that they have to have and when I have them one.
So that's again something we should have if you read the appels documentation.
They specifically suggest that for a school of use you add your constraints from left to right and from
top to bottom.
So that's what they have done so far.
I have a top concern I have to buy them first thing.
I have a leading constraint.
I'm going to go ahead and say Give me a trailing constraint and the trailing constantly would be just
like the last time Super of view equals the view trailing the stand the constant of it is zero.
Just like the last time it was.
Then the next thing I'm going to do is this I'm going to go ahead and say my view compared to the scroll
view.
It always has an equal height to the height.
Not exactly the same at all times.
And then I'm going to go ahead and say and this is the part that is different than what you have done
last time.
Just to remind you the last time we actually added the constraint that set our view against the school
view has a constraint that makes it five times larger.
Now this time I'm going to say my view as a vet can sustain itself.
So it's a it is always said Art at the moment 375 and you will see why am I doing this because I want
to use this feet inside my programming interface and change it on the fly.
It's your hobby can do all of these things.
I'm going to go to my split screen to my assistant editor and here I'm going to have to add a few outlets
one outlet which is very simple to understand.
Is this one the scroll wheel.
So that's going to be my Sproull view.
And then I even have my page controller which is again very easy.
My page controller I will have my content to you which is this guide the view that is embedded inside
the school view.
So that's going to be called my content's view and I have one more item that they have to add in here
and that is this constraint the constraint that they made for the vet of my view this one.
So this one I'm going to I'm going to call it that constrains.
So David constraint is essentially going to be blowing me to change the weight of the content based
on the number of the pages to do a quick recap of what we have done in the past and what we should remember
is we need to have a certain number of pages on this page control that if it has five the content size
should be five times the size of the Scroll of view if it is to the content size should be twice as
wide as the scroll view.
So because we don't know what that number is.
And most likely that number will come to us from somebody else such has a network or a backend or so
on and so forth.
We should have a programmatic way of changing that number because of that.
So they have a constraint that they can change it whenever I want to change it.
For now it is sort of 375.
If you want you can actually change you to a random number such as a thousand.
So it becomes a little bit longer than the size of the scroll view and we can test everything now just
to make sure that everything is actually functioning.
Yes go ahead and run the application and if it all works we should be able to see some sort of a scrolling
happening even though there are no content.
So here are my simulator I can go in here now and say this is scroll and I can see the scroll.
And I know that the colors are exactly the same simply because the view what they have in here is white
and the actual view is white as well.
But then I reached the end you can see the light gray background color of view or at the beginning.
So before I leave this story about the last thing I want to do in here is I want to go to my school
of you and say for this school if your paging is a neighborhood because you want to be able to scroll
one page at a time like that one.
And now let's go to our programming site in here.
I'm going to go ahead and say I learned a lot.
They do need is this I need to decide how many pages I have something to say that number of pages to
be let's say 7 for not this is the number that you will get it from somewhere else but for our experiment
I'm just going to make it a static value then I'm going to say once you've laid out depending on the
type of the device you're using I need to know what's the score of you and I need that David because
I need to make my content seven times larger so that what I'm going to call it to be a valuable call
to the vet and that is going to be a CEG float.
But we don't know what that value is just yet where we can get these two values or primarily the value
is within the view will appear that is when the view has been laid out and we can know the size of the
scroll wheel.
So I'm going to go in here and say you will appear and the superb view will appear through in here.
I'm going to say it is actually going to be my you dot bounds dot it.
So we find the of the school view after the view has properly laid out now that they have that value.
I don't know how much should be the overall weight of my content.
That's not the way it's going to be constrained.
I have to get it in your constant and that Konstanz is going to be my favorite multiplied by how many
pages I have a number of pages.
So we get it we want like by the number of pages it is giving me a little error saying that you cannot
multiply something of the type CEG floored by something that is an integer.
And fixing this is very easy because integers can easily become C.G. flawed so I'm going to say give
me the CGU float value of the number of pages and then multiply them together and that becomes the value
of the constant.
So once that is sent or it's constant it's going to become larger numbers seven times bigger than my
school view.
And he's going to push my content views Vitt to become seven times larger.
Now let's go right up to here to make sure everything is working the way we wanted it.
Now in my simulator I can see that I have as much as three.
This is four.
That's actually true but that's how we count it.
This is five.
This is six.
And this is the seventh page.
Great.
Is also working the way we wanted it.
And I think 17 is actually a lot so maybe this down to say four.
So it would be a little bit easier to do all the testing and to view things the way I wanted to view
them.
And then again I'm going to see that I have that one too.
And this is tricky.
Perfect So everything is working the way we want it.
Now it becomes about connecting the page control that the scroll view.
So the first thing we could do which is actually very easy I could say in my view it appears going say
my page control of dot current page set it at 0 and see my page control the number of pages becomes
my valuable number of pages.
Maybe I should have a slightly better now naming because the two of them they seem very similar.
Now with one of them is obviously and actually view of the page one Trauner the other one is my variable
and if I run the application now we should be able to see a page story that has the same number of pages
as does the scroll view.
So now that has four.
And here there are four pages.
Now we want to be able to connect these two together.
And before I do that now some content to my content view.
So when we're scrolling we can actually see some colors or something of the sort.
Now that I'm going to have to use a combination of force view of will appear and view that lot.
So that's sort of I have two views let's call them they're read the view which is a you and I have another
one which is the green view and the green review is going to become a view again.
So I'm going to go in here.
In my view the Lord which I'm going to have to take in my hand and say so as the view that lot I'm going
to have to initialize both red and green.
I'm going to say red because I'm going to say initialize it with a frame and that frame is going to
become cjra like that zero.
So for now they don't have really a space that they take they're just there.
And of course I'm going to have to say my content to you dad I saw you read to you and since this is
called read you maybe we should make the read view that background color become white color got to red.
So this is one of them.
Then I'm going to have the next one.
The next one is the green of you so I will say Green of you again in view adds a frame.
There is no body for it.
And then green becomes green and then my content you the your tweets.
Now the reason I put these two in the view that lot which no actual cjra is simply because they have
to be initialized in here.
But their frame can only be said in here in the view of will appear.
Now you might be wondering so why can't we do all of these things in the view of in appier.
Well if we do all of these things in the view will appear every time the view is about to appear.
All of these things will be done again so you will have multiple copies of your red and green view.
But using a view that this happens only once we get all of these initialized.
But then based on the time that the view is about to appear we sit there size which is a very common
practice and a very good practice.
So in the overlap you may have to set the frame for red if you want to say read you door frame.
Make it a C direct and seizure ex-nun number actually use a different format which is based on origin
and the size so the size of it is actually very easy to see just size of weight and height and those
height are both exactly the same thing.
They are fit because you want them to be exactly the same size of the scroll wheel.
So I copied that and save it and it's the origin of it.
However the C-g point do they have to make out of an x and y values.
One of them is going to be simple.
That's why it has to be zero because we want them to stick to the top corner of the scroll or the content
view which is inside the SQL view.
However the X effect that is for the viridis view is going to be placed between the content of view
and a horizontal level.
I want it to be in the second page so that second page is essentially the index one.
So I will saved it multiplied by 1 so this would essentially push this view as much as one page to the
right.
Let's see that happening before I actually make the green frame as well in the view up here.
So right now in my simulator we should be able to see light after one whole page.
The red one has a start and then everything else is still white.
So let's go ahead and said the same thing for the green one for the green one.
I want to play it not immediately after the read but rather the last page.
So if that is what they want to do I'm going to go ahead and say green view that frame every time without
having to be its size.
It's always going to still be zero.
But the origin x value of it is going to be multiplied by three.
And that's simply because right now at the very beginning of this school view the top left corner is
zero.
If I score as much as 1 this is now 1 the whole of it.
This is not to hold rates have gone to the left side of the screen and this is now true of all of it's
have gone to left of the screen.
Let's see if that actually plays the same way I'm expecting in the simulator of so once the simulator
is up and be a scroll you see the red one and we see the white one and we see the green one.
Now we have to find a way to connect these two together.
Let's go ahead in here.
In my of programming side and I'm going to have to add a new function and that's actually a function
from that delegation.
So I have to go up here and say if you can show that it also conforms to you on a scroll you delegate
and the method that I want to get access to is a scroll if you did the escrowed.
So every time that the scroll I want to know about the scrolling and I want to know where I am in the
scroll.
Now the very you all in the scroll is actually has a certain value for it right now.
This girl is at the very beginning is zero.
That is what we call it the content of set.
Imagine this large view that is under the scroll of view being white red white and green.
That's a very wide view that is there.
And if you would imagine it is spilling outside the simulator you could view something like this.
It would be a view that is like this is much larger but you're seeing only a portion of it.
Now that view we are currently at a certain offset in a certain place right now the offset is zero.
Right now the offset is one hole.
And that's exactly the number that we need someone to go in here and say let's I'm going to call this
one x origin let's call it my scroll of view or the scroll of view because they are both referring to
the same value scroll view that the content of set dot X so find the content of set for me then I'm
going to go ahead and say let.
Next page.
Just the page that you want to show on the page control.
That's going to be the value of dividing this by the value of the V.
So for instance if the X origin is twice as much as the weight that number becomes two if the value
of this division is thrice as big that value becomes three.
So on and so forth.
Now there is a little problem.
These two are both C.G. floats and obviously this value is becoming a C.G. float.
Well I knew that to be an integer and if I tried to force it is going to give me an error saying Well
both of these guys are C.G. frauds.
So I'm going to say actually give me the integer value of these two.
Now I want explain something else for you guys which I know is going to come up obviously.
I've done this before and I know it happening.
And even if you don't you can just try it once and you will see the problem.
The problem is this If the division of X or Asian by it is for instance two point eight It still is
going to become true because an integer value while at 2.8 we are half way past and we would like to
be able to go to the next page.
So essentially any number within the decimal values which is above 0.5 should become the next one and
a number in order pointwise 5 should become the previous one to fix that.
I'm going to say let's get the round of these numbers.
So let's round it to be whatever number you find between these two.
So basically when you're around it anything that is like 2.5 1 it becomes three things.
But it's like two point four nine it becomes two.
So this splits point the breaking point becomes at point five which is exactly what we need.
And finally I'm going to say my page controller that current page becomes the next stage.
Now before I run the code there is a tiny teeny bit of code that I have totally forgot and I'm hoping
that you guys remember it.
And that is even though we are using a delegate method we are using a score you delegate.
I never delegate at my school.
So let's go ahead and do that.
Our That lot so down in here in my view that lot I'm going to go ahead and say my school view that delegate
becomes self you could either do this in the code or do it in the Interface Builder.
Most of them would essentially mean the same thing I would do exactly the same thing.
But I'm glad to hear in the court now once my simulator boots up I should be able to scroll and then
half the zoom up to the left that was a very bad idea.
Halfway through each to the other side.
Exactly.
Let's go ahead and show it again.
Purrfect that next one and then next one.
Right at the half a breaking point it decides which way it has to go to.
Now that's all good and well and working the way we want it to work.
But there's still one piece missing and that is what if I type on the page controller shouldn't we go
and I made this scroll of you what will happen.
So to do that we need to have a function connected to our page controllers.
We can't do that either by code or using the storyboard.
I usually do it in the story but I actually want to do it in the coding interface because I want to
see that happening in here as well.
So I want to go ahead and say my page controller in the view that lot is going to have a target and
that target is within your self and the action for it is at select all.
And we have to find an action for it and the control event for it is value changed.
So we have to get that then I'm going to add a new function then your function is called the function
page function.
And there's an argument for it that I'm going to call it send there.
And that said there is a page control and I don't have any return for it is void.
So we're going to call paged and since for using this page as a selector.
I have to export it as an objective c so objective c page.
And then this selector is going to be calling that.
And then the body of the function.
Here's what they want to do.
I want to know which page we are on the controller here or view at zero like one break right now two
or three.
And then depending on that I want to scroll the school view to slumber.
So for that I'm going to go ahead and say let's let's call it index.
It's going to become center there which is the page where they're sending us that Clarence Page.
So we know which page we are out on let's call it next page.
Actually a better name for it.
So next page is send that current page.
Then we have to produce a new frame where we want a score of you to go to.
So I'm going to go ahead and say let me frame the new frame I'm going to be it's called a CGI record
on my CGI recked is made just like the last time.
But the point on a size the size of it is that easier once I'm going to write it first.
The size is going to be the same size.
It has been for a while and that is the way to unhide both of them are equivalent to our vet because
we are not changing the size of the frame of our skull.
What we are changing is where does it points to a single point and the point is going to become the
x and y values of it are important.
The wife is obviously 0 the X of it becomes which page you are trying to show.
And we have to multiply that by that.
Let me explain this.
There's going to be an error.
Don't worry about that.
Will fix that in a second but let me explain this.
So what's happening is I'm saying if the next page that you have to show is 0 0 multiplied by whatever
fish going be sure the very top left corner of the scroll or if the next page is 1 vs scroll as much
as one.
If the next page is three if you scroll as much as trivets And that's exactly what we need it to do.
So the only thing that is missing in here is that it's seeing the next page is actually a an integer
value what you need the float value someone is saying give me a C.G. float value of the next page and
multiply by derivate.
So now we have the new frame that we know that the school you should go there.
Tovey should also go there.
So I'm going to say my scroll view dot is cruel next to a visible scroll it is this new frame.
And is it animated.
Yes.
So you're scrolling the scroll view not manually by the user animating or or tapping right there by
a problematic review or scrolling you to a certain place.
Let's see if that's going to work the way I'm suggesting with more.
So now that they have the simulator on I can do this just like before I can type in there and it will
automatically scroll the scroll wheel.
So every time I type it will go and find the current page in here.
And based on that it will push the view to that particular offering.
And that's all we have to do.
Now you might notice a little error in here and that is when I type it tries to go to the next stage
then switches back and then goes and that's simply because when I tap on the page or by default it wants
to jump to the next one.
And it does that for a split site and pay attention to this really quickly it goes there.
But then it comes back and that's simply because as it goes to the next page it says that the way a
scroll of you did scroll is actually trying to force it to be in a different place because when we tap
in here and the animation of the school view begins this thing is also happening.
A school of view is a scrolling and based on somebody saying oh no you shouldn't be there just yet.
You haven't reached halfway.
So they're both essentially working against each other to fix that.
I have a suggestion and my suggestion is that we find a way to know that if we are currently using the
paging we are animating manually this thing shouldn't happen.
So once again if you're animating using this school view animation we shouldn't be accounting for this
thing.
So let's go ahead and write that in code.
I'm going to go up in here on the new value about the value of man animating which is by default false
because we are not animating by default by default scrolling manually.
So I'm going to go in here and say this entire thing should only happen if we are not animating.
So if not animating which is the default mode all of these things should happen.
Which is exactly what we have been doing up until this point.
All of these are happening because we were not animating.
Let's run this now.
And now everything is working the way we wanted it.
We still have the same problem that the dots on the page controller they turn on momentarily and then
they turn off from time to time.
So we have to address that.
So I'm going to come in and say everything that views the page everything that we do that go ahead and
make the animating become truth.
So we are constantly animating using this guy.
So let's see how that works.
So now when I start they go perfectly from one to another to another to another.
And none of those things that we were experiencing before happened.
But you can imagine that now we have a different problem and that different problem is the animating
is set to true.
And if I do this it won't have any impact on the page control anymore simply because anything is not
always true.
So we have to find a way to make the animating actually false from time to time.
And then we have to set the animating to false.
Again that is Vendy is clearly always Isabel has finished and there is an actual delegate method for
that.
And that's the one I showed you a few lessons ago and I told you I even tried to embedded in one of
the future lessons Previously I used to solve this problem in a different way.
But now I thought that I could show you that method as well.
So it's got to a school of your delegates.
If it does show me some it plays a trick on me.
So jump to the definition and there is something called escrowed view of end and scrolling animation.
So that's the one that they need.
It's going you say right after this one
and animating.
So a school of you did an animation so I know animate thing.
So everything does and animation.
I want to say animating because once again because it's not animating anymore.
So let's go ahead and run this again.
So now I have my simulator up I can scroll on I see them they happening and I can tap on those and they
perfectly work the way I expected them.
You don't have that little glitch happening anymore because the value of the animating gets to be true
every time that we are animating using the PH controller and every time that we scroll we see them jumping
from one point to the other one depending on the location of the offset which is exactly what we were
hoping to see.
So that's about it.
A very long exercise I must say.
We covered a lot of cons from doing the kind of strains from using a cross-train as an outlet to changing
the values of the different you know views and placing them in different spots in the SQL view to finally
getting this core view content of set value within the school view the school and then eventually adding
a page function to our page control.
So let's keep it up to here and move on to our next lesson.