So I'll come back again in this lesson.
We're going to build on what we learned in our previous lesson and make it custom view that we embed
Bettina's scroll view.
So this is going to be a customer that has a much longer height and for embedding it within a scroll
view we have to change the content size of the scroll view based on the height of that view.
So let's go ahead and see how we're going to do that.
I'm going to export this thought a new application and I'm going to call it cross view in a scroll of
view.
So just like the last time I'm going to come in here and say I haven't you view I'm going to say command
and that's the class I'm going to call it custom view.
Then I'm going to have the same name for a new you.
X I'd be fine.
So command and new user interface excite you fine.
I'm going to call it custom you know in my newly created custom view I'm going to go ahead in here go
to my properties and say its size is actually a freeform size so I can actually choose whether what
I want for it.
And I'm going to say it has a much longer height let's say 1000 is the view that we are designing and
it has to have a lot of different content.
A lot of times when you're doing things like this you're reading content from some sort of a network
and you can develop these interfaces using the code.
But there are also occasions where you actually have to design a long interface within your interface
builder simply because you want to have your items to do a certain thing.
So that's an assumption that I'm using for this particular project.
I'm thinking that my view will have a rate of 375 for now because that's a bit of iPhone 8 and also
it has a height of a thousand.
It doesn't really matter in here because we're going to change it real soon and make it a dynamic one.
But the proportion between these two does not.
Let me add a few items or make that a little bit clearer.
So I'm going to have a label some up here.
There's going to be a label on the label.
Let's have a different color for it so we can see it easier.
And then maybe there is some other objects in here maybe it is on the label in the middle.
And there is something at the very bottom.
And for whatever reason that you are designing your application this is the design it has to have maybe
somebody in the middle and you have a text you for that takes fuel has to show some sort of a description
for an item that you're viewing.
Once that description is over do you have another label and then maybe there is a button that you use
that you can use.
None of these items of them either.
You really have to add them is just for the sake of the ministration to show that this could actually
happen and could be a situation where you need to have a very long view essentially.
I have had this situation happening to me several times in fact.
So for all of these items the only thing that really is important is having the kind of strength so
making sure they stay the way they are.
So to fix that I'm going to say I have a top constraint for here.
I have a leading concern I have a trailing cross-train and I also have a height constraint so that item
is always going to be there.
The label then the takes view is going to have a vertical spacing leading a spacing trailing is spacing
and when to have a height constraint for it.
Same thing I want to do with this label say there's a vertical spacing leading facing trailing spacing
and I'm going to have a height constraint for it then I'll go for that but then say that is a vertical
spacing leading facing and trailing spacing on it has a height.
And then finally and when I come to this Bodom label say it has a Bodom a space leading a space trailing
a space and again a height.
Now I want to mention that in a situation like this you usually want to have an item in between these
two that the height of weight is flexible simply because otherwise you might run into a situation when
you are running this application on a smaller device.
And these items they actually go inside one another.
So to remedy that you put an item in between them that the height of it can be flexible for instance
a table view or a scroll of view something that still can have its own content and yet can have it in
a flexible way.
So for instance in my current situation if for whatever reason my view was increased its size to 1500.
Then again the label at the bottom with a state where it is these three four guys will stay up there
and the size in between would flexibly change its value.
And if I go to something like 800 I would get that if people do something like 600 they actually might
go inside the mind or that which is not really a good thing.
So for that we make sure that we maintain something in between them that is flexible and is going to
account for all sorts of devices.
So now they have these and I said that the thing that we need to keep in mind are these two values 375
and 1000.
Let's go to a custom view swift fight and see what you have to do in there.
So custom view is a subclass of you I view.
So I'm going to go in here and say I need to somehow initialized it under different methods of initialization.
We have to end it with frame.
And we also have to end it with a decoder which is the one that we used in the last lesson.
However I want to do any initialization.
But they don't want to initialize it with a frame where they always want to initialize with a certain
event.
Let me explain why that happens when I say in it with it.
And that's going to be a CGI float.
And since this is a custom initialization.
I'm not going to need to overwrite any more.
So it's going to be an in it that I'm customizing myself.
And of course we have to add the required anything which is there in it for decoder.
That is if you want to use this initialization using the storyboard which is not what we want to have
but we still need to have this method.
So I'm set up all of those and say here's in my end it's read improve it.
Let's see what we have to do.
The first thing that we must do is calling a super in what the problem is when I say super thought it
is going to say how do you want to initialize it.
You ain't sure does it with a frame which we don't have or a quote there which we can't use.
So I first have to come up with the frame that I want to use.
Now before we do that let me explain why that is important.
All of you have a proportion of 375 by 1000.
So I'm assuming that if you run this up on the same type of iPhone 8 the same proportions will be maintained
the viewer will have 375 units under it and 1000 units on the height.
If we go into a different device that the video changes then we have to change the height accordingly.
Simply because there is a stuck to the width of the screen but the height is the height of the Scroll
of view.
So we have to maintain disproportioned and based on the proportion come up with a new value for the
height.
Let's see how I'm going to do that.
I'm going here before I do that initialization I'm going to say let.
I'm going to call it the height to it.
That's a ratio of height to a.
I'm going to say that's that the type C.G. float.
And that's going to be 1000 to 375 then I'm going to say I have a new value called the new height and
the new height is also a C.G. float.
And that's going to be disproportioned multiplied by the value received for it.
So essentially if we get the rate of 375 this will be 1000 more devices waiting on the 4:53 multiplied
by 275 and we come back at 1000 which is the size that we wanted.
But if we go to a larger device that has for instance a fleet of 400 then the height would automatically
increase as well.
So now of they have the new height.
Let's go ahead and make the new frame and let new frame be a CGI Rechts.
All of these values x y weight and height the x and y of B obviously have to be zero and zero simply
because I want to stick them to the top left corner of the view but then the width and height of feet
have to be input to.
And your height that be calculated based on the input weight and considering the proportions that we
want.
So this height is the proportional height representing this event.
Now I have a new frame and I can say super that it's with frame new frame and that's going to eliminate
that error as asking us Why are you not initializing your super.
So they have that I have initialized this.
Are you considering the new frame which is based on the video that the user is going to put to us.
Let's go ahead and load the nicknames.
I'm going to say one them.
The main Dark Lord that nickname and I'm going to say like last time.
No options on her itself and the name for it is actually the name of this Iby which is the same name
of my class so custom.
So now we know that the nickname crossed won't be going to be placed in here.
Then we have to add our content view which we don't have just yet.
So I'm going to go up here and say I want to have.
Let me go this time in the assistant window so we can see it that way as well.
So when I go to custom you say my files owner is going to become custom view and then I'm going to say
give me the assistant window and the assistant window this view the main view becomes the content view
so that is going to become the content view.
Now if you wanted you would actually add some of these labels as well.
I'm going to say this one is the top player in top label on them I'm either going to add a function
for the button as well.
So I'm going to say the function for the button is going to be Bawden tapped.
For now it's not really going to do anything you just kind of print something with it but it's going
to give us some confidence that everything is working.
So let's go back to our custom wheel and our custom go after we loaded the nickname.
Now that we have the content I'm going to say as so few of you we want to add to it is the content to
you.
So this is going to the contents from the X I'll be fine x I'll be fine.
So now I have that one and I'm going to go ahead and say content to dot frame becomes a self dot boundaries
so that all of it in here.
Now we have everything that we wanted in here except that I should print something and the button is
path's I'm going to say Crain's say boy then half that.
So now we have our custom view taking care of I'm going to go to my actual storyboard and say here is
going to be a scroll of view that is going to add this custom view to it.
So for that I'm going to say you on a scroll view.
I'm going to place it here say there are zero zero zero constraints stuck to top left right and bottom
and then I'm going to go ahead and say in here.
In my view controller I have an outlet for it that open is actually called my score.
Now just like the last time you put either your custom view in here in the interface or you put it in
the code area which was to do within the code area because the last thing we did in the interface.
So does someone want to do with a little differently.
And when I come in here and say in my view controller view that lot let's go ahead and initialize the
custom.
So to do that I'm going to go ahead and say I have a let's I'm going to call it a container just like
the last time and that's going to become the crust on you and the custom view has an initialization
method called it needs improvement.
So if you give me the new weight I will make the cost on me for you.
So I'm going to use that one.
And what's the bit that you want to give it.
You want to give it is the other escrowed view house because you want to fill the entire screen now
and then go ahead and say let's scroll it to become my scroll of view dot frame dot size dot to it.
Or you could get my score view that bound to start with whichever that you think is more appropriate
when it comes to weight and height bounds and frames.
They do exactly the same thing.
They do not do the same thing when it comes to origin but for the weight and height they are exactly
identical.
So I'm going to say a scroll weight is the weight that they want to feed into my costume we would to
build the container.
Once they build the container I'm going to say my view of the sub view unless I add the containers to
its Tovey and the container into it the next thing I have to do which is very important is making sure
that the content size for a squad view is the same content size as our container.
So I'm going to say Maskell view that content size becomes a container that bounds down to size.
So let's get the size of this guy and make the content size of the school viewed the same.
So a school you essentially can scroll now just one more thing in here and that's just so that we can
see how everything is working.
I'm going to say container darte that's a label which I call it top labeled dot text says we are team
view controller.
So you don't really need to do that but this is just so that we see how we get access to different outlets
from the custom view or the container view.
Now I'm going to go ahead and run this application before I knew that I make sure that they run it on
iPhone 8.
I have the new simulator for this lesson because I want to show you something.
I live right on iPhone 8 and say run the application I'm now going to be on the application escort who
is going to play itself out and then we got to go is it.
We're going to plug it into the custom view based on that the width and height of the customer we're
going to be calculated and they all should be shown within the scroll of view.
Let's see if that is the case and that is the case.
So I'm seeing on the top we have that label that says we are in view controller then we have that takes
them we have some random objects and then we have this label.
And every time we pressed the button in here it says Vardhan tapped.
So everything is working but then show you what happens if we go ahead and switch to another type of
device.
What do you feel.
And we run this on a simulator of iPhone 8 plus I'm going to run this application now again.
And the good thing is because they have a simulator I could actually see them next to each other.
I could see this one and yet and that one there.
And as you can see this one is a scrolling is not fitting the way we were expecting it to fit.
And here's the problem with that.
The problem is in the view of the law it is cruel of you hasn't been laid out yet.
The school doesn't know what is it's right to it.
If you're just getting the video that was designed for it.
In the storyboard but not the video that is going to be shown simply because we have to wait for the
viewer to lay out before we can actually get the actual events of this school.
Now you have two options in here.
One is the one that we did in the last lesson.
You do some parts of this which is not the initialization within the view will appear.
The other option is you leave you the lot and you say well before you do any of these things say my
school you lay out if needed.
So lay it out.
Make sure you know what is correct boundaries and then do all of these things.
That's run the application again and this time we should be able to see both of these.
Obviously the iPhone 8 wasn't working but we should see it on the iPhone 8 plus properly as it and that
is what I expected to see and that's what you're seeing in here.
So that was a very quick demonstration of how we can design everything in our interface builder using
a custom view for a view which is much longer.
And then we can embed it within a scroll view and set the content size of the school view to accommodate
for those content.
So this keep it up the hill and move on to our next lesson.