So good morning and welcome back.
I assume it is morning for you as well because it's morning for me so I got it all where you are.
Welcome back.
And in this listen I'm going to show you how to use IAB outlets connections.
I built those connections on a way for us to cluster a series of outlets with each other when they have
commonalities between them a good example of it would be something like a rating that you have a Stars
and three star rating situation.
You have all of these stars maybe five of them.
Or for example I'm going to show you something like a radio by then that you have multiple buttons they
have a similar nature and then you want to have all of them between the same outlets.
So let's go ahead and to explore and see how we're going to do that.
I'm going to go ahead and open export and then say I have a new application called My b outlet collection
app and yet I'm gonna head to my storyboard and in this storyboard I'm actually going to go ahead and
make a few buttons.
I'm gonna go ahead and say this is a button now for my buttons.
I want them to have a look of a radio by then unluckily in swift and essentially a Mac OS we could do
this.
I'm going go in here and say control command then a space and then I can get these emojis.
And there's actually two of them that they found that are actually like the buttons white circle and
radio button.
They look very similar to what I want.
So I'm going to place a white circle in it.
So that's one.
And then what I'm gonna do is I'm going to make five copies of these.
So these are the radio buttons.
So this is that her step forward.
And this is the fifth.
And if you recall the best approach for doing something like this would be a horizontal stack view.
So I will go in here and say thank you.
And I want to get a horizontal one.
You could of course select all of these and using this little button here you could actually embed them
within a stack view.
But what I'm going to do is I'm going to make it manually so I can see what I'm doing.
So for each of these I'm going to assume they have a height that is all based 64 so that's that.
So let's go ahead and say that's the height and I want it to be a stuck to the left than the right side.
So I'm going to say leading a space that is going to be zero.
A trailing space that also is going to be zero and a top a space to the container or to a safe area
which is let's say a hundred forty four that's OK.
So that's where I have my stack.
You now I'm going to select all of these guys drive them into my snack view and just like view as default
behavior is not what they want.
A new one is this.
I want them to be distributed evenly.
So I'm going to say feel equally and that's kind of what I want to have.
Let me see if there's a better one.
Is there a feel proportionally an equal spacing.
No the equal spacing actually pushes them to the right and left which is not what they want.
I think that the one was okay feel proportionally.
So I have the five buttons in here.
Now the next thing is this.
If I select one of these guys and I go to my assistant window gets rid of all of those gets rid of the
view that load the default behavior that we have been using is doing a controlled drag and in here seeing
an outlet which is what we have been doing forever.
But now when I say make an outlet collection and I'm going to call this one my buttons.
Now let's see what it makes.
Essentially this is what matters in here.
It says well I outlet my event my buttons is an array of UI dance.
So it's essentially an array of the type of the object you're trying to make.
In this case being you I by that's the next thing I'm going to have to do is I have to go to my interface
builder and connect this my buttons outlet to all of my buttons.
So when I go to the storyboard and in here I'm going to select my view controller in here and then go
to the connections in the connections that you already have my buttons that connects to one of the buttons.
So I'm going to have to connect that to all of them select that and drag it in here select and then
I go over here select and then I go over here and select and then I go over here.
Now my body's outlet collection is actually connecting to five different buttons in here.
Now what happens when we tap on one of these what happens when we want to trigger an action.
So for that we need an action coming here I'll say one of my buttons.
Let's say this top one where did I get over here and say I have an action and for the action I'm going
to call it tap.
Action so I have one of the actions now I know I'm going to head back to my storyboard and say let's
connect this one action to everyone.
So the action that says top action this one is connected to this guy.
Touch up in the side that's connected to the next guy touch up inside the fourth guy.
Touch up inside and the fifth guy touch up inside.
Now pay attention that this isn't a new thing.
We could have done this even in the past.
We could connect the same function to multiple bodies we probably even did that in the past.
But this part of it is a new thing.
Having one outlet that has multiple items in it.
Now let's go ahead into our top section and do something with in year the first thing I'm gonna do is
just to simplify my life is this.
I'm gonna say send there is always a new eye by then because I know it is a UI but then the only items
that are actually calling this action are the UI buttons.
The next thing is I want to make the send there to show me the set title that by then that is actually
pressed.
So for that I'm gonna say Give me that thing again.
The emojis within the emojis I'm going to choose the selected one.
So that's the radio by then.
That is already selected and this state is a normal state so normal.
Now the problem is this Every time we tap on one of these buttons that one is going to become selected.
But prior to that we have to make everyone on select that simply because we can't have more than one
currently being selected.
So I'm going to go ahead and say 4 and I'm going to call it any.
By then in my by Dennis simply because that's an array so I'm going to say for anybody my by Dems say
any by then set title the exact same thing as we did before.
Except that this time we're going to select the on selected emoji or this icon which is the circle.
So I'm going to say make everyone be on the selected for the same estate of normal.
And then once you're done with that make this particular guide the sender gonna make it selected.
Now let's see all of this in practice.
If it all works well we should be able to see all four buttons to become on selected on one of them
to get selected.
I think I was doing the designs on iPhone 8 and I'm running the simulation iPhone 10.
It doesn't really make a difference in this case.
Now I have that I can select and I can make one of them to become the way I wanted it to be.
So that's working all well maybe I can change the background color in here so we can see a little bit
of a different you know color in here and that's actually a good exercise because it's not as easy as
you might think with a stack of views.
A like you don't have a mechanism for us to change their background color even if you do change the
background color.
It doesn't really reflect anybody it doesn't show it to you anywhere.
So what you have to do is you have to embed your snack view within a few iView.
So here's one when I do I'm going to say a few eye view and this UI view and when I place it let's say
here.
I mean ideally you would put it where you wanted to put it but for now I'm just going to get somewhere.
I will say the height of it has a constant value of just like the last time 64.
I'm going to say it has a leading and a trailing and it has a top a space that is like this.
So not only got that and my you I view is in here I could go ahead and say change this background color
to light grey for instance something like that yet I'm gonna grab my snack view and make it a child
of my view.
Now a child of my view is going to break a lot of the concept constraints so they had for this snack
view.
The only thing that's maintained is 64.
So you have to redo this.
I'm going to go ahead and say the stage for has a leading a space has a trading space has the same Vette
and has the same height and I won't need this height anymore because its height is being controlled
with a different constraint.
So let's go to our snack for you and change those constraints.
I'm gonna say the trailing his face is zero.
I'm gonna say leading a space is zero an equal width and height are gonna make sure that my snack view
is always within my UI view.
If I change the color of my UI view to say a green color you will automatically see it there.
If I change it to a darker reddish color we see it there.
And if we run the application now my UI view is going to find its place within the view the main view
and then the sky tree is gonna find this place within the UI view and everything is exactly the way
we were hoping it will be we top on one button that button nearly always everywhere the earth and itself
becomes selective so that's it.
A quick introduction on how to use IP outlets collections they are useful for when you have objects
of the same nature and you want them all to be somehow correlated to each other.
Examples of it are things such as when you have a star rating radio buttons.
If you have a group of labels that they all have to be I don't know animated within a game and you want
to have access to all of them within an array.
Any situation that you can imagine that you want your objects to be within an array.
That's a good place for having an IAB outlet collection.
Now if you remember in our one of our previous sections where we did a game in that game I made an array
of all the labels or an array of all the images.
So that's a very similar concept except that there it wasn't an IEP outlet.
It was merely an outlet.
It was a variable might by then of the type array of UI buttons.
This is the same thing within Interface builder on a storyboard.
So let's keep it up to here and move on to our next lesson.