Everyone welcome back Johnny be here with Dev slopes dot com.
And in this lesson we are going to start working on our UI for our app crisis the user interface.
Now in the last lesson we went over all about the basics of fires or how to use it when to use it.
What makes it so awesome and everything and so yeah.
But before we can get into that we need to have a place where we can actually enter data and save it.
All right.
So here is on the left we have our finished app game and we're going to be working on today is when
we click on this lightbulb with the plus sign to add a random thought screen can click on it.
And this is what we're going to be working on.
And this lesson is setting up this UI OK that way in the next lesson we can actually type in a random
thought process post and do the work to save it to our database.
OK.
So let's get to it.
All right so I'm going to come over here to our project and we're going to be working in the main storyboard.
And if you open up your assets folder you'll see that we have a image file here called the random mockup
in case we go ahead and open that.
And here we have a mockup so that we can reference it while we're designing out our UI OK.
So like I said we're going to be focusing here on the right and down here in the bottom right corner.
We have a couple of hex values and these correspond to the Gray and the orange color schemes that we're
going to be using here in our app Okay.
So you can reference those as needed.
OK.
Let's get to it.
First off we are going to be working in the navigation controller so I'm going to select our first view
controller here and I'm going to go to editor and we're to say embed in the open I don't have it selected
here.
So if your controller editor embed in and we're going embedded in the navigation controller what this
does is this just simplifies some of the navigation for us.
We are able to easily navigate back and forth between the two controllers.
All right.
So let's go ahead and I'm going to zoom in here a little bit and close the bottom pane here.
And first thing we're going to do is we're going to customize our navigation bar a little bit.
All right so here under the navigation controller seeing select your navigation bar and then select
your attributes Inspector go over here.
And what we're going to do is we're going to change the bartend.
You just go ahead and click on that and then go to other and then the x value that we want is the one
that we had in our preview here which is 3 6 3 6 3 6.
Ok so this is that dark gray 3 6 3 6 3 6 press enter and there we go.
And now we have changed the bartend color.
Very nice.
All right.
So next thing we're gonna do is down here under the title text attributes we are going to change the
title color and this one is going to be the orange color so we reference our mockup is f 5 8 2 0 C in
case again that is 5 8 2 0 see.
There we go and that gives that nice orange color.
And lastly here under view we are going to change the tent to that same orange so now it should be in
your recently used colors.
Go ahead and select their and then go ahead and select our initial view controller over here and select
the navigation item.
And over here in the navigation item set the title to R and D.
And there we go.
So now we can see the title of our app right here.
Random pertness.
Next we're going to need a button to navigate to our new View Controller.
So let's go ahead and add that just search for bar and you'll get to bar button item you can drag that
Barbin item up into our navigation bar.
Now we're meant to delete the item title and set an image and the image we want is the ADD thought icon.
There we go.
So now that we have our button to navigate to our new view control let's go ahead and add that view
controller.
So here I'm going to just search for a view controller that'll be up at the top and just drag that in
there.
Very nice.
And then all we need to do is select our.
And now all we need to do is select our button and control drag to our view controller and select show.
All right very nice.
Just go ahead and run this just to make sure it's working so far.
All right looking good.
So if I click on this we should navigate to our new view controller.
Very nice and you'll see that with the navigation controller we get for free this back button that takes
care of the navigation for us.
So this is looking good.
Just go ahead and reference our mockup again and see what we need.
All right.
Looks like we're going to need a segment control right here text to view here.
And then another text view here and a subsequent add those elements.
So I'm going to search for segment segment and control.
It's going to drag that up here.
Very good then we're going to search for text and we're going to use a text field for this one and then
a text to you for the for the longer one.
OK.
And then lastly we're going to need a bun.
Never give up.
So I like to just kind of throw all of the elements on and then start to work with them as we go along.
All right.
So let's start up from the top and go down with our segmented control and go ahead and pull that up
here and we're going to need to add some segments so with the segment control selected I mean the attributes
and Specter we're going to bump up the segments to three.
OK.
So we have three categories that you can post into and they are again referencing our mockup funny serious
and crazy.
All right so let's go ahead and let's first hasn't constraints on this to get it to the right size.
So here I'm going to add constraints and we were going to go from the left we're going to constrain
it to 20 that's 16 from the top and from the right 20 as well and then give it a height of 30 to just
give it a little bit more presence here.
All right that looks good.
And then let's go ahead and here under the alignment.
Go ahead and select this one right here for the centered vertically.
That looks good.
And now let's go ahead and change first let's change that.
I do not like that Bluett.
And so here we're going to change it to the orange color that we've been using.
So that should be under your recently used colors.
Very good.
That looks much nicer.
And then let's go ahead and start changing our titles here.
So here under segment zero first change that too funny.
There we go.
Very nice.
And then we're going to select our second segment or segment one and that title is going to be serious.
There you go.
And then our third segment segment two that is going to be crazy.
There we go.
And the line that keeps getting a little bit weird so you can just slip that again right there.
All right so now we have our segment to control all set up so that's good.
Let's move on to our textfield.
And here let's go ahead and remove the border.
So is not going to have a border.
Let's give it some placeholder text and we'll say user name.
OK.
So this is the textfield where the user can set its username that will show up in the post that they
send up.
All right now we're going to change the text color to a dark graceless dark gray color right here.
That's good.
And we'll change the font to a custom font and set that to Avenir next.
There we go.
Looks good.
And this decrease the font size to about 14.
I think that's good.
I just announced give us some constraints.
We're going to constrain it 20 from the left eight from the top and 20 from the right.
There we go.
And I think there's a little bit too close to the segment control actually so coming back to our Cyzon
Specter Let's go heading select this constraint and we can edit it and let's change that to 12 let's
say OK I think that looks better.
All right so now with our text to you here let's go ahead and remove this text.
Let's change the text color to that dark gray.
And then let's go ahead and change our font to custom.
And family is Avenir next.
And just change the font size to 14 as well and say done now looks good and then see here this change
the background to a light gray color.
OK.
And then actually I'm going to select that and then we're just going to drop the opacity down to about
oh 15 percent.
That looks good.
And then let's go ahead and give this some constraints.
So I'm going to say 20 and 12 and 20 from the right.
And then we'll give it a height of 100.
There we go.
Lastly we have the button.
So let's go ahead and move that up here a little bit.
And this is going to say post can change the font to custom and Avenir.
Let's see here.
Avenir next and the style is medium and we'll say.
Done.
And then the text color that's going to be white and the background color is going to be our orange
color case Slichter right here and select our orange color.
There we go.
Very nice.
Let's go ahead and make this a little bit bigger.
So I'm going to set the white width to 60 and the height to about 35.
And then we need to center it horizontally in the container and said it's constraint to the element
above it to 8 and there we go that looks good.
I suppose maybe a little bit wider.
So when it's like the button come back to our size inspector and change the width to let's try 80.
See how that looks.
I think it's better.
All right that's looking pretty good.
Let's check out our mockup to make sure that we are on target.
And yeah that looks pretty good.
You'll see here that we are missing the placeholder for the text of view and some rounded corners.
But that's stuff that we're going to actually have to do in code.
OK.
So let's let's get to that.
First off we're going to need a new view controller adults who have to file for our view controller
for our new view controller.
And while we're at it I'm going to change the name of the initial default view controller.
I don't like it just being called just the view controller with X cotinine we have an awesome new refactor
tool so we can double click on your view controller right here and then right click and say refactor
and rename K and then we can just rename this and it will change the name everywhere for us and he's
going to say mean visi.
There that.
Is the main view controller for our app.
All right.
Go and create a new view control center right click and say new file and then we're going to be doing
in iOS cocoa touch class and I'm going to name this and thought visi.
There we go and select next and create are there we are going to drag this up here next to the other
main visi.
And at this point let's go ahead and create some organization in our in our project somewhere right
click and say new group and this is going to be we're going to follow the model view controller architecture.
So this is going to be controller and create a new group.
This is going to be you create a new group and this is going to be model there you.
I'm going to drag our two controllers into the controller folder and there we go.
Know But the main VC on top and that looks good.
All right so now let's jump back in the main story board and we need to set the class of our new controller
to our ADD thought visi.
So now we can actually hook up these IP outlets in our new controller files.
Let's go and do that.
So with option held I'm going to click on the ADD thought Visi that will open up our assistant editor
and right here under the class declaration.
I'm going to make a section for outlets with a comment and then we're going to create our outlets.
So I'm going to control drag from our segment control and I'm just going to say category segment.
There we go.
And then for the user name and we're into control and drag and say user name text cx t.
Let's connect then going to control and direct from our text view.
And I'm going to say I thought text and connect that that then I'm going to control and direct from
our post button and I'm going to save the post button and connect that up.
Now we're going to need an action for our post.
So down here with me I'm going to delete this comment and this did receive a memory warning and then
I'm going to control and direct from our post button and we're going to change it to an action.
And this is going to be post button tapped and King and say connect and then we are also going to need
an action for segment control so that we know when these segments have been changed.
Want to control drag and select action and say category changed.
And there we go.
All right so I think we have all of our outlets and actions hooked up so let's go ahead and close our
assistant editor and go to our ADD thought Visi does have to file.
And the last thing we're going to do is a little bit of styling on our some of our elements.
And our main story board we want our text to you here and our button to have a little bit of rounded
corners.
Let's go ahead and do that.
It's right here in the view did load.
We're going to say post button dot layer dot corner radius is equal to 4 and thought text dot layer
let's not lay manager we want the layer that corner radius is equal to 4 as well.
OK and the last thing we want to do is if we check out our mockup we see that the text view here has
placeholder text.
However the text view doesn't actually have a placeholder text property unfortunately.
And so we're going to have to do is we're going have to do this manually a little bit of a hack here
but we're going to do is we're going to set the text when we load it and then when we start to type
into it we're going to delete that text and replace it with an empty string.
OK.
So we're going to say I thought text text is equal to manually put our placeholder text which is going
to be my random thought dot dot dot and we'll change the font color to thought text not text color and
we'll set that to a light gray colors and say you my color dot the light gray and let's run that and
see how it's looking so far.
All right let's go ahead and navigate to our second controller when that is looking good.
We can change our segment control or we can type in here and our user name.
But here if I start to type you see that it doesn't act like a placeholder text and delete itself.
So we're gonna have to do that manually.
OK so what we're going to have to need to do is we're going to need to know when someone clicks in this
and starts to type.
And for that we're going to need to use a protocol for the UI text you can delegate.
So we're going to hear in our class we're going to extend and implement that so if you just type in
you text you delegate and then we're going to set the delegate for our text view right here so we're
going to see that text that delegate is equal to self.
And then the method that we're going to need is text.
You did begin editing.
OK.
So what this method does is anytime someone starts to type in that text to view this function will be
called All right and so that's the functionality that we get by assigning the delegate and implementing
the text view delegate we're able to get these methods.
All right so what do we want to do.
We want to remove the placeholder text and then we're going to change the text color to a darker gray
color.
OK that's what we're going to do.
We're going to say text you that text is equal to an empty string.
And then we're going to say text if you dot text.
Color is equal to eye color dot dot dark gray.
All right I'm going to remove this comment and everything else looks good.
I think it's going to run it in case some way to navigate to our new controller.
And if I start to type a random thought then delete the placeholder text and changes the text colors.
So yeah this is looking really good guys.
All right so we're making great progress.
We have our UI all set up so that in the next lesson we can actually start working with fire store and
saving data to our database.
I hope you're excited for that and I'll see you in the next one.