How To Make A Calculator App In Xcode 8 (Swift 3.0) – Part 1/2


so the first step is as always going to be to create a new Xcode project so let’s do that and it is going to be a single View application and I am just going to name this calculator I’m going to click on next and then I’m going to save it on my desktop and the first thing that I am going to do is I’m going to jump straight over to the storyboard so that I can start laying out the app now the design that I’m going for is going to be Apple’s a calculator designs I’m just going to get that on my phone like that because I’m going to try to resemble the Apple calculator as much as possible we won’t have all the functionalities we’ll make a basic calculator with dividing multiplying subtracting adding and then also resetting and all that stuff but we won’t build it you know square roots and all that stuff so I’m just going to select it and I’m going to build it on an iPhone 5 or iPhone se because that’s what I’ve got right in front of me and then I’m going to just drag in all of the elements that we need now all of the buttons are going to be buttons so I’m going to drag in the first button and then that button is going to be one-fourth of the width of our viewcontroller so if you just click your view controller you can see the width right see right here and it is 320 which divided by 4 is 80 so we’re going to select it and we’re going to set the width of the button to be equal to 80 let’s see I can find my way around today there we go so we’re going to set width to 80 and the height to 80 so here we have the size of the button now we’re just going to adjust the colors we were by selecting the attribute inspector and then we’re going to set a background color which is going to be light gray just like Apple has it and then we are going to one dark maybe no that’s fine one lighter there you go and then the text color is going to be a white color just like that or a great note let’s see it’s a black color actually it’s pretty black today I think that’s it and then I’m going to adjust the font here I’m just going to make a custom font here and select that one and then light and then I’m just going to set it to 50 let’s see if that nope that’s a little bit too big 30 and then I’m going to place right seven as a placeholder and that looks about right so now the task that I’m going to give you is going to be to lay out these buttons so that there are four in each row so I just want you to take that one button that we have already made and then and then actually we’re going to have it five five buttons in the height and then four in the width so I’m going to do that now and then I’m going to skip ahead so here I have all my buttons laid out as you can see five and height and four and width and now I’m going to make a few adjustments so that it’s exactly as the Apple calculator so the first thing we have to do is remove the number seven and drag this one bihter because this is going to be number zero so let’s type that in there zero and then we have one two three four five six seven eight nine just like that then here we have divided by here we have multiply then we have minus we have plus and we have equals and down here it’s actually comma but I’m just going to not use that in this tutorial and of course you can add that if you want to but just to keep it simple and explain the basics of how to make a calculator I’m just going to leave that out for up here I’m going to have the reset button here I’m not going to have anything and I’m also not going to have anything right there then I’m going to make these three buttons one shade darker so if you just select those three buttons and then I’m going to go to the attributes inspector choose the background color to be one shade darker just like that and then I want to select all of these down here and I am going to make the background color orange and the text color white so as you can see it resembles the Apple calculator pretty decently and now to take it one step further let’s click on our view controller and then we’re going to set the background color to be a black background color so there we go there we have pretty much that’s the Apple calculator now we are as you can see there is some kind of error down here with my buttons they’re not properly laid out just like that and now we are going to have a display so that we can display the result display what the user is calculating else a calculator it won’t be too much use so I’m going just going to drag in a label like this stretch it right to the edges and down here just make it fill to here probably and I’m going to set the text color to be a white color and I want to align the text to the right then I’m also going to make some custom adjustments here so I’m going to set a custom this one and then light and then I’m going to increase the font size – let’s try 50 and I’m just going to write in a placeholder so we can see how it looks if I now say 80 okay maybe a bit larger I’m going to try 70 and that is about right now the applique calculator is a bit the font is a bit smaller but of course you can experiment with the different font sizes in order to hit the perfect one but for this tutorial I’m just going to go with that and also let’s see I just have to adjust this button here you can of course place constraints but that’s not something I’m going to do in this tutorial but if you want to have it look awesome for all the right sizes then of course make sure to place some constraints now we are going to take it towards the next step and that is going to be to open up our view controller and what we are going to do is we are going to drag in our buttons first of all I’m just going to show you how I do it now you can drag in one button at a time but instead we’re going to combine all of the buttons to one function and then instead of listening for a specific button we’re going to listen for the tag of the sender so the tag that is attached to the button and as I will show you right now we can set a tag by going to the attributes inspector of a button scrolling down and then here you will have the option to place a tag so I’m going to give the zero a tag of one I’m just going to continue like that two three with all of the buttons and as you can see the tag is one higher than the actual number and that is because the view controller and all of our other elements is as a default has a default tag of zero so instead of changing all of them I’m just going to give it I’m just going to start at one as to not come into any trouble so there we go now we have the tags of 1 to 10 and now I’m going to drag in all of these buttons so I’m going to first of all drag in the zero and I’m going to define it as a action and a UI button and then I’m going to give it the name numbers and then I’m going to make the function here so you have some space there because then it will be easier to control drag the other buttons into that same function and that is what you want to do right now you just want to select a button and control drag it into that function which basically means that all of these buttons are going to share the same function each time any of these buttons are pressed this function is going to be called and that is exactly what we want then I’m just going to delete this one so that it’s completely empty then we are going to head over to the view controller and I’m going to get us some more space here and the first step that we are going to take is we’re going to display the numbers that user presses on we’re going to display that in our label and one thing I forgot and that is of course to drag in the label also in order to display the numbers and I’m just going to call it label just like that and now we are going to take the first step which is displaying the numbers that user presses on and the label the way we do this is by simply saying label dot text is equal to label the text so we’re taking text that’s already in the label and then we’re adding the number that if user pressed on so let’s say that was sent and the way we get that is we simply say sender dot tag – one because as you remember we gave all of the buttons a tag and the tag was one number higher than the real value that we want to display so we simply say the tag minus one and then of course we need to convert it to a string so that we’re able to display it in our text field and here we need to force unwrap something so insert exclamation mark and what we’re basically doing is we’re taking to launch the application and then you will see what we’re doing here so here’s our calculator and now I’m just two right one two three five and as you can see the way we’re doing this is we’re taking the number right here that’s already displaying and then we’re adding the new number so we’re simply taking the old one and adding the new character so seven nine six we can keep on going so that is working brilliantly but right now we only have it as a string displaying in our label what I want to do right now is I want to save it as a real number that we can actually calculate with and do something with so I’m going to define a variable that I named number on screen and it’s going to be of type double and it’s going to be initially set to zero then down here I’m simply going to say number on screen is equal to double label dot text so I’m taking the text that’s already displaying in my label and converting it to a double and saving it in my variable number on screen and here you need to do some force on wrapping first of all to tell that there is some text in the label and then also to tell that you’re sure that we will be able to convert the text to a double and we’re pretty sure of that because it is originally a number converted to a string so now we have been able to to make the application so that we can write out a number that then displays on the screen and I’m just launching it to make sure that also this operation here works and it certainly does okay so what we are going to do next is we’re going to start incorporating the math symbols of plus minus subtract all that good stuff that plus minus subtract that’s the same thing but I’m just going to head over to main the store board and I’m going to drag in all of our see going to get our viewcontroller I want to drag in all of our missing buttons let’s see I just need my storyboard there we go so now I’m going to get myself some space right here and I’m going to do the exact same thing that I did up here so I’m going to give all of these buttons a tag and then we’re going to connect them in one our shared function so this one I’m just going to call buttons and they’re also going to be actions of type UI button and I’m just going to let’s see and then I’m going to drag in all of the other buttons so drag in that one drag that one drag in that one and drag in that one and this one awesome so now we are also going to have to give them a tag and as you remember remember we stopped at three stop at ten so we’re going to continue at eleven so I’m going to give this a tag of 11 12 13 13 14 15 and 60 so now we got all of our buttons set up we have connected all of our buttons and now everything that’s remaining is to make it a real calculator but it looks like the spaces are not they’re actually fine so now we’re going to add the feature of first of all adding the addition feature so that you can add one number to another one so that’s what we are going to do right now and the first piece of code that we are going to write inside this function is we’re going to check if there is a number there because we don’t want to do a math operation if there isn’t a number there so first of all we want to check if label dot text is not equal to no then we also want to check if the number that’s being tapped on is not the reset button or the equal button we just want to listen for the plus subtract divide and multiply buttons so we’re going to say if the field is not empty and sender the tag is not equal to 11 which was the reset button and the center tag is not equal to 16 which was the equal button so when we are inside this if in a function right here we are short that either plus minus add I let C plus minus and multiply and divide buttons one of those have been pressed so in the inside here we’re going to dial in on the exact button that has been pressed so we’re going to say if a sender dart tag is equal to 12 we’re going to do something here and if that isn’t the case we’re going to do something else here and as you can see this one is going to be our first button this one is going to be second and fourth we want to say this and just like that and if you now bring up our store body you will see just to specify which of the buttons you are accessing right here here we are accessing divide here it’s multiplied here it is – and here it is plus so now we know which of the buttons that we are talking about when we are in the respective if function and as I said but first and foremost going to focus on adding so plus and what we are going to do is we’re going to take the previous number that the user might have entered and then we’re going to add it so let’s see let’s let’s launch the app to make it absolutely clear what we are trying to do here so what we want to do is we first of all want the user to write in a number then when the user clicks on plus we want to display a plus sign and then when the user clicks on equal we are going to show him the results this means that we first will need to display the plus when the user clicks on plus

Leave a Reply

Your email address will not be published. Required fields are marked *