Everybody this is Caleb with Debb slopes dot com and in this video we're going to go ahead and build
the new controller that's going to allow us to create groups.
This is one of my favorite features of breakpoint and it's also one of my favorite controllers just
because it's so cool.
We're going to be able to search through all the users in our app by their e-mail and we're going to
automatically filter a table view showing cells we can select them.
They can be checked on checked often and added to just an array of names and you can create a group
with all those people it's really really cool.
Let's start building the interface in this video and then in the next video we're going to start working
on just a little bit more complex and deeper stuff.
But for now let's go ahead and open up our X code project and go to the main story.
Open it up.
Looks pretty good.
OK.
Now we need to add a view controller and we're going to actually add it down here next to groups because
we're going to be working with that.
Very cool.
OK.
So now we're going to go ahead and copy this view pasted into this view controller and drag it to the
top.
Let's give it some pins here.
Top right and bottom sorry left top and right.
Apparently I can't get my left and right correct correctly anyway.
Pin it to the top and the left and the right.
And now that's in place.
We're going to go ahead and change this to say new group.
This button is actually going to be changed to have text instead of an image.
So we're going to get rid of the image and we're going to go ahead and write done in capital letters
and we're going to stretch it out a little ways and we're going to change the width of course to fit.
So let's go ahead and do that.
Let's give it a width of 60.
How about.
And that looks pretty good.
We're going to actually change the font but I'm not going to use Menlove I'm going to use Avenir next.
You know me I love Avenir next.
I can't get through an app without using it at least once.
And let's set it to be bold.
Size 18.
And let's change it to be green that light green color that matches the rest of our font.
Super cool.
Now we're going to add a button.
So go ahead and drag in a button up in the top there and just like always we're going to go ahead and
pennant 30 from the top 20 from the left.
Actually no not 30 from the top 20 from the left and we're going to pin it so that it matches the center
label horizontally so select the button and the label click the alignment tool and give it vertical
centers.
Very cool.
Now we can go ahead and we can remove the label from this button like so and we can set this to be cancel
or close button.
OK.
That's going to allow us to pop down this view controller just in case we change our mind and don't
want to actually create a group.
All right.
Very cool let's move on.
So next go ahead and select the white view.
And we're going to change the background color to be that light gray.
OK compared to the duck or they're both kind of dark but this is lighter.
Next we're going to add some labels here we're going to give a label for the title a label for the description
and then also a label to cue people to add some friends to their group.
So let's go ahead and we're going to actually use a stack of you here for this but let's just start
by piling on some labels and I'm going to just copy and paste them just duplicate them that's fine.
Duplicated again.
And we're going to need only three.
OK that's pretty good.
We're going to need some text fields for typing the title so called textfield and drag one on.
That's for the title.
Copy and Paste.
That's for the description.
And paste it once more.
That's for the label.
OK very cool or sorry for the members of the group so I'm going to edit this and I'm going to say Title
going to edit this to say description.
Whoops I didn't spell that right this description.
And this one I'm going to say add people to your group.
That's also not quite wide enough so let's make it a little bit wider.
And all three of these I'm going to want to center OK so that they are center oriented.
And now we can actually go ahead and put these into a stacked view.
Oh not yet.
Sorry we need to add a table view as well.
OK and that's going to be a little table view down at the bottom.
But now we can select all of these in a row and we can put them into a stacked view by clicking the
stack button.
Very cool.
All righty.
That's good.
So let's go ahead and pin this 20 from the top 20 from the right 20 from the left and 20 from the bottom.
Add four constraints and you'll see that it is added 0.
Although you know what it looks like constrained to margins was on.
So the leading and trailing space can be zero.
So let's change that back.
And now it is 20 from the left right bottom and top.
And now we need to turn off center as far as the alignment goes and change to fill.
Next we need to set fill proportionately.
And now we need to go ahead and set some fixed heights for these because I want them to be a certain
height and I want this also to be a certain hype.
For now let's go ahead and set these to have a fixed height of let's try 40.
Let's see how that looks looks good.
Let's set this one to have a fixed height of 60 I want it to be a little bit taller just because.
And we're going to go into this stack view here.
Select the stack view and I want to give it spacing of 5 between each item.
I think that looks pretty good.
And these are going to need to change so select the labels and we're going to change the font of course
to men low.
Not that Menlo.
There we go.
And the title and description labels are going to be very very small so we're going to lower them maybe
to 8 it's going to take a ticket sweet time here.
To eight.
There we go and we'll change the color to our lovely green color and it will change.
Add people to your group to also be green and let's bump it up to size 18.
You know maybe 16 is better.
Yes 16 is better.
And now we can actually just recycle our inset textfield subclassed so select all three text fields
and we're going to type inset text feel great.
Now let's change the border to square and we'll change the background to dark.
I think that's the right one.
No it's not there we go the right one is to nine to be three four.
All right.
Very very cool.
This looks awesome.
Now we need to set placeholder text so let's go ahead and set the placeholder to say add a title or
maybe give your group a title.
OK.
And I'm going to just copy back.
It's basically the same for here.
Give your group a description.
Description and type e-mail or maybe enter an email.
Yeah that's a little better.
Enter an e-mail.
Follow the lowercase pattern we have been following.
Cool that looks great.
And now we need to drop in a table view you sell to our UI table view.
So drag one on there and let it go.
There we go.
Nice.
Now our table view we want it to match the rest of the theme of the rest of our out.
So set the background to be that dark gray color.
There we go.
And oh you know what.
No that's not right.
We want it to be the light gray so that it matches.
And then the cells themselves will have the dark color.
OK.
That's pretty cool.
So let's BuildOn run.
Let's get this to show up in our simulator and let's take a peek at how we're doing.
Of course it's giving the simulator error.
So let me quit the simulator and restart it.
Here we go up again.
Good old X code beta bugs.
Haha.
Anyway while it's loading here we go.
Beautiful.
So if we go to groups and we should see everything here OK that looks kind of weird.
What's the deal.
OK so it looks like everything is stretching out.
Even though this table view is here the way it's supposed to be you know what let's try changing this
to fill equally not equal fill equally.
Oh definitely not that.
OK.
No equal spacing definitely not equal centering no.
Phil maybe k we don't have enough space between each one.
So let's try to straighten out for size.
K that's definitely too much space.
Let's try five let's just build and run let's see how it looks and if it doesn't look good we can always
change it.
I am noticing though that the background of the table view does not match the cells here so I'm going
to change this.
The background to be the dark color like it's supposed to be.
There we go.
OK.
So let's go into groups let's look.
OK.
That is much much better.
And you know I really don't really like the separation style there so I'm going to change the separation
style to have no separator.
We're going to choose none.
That looks pretty good.
And yeah no this looks great.
This is nice and nice and pretty but I see that our font here is not correct so let's change the font
of our labels or our text fields to be Menlo like it's supposed to be
can't choose Menlove.
And let's bump it down to 16 as well.
16 looks.
That was 15 16 looks good.
All right.
So we just change the font.
That should be wonderful fine and dandy.
The separator will also disappear.
We can give that a shot to make sure but as it's loading we're going to open it up and we're going to
create a view control a file.
First of all since we haven't for this one yet.
OK it's loading here showing up
OK here we go let's open it up.
OK and there we go.
Now our font is properly showing up.
But look at that.
Should have paid attention it's not green like it's supposed to be so select all three text fields change
the font color to green.
Perfect.
All right.
So now what we're going to do is we're going to go ahead and create a swift file for this by clicking
new file in the controllers.
You touch class UI view controller cam we're going to call this create groups Visi click Create and
now we can go back into the storyboard
and now we should be able to access our view controller here should show up under automatic O.
But you know what we have not set its identity.
So first selective controller and we're going to create this as a type of create groups VC as soon as
we do that you'll see that it'll automatically pop up here and now what we need to do is basically set
up all of the Iby actions and outlets that we need for doing this which are quite a few.
We need one for the button for the close button the text fields here and the table view.
So we're going to go ahead and we're going to create an outlet for everything that we need.
So this will be title textfield.
OK.
That looks awesome.
This will be.
Whoops sorry let's go beneath this.
This will be description text.
Again this will be a description textfield
awesome cable this will be user name or habit.
Email textfield maybe email search email search textfield.
And what else we're going to need one for the Dunbarton because we're gonna hide it unless we have typed
a name dun button.
OK we don't need one for the cancel button but we do need one for the table view.
OK very cool.
Now is there anything else.
Ah yes the add people to your group we're also going to modify So let's put that beneath let's put it
beneath our search field so let's do e-mail or maybe added.
Well what is it.
What can we call it maybe Group Member label or.
Yeah it is a label.
All right.
Awesome so we have outlets for everything.
We have some unnecessary spaces here between them and that looks great.
Now we need to set up some IP actions so let's get rid of the boilerplate code and let's set up an action
here for our done button.
Ok done.
Button was pressed.
And beneath that we're going to set up an IAB action for the close button of course turning it to an
IBM action.
There we go.
And you know what for IAB actions and outlet's I think we are good to go.
We don't have anything else that we need to do with those.
And in the next video we're going to set up some really really cool stuff so that we can search for
users display them in the table view and we'll get a function up and running in our data service so
that we can download all that good information.
So we'll see in the next video where we will continue to build out this amazing social media app.
I'll see over there.