Hey everyone.
How y'all doing.
Johnny B here with slopes dot com.
And in this lesson we are going to continue with our SMAC chat app.
We are going to create the had channel view in this lesson.
All right so let me see if I can pull up our mockups one second.
You can open these up
and this is what we are going to build right now.
All right.
It's just another model similar to our profile model.
We have a title we have a couple of text fields a button to create the channel and one to close it.
And we'll also have the touch just recognize it to dismiss like the like the profile one.
So let's get to it.
We are going to again create a view controller file with Sid.
So here and the controller put them in a right click and say new file and do a Cocco touch class and
saying next.
And what do we call this and channel Visi and also create a file then next and create and then I'm going
to grab these and drop it into it's Zeb's folder and let's go and just get to get cracking on this.
This is a peer.
All right so let's go ahead and look for a UI view.
And this is going to be the container to hold hold all of the UI elements to me and UI elements like
the labels and the text fields and such.
And I was going give it a background.
We got that weird bug again.
So we're going have to leave this file and then go back into the add channel c that we are going to
give this a little bit of an off colored white so that we can view it and let's go ahead and constrain
it right now.
I'm going to say 20 from the left 20 from the right school about maybe 150 from the top.
And then we're going to set the height equal to about 320
C Java this version.
I think that's a little too far from the top so I suggest that you go back to size Inspektor top space
to say maybe 80.
And I think that looks pretty good.
All right so now let's go ahead and add in those elements.
And actually if we take a look at this you know what I was going to I was going to cheat I was going
to copy those from our profile view but let's just let's just do it.
All right so let's go ahead and look for a label view of this label is going to come up here.
They're going to need a couple of text fields.
So one text field here another textfield here and we're going to a couple of buttons one button up here
and one button down here and then we're going to need a couple of views to be our divider lines cases
you can chop that down right here and hold option and drag to make a copy of it actually you know what
let's delete that.
And first of all set all the properties up on this and then we'll copy it.
All right so this is going to be that blue color that we've been using.
And let's go ahead and set some sizes on this with is 250 and the height is to make two of those cup
controls or commencing command B to make your copy just drop that right down here and then for these
two let's grab both of these text fields and here in the color we're going to change the color of the
font to the purple.
The font is custom and Helvetica new is fine.
And then we're going to set none for the border style here.
And then let's put some placeholder text in there.
This one is.
This is the the name of the channel.
And then this one right here is the description.
Right.
So just move those over here and then let's change this up here.
This is going to say create channel K can change the color too.
I keep doing that.
Click here.
That's right right one purple and font that's going to be custom get a new.
Let's bump that up to maybe like 22 and the style is bold.
OK.
And then I'm going to press command equal to size it.
And then let's get right here we can get rid of the button text and under image.
This is going to be close button and you can drag that right here and let's go ahead and constrain it
over here from the top it from the right width and height is good.
And then let's go ahead and throw these in a stack for you.
So the name textfield description textfield and the two dividers and someone to say down here in bed
in stack and that's going to throw off the size of our divider views like it usually does.
So now we have to do some constraints.
All right so we're going to select all four of these elements to sit there because we're all going to
be with of two hundred and fifty that I set the height Manzie Manzi.
I think I set the height.
OK let's try that again with.
Two hundred and fifty.
There we go.
And then with the two views selected constrain the height to two you can going to add two constraints.
That looks better right now with that stack you selected.
Let's go ahead and give us some spacing Maybe you like 12 maybe a little bit more.
Something like 18.
See how that looks.
Maybe a little too much.
Let's try 15.
I think this still might be a little too much let's try 14.
All right.
Now it's pretty good.
I'm going to take that and you agree here and us do this button here this.
See here.
The text is create channel the background color is our blue color the text color is white and the font
is custom Helvetica new and the style is bold.
Looks good.
Now let's go ahead and set some constraints for our size the width is 250 and the height is 50.
Can add two constraints center horizontally in container add one constraint and then set it from the
bottom 20
actually.
Don't set this.
Now we can set this one and that's fine.
OK.
Now we're going to do is we're going to go ahead and constrain this top one so maybe 40 from the top
we'll see how that looks and then we'll set it horizontally in container that looks good on the stack.
You can see how centered horizontally and vertically looks right now looks pretty good.
I think this stack go up a little bit.
So let's go ahead and come over here to our size inspector and find the align center to Y and see maybe
minus 10.
There we go.
I think that looks that looks better.
Yeah.
All right.
And then our create channel button we can set the class for this one to be surrounded button and set
the corner radius to 5 on that looks good.
All right.
Let's go ahead and switch the background color on the container view back to white.
And then we need to add in our background view.
So here in the library I'm grabbing a view and I'm dragging it over here into the hierarchy and placing
it above or behind the front of you.
OK.
And I'm just going to rename this background you B.G. view and then I'm going to control and drag to
the Super view and say leadings paste a container control and drag trailing space to a container control
and drag space to container control and drag and bottom space to container.
And that's essentially the same thing as clicking on this and saying all of these.
But the reason I do it that way is because then I have control over which what I'm setting the top and
left and right constraints too.
If you do it in here it just automatically tries to set it to the nearest neighbor OK.
And then with the back can be selected I'm going to select our size inspector and set each of these
two zeros so zero here Zero here zero here and zero here.
All right.
And then we're going to wow with the second to be selected go to its attributes Inspektor change the
background to black and the Alpha to 0.4 and then select the Super view and the main view here and change
its background color to clear color.
All right it's looking pretty good.
I'm going to save that.
And now let's go ahead and add the Iby outlets and some of the actions for this.
For this view it's going to hold the option and write or hold option and click on the channel beside
of the file and then we're going to go ahead and add some had some of these actions and I guess we need
to delete this on used code here.
I'm going to start with the close motile button.
I want to control and drag and say close mode all pressed.
I'm going to set that to an action and connect then we're going to need outlets for that name and description.
So he appeared that tompion to say outlet's whips out.
Let's And with the name textfield selected I'm going to control and drag and say name text connect I
say
Chan description or just Chan desk for short hand connect and then I'm going to select the background
view and control and drag and say be all right to stick there and then while we're here we'll go ahead
and create the action for the Create channel.
Even though we're not going to get to it this lesson create channel preste.
And that's an action and connect.
All right.
So go ahead and go back to our standard editor.
Open up our ad channel VCDs Swift.
And for the close model we know how to do that.
That's easy just to dismiss.
It's true and completion is new.
Very good.
And this one we're going to ignore for now.
So the rest of this is just going to be some UI visual set up.
So we're going to create a function here called the phone set up by you
and we're going to hear it.
We're going to set the placeholder attribute in font color and then we're also going to create the tapestry
recognizer for that background view so that you can tap on it and dismiss that.
All right.
So let's get to it.
First off let's go ahead and do the DA touch gesture recognizer and say let close touch equal and that's
can be a UI tap gesture recognizer hand.
See here we need the target and selector.
But go let's go ahead and create the function first.
So this is going to be sorry to say at Objective-C and the function we're going to say Close tap and
then we're passing a recognizer of type you I tap gesture recognizer and all we're going to do here
also is say dismiss animated true completion.
Ready.
So there's our selectors.
The target itself and the action is hash tag selector and then we're going to say had channel Visi got
close tap.
All right.
Perfect.
And then we need to add the gestures around CBG view that and gesture recognize the recognizable Rowenta
and is of course close touch.
All right so now let's go ahead and add the the placeholder font color.
So if you remember how to do that we're going to say name text not attribute to good placeholder.
And so we need to create and attribute ID string to do that.
So we're going to say this this true beauty and string.
And we're going to initialize with here.
This guy right here with a string and then it's attributes.
All right.
So the string is going to be let's use this for the name texture and say name and the attributes here.
That's going to be you.
And this as true muted string key stopped for ground color says the key and the value is our SMAC purple
placeholder color that we created.
All right.
And then I'm going to copy this for the description placeholder as well.
And so we're just going to say challan desk right here.
And the string is description.
And that should do it right there.
All right so now let's.
Oh don't forget to set up the view or to call the function that we just created.
All right looking good.
So go ahead and make it so that we can actually make this model appear right so in our channel BCU that's
where that's where it's called from someone opened up our channel PC-DOS with the file and then I don't
believe we have a B action for the addition of new channels so we're going to need to add that so a
holding option and clicking on that storyboard are going to open the assistant editor and close this
left panel and the right panel will give us a little more room and then see here if we get the background
could snap into place there goes.
All right.
So this is the button we want the ADD channel button.
So I'm going to control and drag and let's put it
put it right here and we're going to say add channel pressed and this is an action and touch up inside
and connect.
All right.
So just like we did here with the profile VC we're going to do the same thing.
We are going to instantiate the controller.
It's going to go back to our standard editor first one on our left and right panes.
Now we can leave it right closed.
All right we're gonna instantiate the view controls from the let add channel call and channel B C stanchly
and then we're going to set the modal presentation style to say add a chain.
No dupped modal presentation style is equal to dobbed custom.
And then we're going to just presented and say present
is the one we want present controller to present is add channel.
Animated is true and completion is new.
I can say that and I think that's all we need let's go ahead and run it.
All right clicking here on the menu.
And he dismisses that dismisses the placeholder font color looks great.
Let's make sure those look good create channel doesn't do anything as expected.
All right.
That looks real good.
And I think that's all we are going to do.
And in this video and the next video some exciting stuff we're going to work with sockets for the first
time.
And you guys are going to see how cool it is and actually how easy it is also to talk with sockets and
have that open line of communication between our client app and the server so that we can see real time
changes so we're excited for that.
And I will see you next time right after I commit and at our changes.
All right.
See you later.