iOS Development Tutorial Series: Calculator

By
On February 28, 2011

In this tutorial we are going to explore more of Xcode, learn more about programming in general, and build a calculator.

I’ll start off with saying, if you have any problems with this tutorial or any of my tutorials, feel free to email me and ask questions, [email protected]. Also, don’t delete your project after you have finished this tutorial, because we will use the same project in following tutorials.

Lets get started!

We’re just going to jump right into the project today.
1. Open up Xcode and create a View-Base Application.
2. Give it a name of “Calculator”.

3. Open up your classes folder and click on your CalculatorViewController.h (header) file.
4. We are going to need to declare some IBOutlets (if you hear someone say outlets or if I say outlets, that’s what we are referring to). We will need two IBOutlets for UITextFields and one IBOutlet for a UILabel. In between the curly braces type:

IBOutlet UITextField *textfieldone;
IBOutlet UITextField *textfieldtwo;
IBOutlet UILabel *label;

5. We are also going to need a button to calculate the numbers. Outside of the curly braces type:

-(IBAction)calculate;

Good. Now we have our outlets and action declared we can go make our interface and hook them up to our items.

6. You should be familiar enough with interface builder to know how to lay your interface out (it’s easy!), so go ahead and make something that looks like this. (hint: There are five items on the screen, a button, two textfields and two labels.)

7. Now hook your outlets up to your items. Go to the connects tab in the inspector window and link the label, textfields and the button up. The button actions will be “Touch up inside”.

Your connects tab should look like this:

8. Clear the text from the main label by either double clicking the label and clearing the text, or clear the text in the textfield under the attributes tab inside the inspector window.
9. We are done with our interface. Hit Command+S or File>Save to save our work.
10. It’s time to start coding! Lets go ahead an implement our IBAction into our implementation file (CalculatorViewController.m). Type:

-(IBAction)calculate {

}

Now that we have our method that will execute when we press the calculate button, we need a way to get the values that the user enters into the textfields.

To do this we are going to create something called a NSString (NS stands for NeXTSTEP, the company who first created Objective-C). An NSString is essentially an object that holds text.

10. In between the curly braces of your IBAction type:

NSString *firstString = textfieldone.text;
NSString *secondString = textfieldtwo.text;

What we are doing here is creating an object of type NSString and naming it firstString and assigning it the value of the textfield.

11. After the two NSString declarations type:

int num1;
int num2;

Here we are creating two integers. You should know what an integer is from basic math class. In programming you can create integers and assign values to them so that you can perform mathematical equations, which is exactly what we are going to do.

12. After the two integer declarations type:

num1 = [firstString intValue];
num2 = [secondString intValue];

What we are doing in these two lines of code is taking the value of the string and turning into a number, rather than text, and assigning it to the integer.

There. Now we have all of the data that the user entered, now we need to do something with it.

13. Go back up to the integer declarations and type this line under the other two integers:

int output;

Here we are creating another integer to send the final output of our operation.

14. Now it’s time to actually perform the operation. Type:

output = num1 + num2;

That’s pretty easy to understand… We are adding num1 and num2 together and setting the value to output. That’s great, but we still aren’t sending the value back to the user so they can see it.

15. Type:

label.txt = [NSString stringWithFormat:@”%@”,output];

Here we are creating an NSString and putting the value of the output variable into that string, and then assigning that string to the label. In between the @”” you could enter anything you want to display to the user, because it is a string. “%@” is essentially a placement holder. When you use %@ it will insert the variable after the comma in that spot. For example, I could type @”Hello World %@”,variable” and it would put the variable in the spot of %@. That’s pretty easy to understand, right?

16. We made quite a bit of progress so far, let’s go ahead a save and build or project. Hit Command+s, Command+B or File>Save, Build>Build.

Uh oh…. Looks like we have an error. Lets click on the error results and find out what’s going on. Click on the error number down in the bottom right-hand corner.

As you can see it brought up a new window, displaying the error results…

It says that txt is not something in a structure or union… This is an easy fix…

17. Just go back to the line where we are assigning the final output to the label and change the “txt” to “text”

Sweet! We’re good to go now.

18. Hit Build and Run and use your calculator

As you can see, we can enter the numbers, but we can’t close the keyboard to hit the calculate button. We need to make a new button to close the keyboard so that we have access to the calculate button.

19. Go back to the CalculatorViewController.h (header file) and make a new IBAction declaration named closeKeyboard.

Now we need to implement our new IBAction into our implementation file (CalculatorViewController.m).

20. Now implement your new IBAction under the calculate IBAction and then type:

[textfieldone resignFirstResponder];
[textfieldtwo resignFirstResponder];

This will resign the keyboard, no matter which textfield you have currently selected.

Now that we have our code, we must put a button in our view.

21. Open up Interface builder and drag a new button onto the view.
22. Resize the button to the size of the view.

Great! We now have a button to close the keyboard, but now we can’t see anything else. We need to make the button transparent.

23. In the inspector window, under the attributes tab, change the button type to custom.

Now we have a transparent button, but the button is over top of all the other items. If you try to click the textfield all you will do is click the button you just created. So we have to send the button the back of the view hierarchy.

24. Hit Layout> Send to Back and it will send the button to the bottom of the view hierarchy so that you will still have access to both the button and the other items.

Also, don’t forget to link the closeKeyboard IBAction to the new button.

We’re done.

25. Hit Build and Run and try out your app.

As you can see the app crashed when you hit calculate. This is because we are using %@ in the line of code that is assigning the final output of our operation to the label. %@ is used when placing objects into a string. An integer is not an object. Therefore, we must change the %@ to %d, which will print a numeric data type in the label.

Lets try this again.

26. Hit Build and Run and try the app out now.

If everything went well, you should get something similar to this:

Before we can call this tutorial quits, we must do a little cleaning up.

27. We need to release our declarations of our outlets that we made in our header file. In your dealloc method type:

[textfieldone release];
[textfieldtwo release];
[label release];

What we are doing here is releasing the space in memory that we created for our IBOutlets. Releasing all of the objects you create is critical in iPhone development, because the iPhone has limited memory and can only handle so much.

If you had some problems with your app or are just wanting to check out my code to try to understand it better, you can find my project here: Calculator

That’s it for this tutorial. If you have any questions you can leave a comment or email me at [email protected].

Keep an eye out for the next tutorial!