Hey guys what's going on says Caleb with Dev slopes and in this video we're going to start building
out an app called binary that essentially is going to be able to turn decimal numbers into binary and
binary into decimal numbers.
It's a very very cool little app you can use to basically you know convert values into binary and binary
back into decimal values and the cool thing is that we're going to actually take our conceptual understanding
of binary and we're going to go ahead and apply it to building this app and writing the functions that
are actually going to manage the data the way that we want to.
So very cool stuff.
Let's go ahead and let's dive into it right now.
We're going to go ahead and pull up an X code here and I'm going to go ahead and click Create new X
code project.
And of course the window will show up on my other screen but that's fine we'll just pull it on over
here and click single view application and give it a name.
I'm going to go ahead and give it the name maybe just binary.
That's fine.
And we don't need to do anything else.
So just click next and save it somewhere I'm going to save it to my desktop.
There we go.
Let's make it full screen and here we are.
So let's go ahead and let's build out the interface Let's connect everything up.
And let's also set up a textfield delegate which is going to give us the ability to basically control
the textfield and do things when we enter text into the textfield which will be very important.
So go ahead and click on may not storyboard and let's build out the user interface.
All right.
So in our view controller here we're going to actually just set the background to be a dark gray color.
And I believe this color is well what is it in hex.
It is.
Oh this is just straight black.
I want it to be kind of like a dark ish gray.
So we're going to just use six threes six threes is really good.
Dark gray color.
So let's use that.
3 3 3 3 3 3.
All right.
Next I want to put a little label up here at the top and just so you know this is what I'm referencing.
This is the interface that I designed out and this is something like what we're going to build so we're
going to do a label here a textfield here and then a stack view containing two buttons and another label.
So that's what I'm trying to recreate here in X code.
So let's go ahead and let's add a label for the app name up at the top.
OK.
And let's change the font color to white and let's change the font itself to Avenir next.
That's a nice font.
I use it all the time and I used heavy for the name here and let's use a size 36 font and let's stretch
it out a bit and I just stylistically wrote by an area with a little dot there that will be the name
of the application.
And I'm going to go ahead and just centered there and I'm not going to use any constraints just yet
I'm going to get everything in place and then constrain everything.
So let's go ahead and add an 8.
Textfield just like so.
And we're going to go ahead and stretch this so that it fits the screen and place it right about here.
And let's think what do we want to do.
I want to set it to have no background and it's going to say enter a value dot dot dot and that placeholder
text will show up when you know there's no text.
So that's cool.
Let's go ahead and change the font.
I'm going to use a cool kind of program or code font for the numbers that just kind of saint you know
seems cool with binary and whatever.
So I choose Menlo font already on your Mac.
Ok choose Menlo and let's make Menlo size 36 as well.
And yeah leave it like it is.
But let's make the font white.
That'll show up a little better when we type.
And that looks pretty good.
Let's see.
Let's leave the minimum font size 17:16 something like that.
Oh and we want the keyboard type to be a number pad because we're not dealing with alphanumeric values.
For this app we will in the challenge.
Ha ha ha.
Prepare yourself.
But for now we're going to go ahead and just use a number pad.
So select number pad for keyboard type.
Now we're going to go ahead and create a stack view containing those two buttons as well as the convert
to label.
So let's go ahead and just put the label down first like so drop it here and type convert to Colon.
All right and change the color there to white.
So it can be seen on the background.
And let's change this also to Avenir.
Next like we did before.
And make it heavy like I did below and a size 18 is probably good.
Stretch it out and I'm going to make it centered as well.
And so we can go ahead and leave that there.
And now we can drag on two buttons.
So type of button and a drag on one button here.
We're going to stretch it.
Change the name.
One is going to be binary because that will be a choice to convert it to binary.
And then we need another button for decimal so I'm going to copy and paste it.
Whoops.
Make sure it's selected copy and paste.
Drag it over here and change this to say decimal.
And I'm actually going to go ahead and change these both to have a background of white like so.
K and the font color is going to be that same dark gray.
But let's change the font because it's ugly.
The system font is so gross I'm going to change it to Avenir next.
And let's just use Demy bold.
That looks pretty good.
And let's make sure these are not overlapping.
Doesn't really matter the size because we're going to use a stack view.
And so let's go ahead and select both of these and put them in a stack view like I've been saying.
So with them both selected click the stack button down here at the bottom and then we're going to want
to give it some spacing so there's some space between them so give it 20.
Well yeah 10 points of spacing.
And now we can go ahead and select this label and the stack you by holding Shift and selecting both
and then click stack and of course it's going to accidentally converted into a horizontal stack.
So instead choose vertical and make sure that the label ends up on top.
Sometimes that can be a problem but there.
That looks good.
And this stack you should also have ten pieces of spacing 10 pieces and 10 points.
And then we want to set it up so that everything is centered and filling the entire stack.
So to do that all you have to do is click the alignment and change it to fill.
Very cool.
So now that we have everything in place let's go ahead and start using constraints to pin it in place.
So for the name I'm going to go ahead and pin this 10 from the top 10 from the left and 10 from the
right and give it a fixed height of 50 k that looks good.
Now for the textfield here I want it to be extra tall.
So in order to do that we need to pin it maybe 20 from the top 10 from the left 10 from the right.
And let's give it a fixed height of maybe 80 k let's make it really tall.
And there we go.
Very cool.
So when we actually enter text in here we're zoomed out and zoom back in.
There we go.
When we actually enter text in here you'll see it's nice and big which is very cool.
Now we're going to also tick the box here automatically adjust font and that'll help to align things
and make it look nice.
And now our last thing is we need to align the stack for you.
So go ahead and click the pin button and we're going to make this 20 from the textfield 10 from the
left 10 from the right.
And let's give it a fixed height of 80 and press enter to add those constraints.
Now of course we're getting some issues here with alignment.
So choose the stack views that contain the two buttons and we're going to go ahead and say fill equally
and that will make the buttons the same size which is pretty cool.
So now when we run this we should see enter a value and you know what I just realized our text here
should be centered and centered looks good.
And now when we actually type in text it should be in Menlo font in white and it should say enter a
value before we do that.
So let's go ahead and let's build this to our simulator and let's see if that actually works out the
way we want.
I think we're pretty darn close to what I wanted.
So let's let's do that let's pull up in the simulator here.
Shrink it down a bit and it will be able to compare it to our design and see how we did so it's building
opening.
And let's see.
OK.
That looks pretty good.
Nice.
If we click on the text field here our number pad comes up and our values are centered.
Very cool.
The only thing is that the placeholder is black and it's not really that easy to adjust the color of
the placeholder without using an attributed textfield So we're actually going to create an attributed
placeholder in code because I find that to be a little easier.
And we're going to set it in our view controller.
So let's go ahead and let's link everything up to our view controller now.
So open the assistant editor and go ahead and click on this to make sure we are connected here.
Get rid of did receive memory warning.
We don't need it and we're going to go ahead and create an outlet for the buttons.
Each of the buttons and the textfield So let's do that first right click and drag from the text field
and we'll call this value entry.
Textfield Okay press connect to connect it.
And then below that make one for each of the buttons right click and drag.
We'll call this one binary button.
OK.
And we'll call this one decimal button.
Cool.
So now those are connected.
We're going to need an Ivy outlet for the buttons so let's go ahead and right click and drag and create
an action.
I mean Iby action because it's basically a function that gets called when the button is pressed so we'll
just say binary button was pressed and connect that.
OK.
Then below that create one for the decimal button right click and drag.
Change it to action and say decimal button was pressed and then connected.
So that's great.
We're now connected.
That's super nice.
But we want our placeholder here to show up with white text.
So to do that we're going to create a variable called placeholder.
So go ahead and say well it can be a constant because it's not going to change.
So Type let placeholder equals and the type we need to use is called an s attributed string k and n.
Well let's see what it says.
And N.S. attributed string is a string that contains associated attributes like a visual style hyperlink
accessability data for portions of its text which is perfect for our placeholder.
So put a parentheses here and we're going to go ahead and creates an attributed string from string with
attributes K and there's a dictionary with all these keys that we're going to access so check it out.
Push enter there and our string of course we want it to say enter a value dot dot dot.
And now we need to give it some attributes.
So create a dictionary by creating two square brackets.
Put a colon in the center and we can just we can access all of these keys by typing s attributed string
key.
OK.
Now we want to change the font and the colors so type dot and you'll see all these keys appear.
Now the foreground color is for the font color so type and s distributed trng and then attributed.
And this attributed string key foreground color K and the value for that key we can just use a color
literal so type color literal and select it.
And the cool thing is that it automatically chooses white from the beginning so we don't even need to
click on it and change it.
However if you wanted to you can double click and choose your own color.
Very cool stuff.
But we have one more value that's really important and that is the font.
So Type A comma then type and as a tribute it's drinky font.
Put a call in and we need to create an instance of UI font.
So type you I font.
And to create a UI font what we can do is we can basically give it a name and a size.
And so we're going to go ahead and say UI font in net and for the name we're going to go ahead and type
Menlo because that's the font we used and the size is of type C.G. float so we can type thirty six point
zero.
And now we don't actually need this init but sometimes it's easier to type that to access the functions
if it's not properly auto completing so delete in net.
And then in order to actually use a font you need to force on wrap it.
There is a safer way to do it.
But for now I know for sure that I have a font called Menlo and I know size 36 is fine.
But now we have a placeholder.
It's setup with a font and with a color.
Now in order to set it all we have to do is go inside.
You did load type value entry textfield placeholder like so and you'll see there are two options placeholder
and attributed placeholder.
Now we want attributed placeholder for one because it's of type and as attributed string and for two
it just it won't work with placeholder because that's just a string.
So attributed placeholder is going to be placeholder.
And the one we just made now get rid of that comment.
Let's build and run.
And let's go check to see how that improved our placeholder.
It should be white which is awesome.
See.
All right look at that.
Very very cool.
And now when we type it's good and we delete it goes back to our placeholder.
There is one problem usually a placeholder is almost like a grayish color so that it seems a little
darker than the text that's going into it.
So you know it's a placeholder.
So let's actually change it from white to like this lightish Gray.
Let's build and run.
And let's see how that looks.
This is just a minor UI tweak it's not a big deal but I just kind of like it.
OK.
So it's kind of a gray area.
And then when we type it's white and then we delete It's great.
OK.
That is what I want so very very cool.
We have now built the user interface for application.
We have also set it up so that our placeholder is white.
It's Menlo font size 36 very very cool stuff.
So now we're going to go ahead and set up our buttons because from the beginning our buttons should
not be accessible because we have not put in a value and we're going to set them so that they are enabled
when the value is in place.
But first we need a way of monitoring what actually is happening in the text field.
OK.
Now to do that we're going to go ahead and add a target to our textfield.
OK.
Now Target is sort of like we're linking it to a particular function.
And whenever the editing changes in our text field it's going to call that function.
So go ahead and let's go ahead and interview did load type view or sorry value entry textfield dot add
target and push enter.
Now the target is self.
Meaning this view controller the action is going to be a selector and this is where we call our function
so type pound sign selector and we'll put the function name inside those parentheses in just a moment.
But the control event is dot and you can see there's a lot of things here but we want editing changed
anytime the text changes we want to call this function because we're going to make it so that the buttons
are disabled.
If there's no value and once we start typing they'll become enabled so we can actually click on them.
So let's write that function now.
OK.
So we're going to call this function textfield text did change and I'm going to copy that so I can just
use the name right here phunk textfield text did change.
And just so you know with a target we need to expose this function to objective c code.
That's just something that X code will yell at you about.
And so just like that that error up there is going to go away.
Very cool.
And now what we need to do is we need to check to see hey if the text field is empty We're going to
go ahead and enable the buttons.
Otherwise we're going to disable them.
So we're going to say if value entry textfield that text is equal to nothing if it's empty.
We're going to go ahead and say binary button dot Well if it's empty meaning there's nothing there we
want the buttons to be disabled so binary buttons isn't enabled.
Equals.
Equals false.
OK then we're going to go ahead and type decimal button decimal button is enabled equals false.
All right but this is not going to actually change their appearance in any way so I think would be cool
if we sort of faded them down to maybe 50 percent opacity.
So Type A binary button.
Alpha equals zero point five and do the same thing for the decimal button.
Alpha equals zero point five.
Otherwise if there is text we're going to go ahead and just say that the buttons are enabled.
However if they're enabled the alpha should be 100 percent right.
So go ahead and type else.
And I'm going to copy this because it's the same exact code that is going to change some of the values
here.
If there is text we're going to go ahead and say that the buttons are available to be pressed and the
alpha or the opacity is going to be 100 percent.
So every time our textfield changes it's going to go ahead and basically you know set the buttons to
be disabled or enabled.
And if you think about it when we open the application there are no values.
So the buttons should be disabled by default.
And so in order to do that I'm actually going to turn this into a function so I can call it here and
call it here without needing to write the same four lines of code.
So beneath this type phunk enable buttons and I'm going to copy that code in place and actually you
know what that is the disable button code so lets type disable buttons then right phunk and enable buttons
and copy the Enable buttons code into that function.
And now we can say if the textfield is empty we want to disable buttons otherwise.
Whoops.
Here we go.
Otherwise enable the buttons.
And of course when the view loads we want to disable the buttons by default.
So let's build and run.
Let's make sure that our interface is looking good and that we can type in the text field and it will
enable two buttons and disable them.
Cool look at this so the buttons are now faded out and if I click on them they don't do anything.
However if I type a value the buttons should become enabled.
Look at that.
They are so I can type a value I can tap on the buttons and now if I go back and there suddenly nothing
in the textfield watch they're disabled.
Very very cool I can't tap on them unless there there's a value.
That's a really good way to safeguard against up you know potential errors in crashes.
The buttons can't even be accessed unless there is a value in the textfield.
Very very cool stuff.
So our interface is now complete.
Our textfield is set up our buttons are set up so in the next video we're going to go ahead and set
up a class that's basically going to use our knowledge of binary and enable us to create binary values
and perform all kinds of functions on them to convert binary to decimal and decimal to binary.
Let's head over to the next video and let's get started now.