Welcome back again.
In this lesson I've been talking to you about this split view controller and a split view controller
is some sort of a controller that breaks your screen into two separate parts where each part is controlled
by a different view controller.
It is originally designed to be a controller for having a table views within larger screens.
That's the screen that you see when you open your e-mail application on a path that you have a table
viewpoint or on the left side and then the body of your e-mail on the right side of the screen.
You could do that even an iPhone when you rotate your iPhone and you keep it in the landscape more than
you got your e-mail application.
You would have a lot of table view settings on the left side of the application and the right side shows
you the actual threat of different emails.
So first I'm going to give you a quick demonstration of how it could work for an application such as
e-mail and then I'm going to show you are the details of it how it is actually put together.
So I'm going to go to X code and it will then start a new application.
And this part you don't need to do because it's just a demonstration.
I'm not going to explain how it works because we have a whole section dedicated to table view controllers
and collection view controllers but for now in the new application I'm going to choose master detail
as opposed to what we usually do.
I'm going to say this application is actually called temp.
That's a naming convention I have for whenever I know and when I delete something really really soon.
And if you're on this application will end up having a table view controller which is something that
would be the study in the future but you will also have a split view controller.
Let's see how the two of them they work.
So if I rotate this simulator.
Now that is by pressing command on arrow buttons or going to hardware rotate left or rotate right.
If I do that we would see that we have this a screen that I press on the master.
Another viewpoint or appears and I can press on that little button maybe I can make this a little bit
larger as well.
And I will have these table view cells in here.
Each of these is called a cell.
I mean I type on them that content appears on a different view controller which is the essence of having
a split view controller a screen is a split between this view controller the one that we call mass there
and the other one which is called detail.
Now if you're using a smaller device such as a phone the master essentially slides over the detail.
And if you're working with a larger device such as an eye apart then the master viewpoint area will
be permanently there on the left side of the screen.
So that's the design of it.
Now let's go ahead and see how they do this thing and what you could use it for.
Like I said it's primarily used for this purpose for having a table view and it's kind of a built in
feature there but it kind of helps if we know how they built it.
So if we need it we could make adjustments sweet.
So I'm going to go back to school and I'm going to stop this application is thought a new one I'm going
to call this one to be a singer of your application I'm going to call it my split vote just a split
view controller app.
So that's my Smith your controller app.
And the moment it load I'm going to head into my storyboard and design this split view controller.
So the first thing I'm going to do is and delete this view controller.
I'm going to say I have a split view controller which is somewhere up here.
This one at the moment you did I guess with your control is going to bring a lot of his stuff with it.
I'm actually going to delete everything except for this one which is the master of this split.
You're going to read that shows the master of your controller.
So I'm going to delete the route view controller the navigation controller and this other view controller.
So we are left with this one which is of the type split view controller.
Now I want to build everything on my own.
I want to see how these two different things are actually connecting to each other.
So I know for a fact that the split controllers they require at least two view controllers and master
view controller and a detailed view controller.
So let's go ahead and add those two.
I'm going to say I have one view controller.
Let's make this one be perhaps a brown color.
So I'm going to say this is my master view controller and then I'll have another view controller.
I'm going to put it in here.
Let's say this one is maybe it's like this color maybe it is pink.
So that's going to be my details a view controller.
And now I'm going to go ahead and select this view controller hold controller and I go over here and
say the relationship is mass their view controller for the brown one.
And then when I repeat the same process for the pink except that this time I'm going to say the relationship
is detailed view controller.
So now each of them is one of their view controllers of this split view controller.
And since I don't have an entry point to this story of what I'm going to select this great view controller
say it is the initial view controller.
So by now we have this setup.
And surprisingly my pink view contrary is showing me a navigation bar and that is because the design
of a split view controller expects this view controller to be a navigation controller.
So it's best if the embed the pink one within a navigation controller.
So I'm going to select the pink one that is my details of your controller and say Ed embed in a navigation
controller.
And that's just like the bare basics of having a split view controller that has one master view controller.
One detail view controller.
Now I will run the application up until this point just so that we can see what we get so far
so now that my app is low that I can see that on the left side I'm seeing the brown view controller.
That was the master of one on the right side.
I see the pink one there is obviously only visible when my application is in the landscape mode.
If I rotate back I will only see the master view controller and that's a very good design because in
a poor state and with it kind of doesn't make sense to see a split in the screen.
There isn't enough space for doing this bit of a vertical split essentially.
So let's go ahead to code and see what else we could change in here.
Something that is quite important and you might have noticed is because each of these scans are taking
apart of the size of this quarter the screen it makes sense that we set alter layout and constrains
for anything that be making it.
So I'm going to keep that in mind.
So the first thing I want to do is I want to be able to have something in my master view controller
that controls something in my detail view controller.
So let's say you have a button here in the brown that controls the text somewhere on the on the pink
and if you manage that then we can manage anything similar as well.
So we're going here to the brown one.
Say I have a button.
So let's find that by then when I place it here.
Say it is like that.
It also has a pink bygone color so it kind of says what it does and says change it to something and
then I'm going to set the constraints for it.
A space leading the space trading the space on a height and height.
I'm also gonna go ahead into the pink view contour and add a label.
So in here I'm going to say I have a label I'm going to place it in here.
Say my label is something like that it has a different bygone color.
Maybe you're right.
So we can't see what's going on.
A bit of a larger text.
It has the same height always it has a trailing and a leading space because it tries to intrinsically
find the size of it or infer the size of it from the text.
It kind of shrinks it so you have to go to the auto layout and manually change this number to whatever
you want which is 16 in this case.
And I'm going to say it has a tougher space for a safe area.
So now we have the label as.
The next thing we need to do is we need to have two viewpoint or classes.
I already have one which is the view controller I'm going to delete that so I don't need that one but
I do need is two new ones.
One of them is going to be command and talk with each class is going to be a you eye view controller.
It's going to be pink your controller
and then I'm going to add another one corporate touch glass.
I'm going to call it brown view controller of the type you have your controller.
So now I have two view controllers.
Each of them for one of their view controller outlets in my storyboard.
And when I go for pink one say the class for it is actually pink view controller.
I'm going to select the brown one.
Say the class for it is obviously the brown view controller and then I'm going to go to a split screen
to add some items in here.
So in the split screen I'm going to say for the brown one I need to have an action for the change it.
So I'm going to come in here and say change it has a function or an action called let's say.
CHANGE THE TEXT function at that one then I'm going to go with the pink one and say the pink for your
controller.
And obviously the corresponding pink view controller class I'm going to have an outlet for it that says
my label for instance.
So far we haven't done anything that is completely new.
We haven't done all of these things in the past.
And then the next thing that is important is how are we going to make a change here on this label.
Then that button is clicked and what comes to mind is obviously using a delegate pattern.
Having a delegation that when this is tapped that one uses the delegation information to change itself.
There is either a little bit of a problem with that and that is so far whenever the use of delegation
pattern.
We had a Segway between the two view controllers.
We had a weight that in a prepare for Segway.
We could for instance say the peak of your controller that delegate is equivalent to self of the brown
one but we don't have that in here even though we could write the code for it.
We don't have a Segway directly between these two and even if we had that since we never execute the
Segway we will eventually never have it actually happening.
Today I want to say that let me actually show you the power of the court and how we are going to use
it and then see what problems we run into.
Let us set a new fight.
I want to say a new Swift file and this is going to be called my protocol.
So that's my protocol.
You could essentially call it anything that the insider feed the content of it are what matters.
So here I am going to say I have a protocol on this protocol I'm when I call it are changing text in
pink delegates and this one has only one function.
And that's what function is.
Change that text to.
And I'm going to have to receive an input text which is of course a type a string.
And since we're in a protocol we don't need any body of the function of course.
So this is the protocol I want to use.
So the way I want to use it is I want to have this as a variable for my pink view controller and then
I want to be able to use it somebody in my brown view controller.
So let's go ahead and do just that and let it go to my pink view controller and say up here I have a
variable and what I call it delegate as usual which is of the type change text in pink delegate.
So this is a delegate for my pink view controller which whoever calls it they can change the text.
Now I'm going to clean everything else so they know I don't need I'm going to get rid of all of these.
I actually don't need to viewed it Lord.
So the only thing I need are these two outlets essentially one is the delegate and one is the labor.
Now let's go to a brown view controller and if you recall we always had a situation like this when the
change text was happening when this action is happening somehow or pink view controller dot delegate
should have called its method which I don't remember what it was called.
The problem is we currently can't do that simply because there is no relationship between the brown
one and a pink one.
There is no way between them.
So in in practice there is no way for us to get access to this guy.
We can have a pink view controller which is this ring view controller.
The destination of a storyboard.
So I could in theory do this.
I could go ahead and say let my ping V.C. become a pink view controller and then maybe in my view did
Lord I could go on initialize it but that will have nothing to do with the pink view controller that
is being displayed on the other side of the split view controller.
So that is the problem that they're facing right now.
And to solve that I'm going to say let's do this entire thing with the delegation within another view
controller that controls both of these and has a relationship with both of them.
And that is a you eye a split view controller.
So I go back to my brown and clean of.
I don't need that.
I'm going to start a new file a corporate touch class and this is going to be of the type you eye a
split view controller.
I'm going to call this one my split view controller.
Now this newly created a split view controller it doesn't really do anything for us.
The only thing it does it introduces.
Which one is the brown view controller.
Which one is the pink view controller.
So I'm going to go to a storyboard and say this find this outlet.
It actually has a class which is why a split view controller.
So it now knows all of the connections that are happening here in the interface builder.
Then I'm going to head back to a split view controller and the first thing I'm going to do is I'm going
to get two valuables.
One of them is going to be called brown and white brown is it brown view controller and then I have
a valuable hinge and that is a pink view controller like that so far in my split view controller these
two are just mere variables.
They have no relationship with the destinations of the two seg ways in my story storyboard.
So that's something I have to still define it and I do that in my view did lowered by saying I have
brown to be self not view controllers.
That's an array of view controllers.
The 0 1.
That is the master one as Brown's view controller.
So I'm saying get the brown to be of the type Brown view controller from the first view controller of
a split view controller which is true because the very first one is the brown one.
Now forgetting the second one with a pink one we have two things a little bit differently because the
second one actually is not the pink view controller.
Rather it is a navigation controller.
So let's see how we take care of that.
I'm gonna go in here and say pink is going to be self DOD view controllers.
The first one which is the second one.
Essentially I'm going to give it as a you eye navigation controller.
I know that's the case again from this UI navigation controller I'm going to say
here get top view controller.
I'm going to get that top view controller as a ping view controller.
So once again from the self you controller.
The first one is a navigation controller.
That navigation controller.
It's top view controller is a pink view controller and that becomes my pink one.
Once I have the pink I could do this and this is what we have been waiting for.
Pink Dot delegate to here.
And since I'm trying to delegate to year I have to conform to the protocol.
I'm going to say the protocol is changing text in pink delegate and once a conform to it I have to include
the methods of it or it stops from it.
And here is that method saying change takes two.
That's all I have to have in my split view control of everything else I can delete because we don't
agree.
Not like that I can properly delete like that.
So now they change the text.
What should we do in change the text in here.
Remember this is a function from the delegate.
It already knows where it has to apply itself and that is the pink.
So I'm gonna say pink dot my labor dot text becomes whatever value you receive.
Now this is the beauty and this trend of using delegation partners in our U.S. because they split your
controller has nothing to do with the pink or its Labor or even brown or the delegation is just a controller
for all of these guys and the relationship between them.
Once it is said it essentially allows you to do any kind of communication between all of these different
view controllers.
Which is really really powerful in many many situations.
So now we have our brown our pink view controller automatically finding the value for its label from
the delegation.
The problem is nobody so far has called that delegation and that's the next thing we have to do.
We have to go to a brown one and say here's a vendor function is called.
We have to somehow call the delegate from the pink.
So let me read everything else because we don't need any of those guys in here.
We have to call the delegate from pink but pink isn't even yet.
Pink is somewhere else in a different view controller called mine a split view controller.
So you have to get it like this.
I'm going to say s this view controller dot parents.
I'm gonna get its parent independent of it I'm going to get it as my split view controller.
So so far we found the parent of the brown one the parent of the brown one which happens to be this
guy.
Has someone called the pink.
So I'm going to go in here and say the parent that pink.
The Pink has something called delicate dot delegate.
The delegate has some function called Change takes two and now we can enter a string or you can have
a text field or anything that you want.
I'm just gonna manually change it to saying this is sent from.
Now let's go ahead and run the app and know see all of these things in action and do a quick recap and
I'm actually going to change something in here just so we can see how it works.
So right now when I type on the change it this label should show the message we are trying to send which
is this is from Brown.
It says this is sent from Brown.
Now I'm still seeing that navigation bar over there.
There's something I don't want to have because I don't really have a navigation happening in here.
So you could actually get rid of that in your pink view controller.
You could go in here and say view it Lord or actually if you will up here would be a better one.
You will appear super.
That view will appear through and then either I'm going to say self not navigation controller not navigation
bar that is then.
And that is true.
So the moment the view Lord I want it at the moment view will be low the loading will appear.
I'm going to get rid of the navigation bar to make sure that we don't have that you know a space being
wasted for no reason.
So it's rotated again and like that we have to change it and that's working like that.
Now they say they want to change something and that's not really necessary but they want to show you
how it works and when go twice with your controller.
And I'm going to say we always do the delegation to self.
Is that a way to do a delegation to something other than self.
And that's absolutely possible.
So in this case I'm going to say pink delegates it's tasks to Brown.
Now here's what happens.
You know if you want to do this I would suggest that you actually pay attention to it and then show
it to do it on your own is saying that the delegation of pink should go to Brown.
And obviously it's saying Well Brown is not conforming to that you know method.
So I'm going to say Brown has to conform to changing text in pink delegate rich.
Now that is happening.
So in a speech you control this area is going to go away now since I'm delegating to Brown now and the
Brown is going to take care of the delegation method then this find my split view control it doesn't
need to do that.
So I'm going to get rid of that and since this is a function from there I'm going to get rid of that
as well.
So once again now we have the brown and pink.
I'll be fine.
BROWN I'm being obviously a pink delegates to Brown and Brown has to take care of the everything that
is in the delegation in the protocol.
And when I go to Brown and the Brown says well you're trying to conform to this but you are not taking
care of all the methods.
Are you sure you want to do that.
I'm going to say no I won't actually have this method and I'm going to say in this method I want to
change the text routine.
Somebody else got somebody else.
Once again is not here is not in the Brown is not even in there.
Brown's parents it is in the Brown's parents are their child which is this guy song the copy that say
self parent has a split view controller that pinch.
That's my labor.
That text becomes whatever value we find.
So if run the application it should work exactly identically to what it used to work.
Just a minute ago and let's see that we change and that works.
Now I know I when I deviated away from this split view controller but they found it a good practice
for us just to get a sense of none of these things are set on a stone.
You don't always have to have your delegation to point to the self and you don't always have to have
their methods in there to view controllers that they have a Segway between them.
You can do it.
The goal of this course and essentially the goal of doing better programming is getting to know so many
different methods so you can mix and match them and find the best solution that you can think of going
back to the original discussion of this less than a split view contours are very useful for situations
where you want to control one you controller with another one primarily use when you have so many many
items in like a table view in an e-mail application that each of them has a lot of details on the right
side of the screen.
So we will see that far more in advance and more details when we talk about table view controllers in
the next section.
But for now you get a sense of how is with new controllers work and how you can essentially benefit
from them.
And.
Yeah let's keep it up to here.
I see you in the next lesson.