There are no active ads.


Introduction to iOS Development: Let’s Create a Calculator!

How do you develop apps for iOS?  It’s a common question that many computer enthusiasts ask, and one we here at TechnoBuffalo hope to answer with this series of posts.

Learning how to develop software can be one of the most intimidating prospects for the average computer user, and with the growing saturation of applications in mobile marketplaces, it is becoming increasingly difficult to get your work noticed. That’s what this series is for, helping you learn iOS development from a conceptual perspective. No prior knowledge of computer programming will be necessary. Over the coming weeks, we’ll examine the iPhone’s ability to deliver immersive, intuitive content, a unique opportunity for both developers and consumers.

Today, we’ll be creating a simple  calculator. Utilizing mathematics is an essential part of development, so it’s guaranteed that we will learn some valuable lessons in coding along the way.

1.  First, we must open up Xcode 4, Apple’s latest Integrated Development Environment. Select New Project and follow the on-screen prompts until you are met with the template page. Select View-Based Application and make sure that you are targeting the iPhone.

2.  After following Xcode’s instructions on setting up the application, entitle the program Calculator and save the file in a convenient place, preferably one that can be easily remembered and accessed in the future.

3.  Today, we’ll only need to manipulate the project’s View Controller. Head on over to the initialization file (CalculatorViewController.h) and begin to add some of the code below. You’ll notice that we are creating IBOutlets, or Interface Builder Outlets, which are creating the code for variables that we will use later.

4.  Now, it’s time to head over to our implementation file (CalculatorViewController.m), which will define how the variables will react to user interaction. Begin by adding the code below.


5.  Next, we will build our application’s interface. Go to the application’s View Controller. Drag in three labels, two buttons, and two text fields formatting them like they appear below. The only difficult part is clearing one of the labels and putting it next to the equal sign.

6.  Because we are creating a calculator, it would be nice to make it easy for users to enter numbers. Under the Text Field’s attributes, head on down to keyboard. From the menu, select Number Pad. This will give users a large area to enter numbers.

7.  Now, it is time to link up our code with the interface. Click on File’s Owner and head over to the Outlets pane. We will need to connect the code by dragging the code to the correct elements. For example, “Label” goes with the black label that we created. Connect the two text fields we defined in code with the two text fields we created in the interface. Finally, link the calculate button to the code that we defined in the initialization file and then do the same with the clear command.

8.  That’s it for this week, a short and simple application. Go ahead and run the program in the iOS Simulator. Feel free to play around, show it off to your friends, and make them extremely jealous with your masterful coding skills.


If you have any questions about the topics discussed in this lesson, feel free to voice them in the comments below. We will do our best to ensure that you have a relatively painless experience developing for iOS. Stay tuned for the next installment of this series, which is released weekly.

To read previous installments from this series, check the links below.

Jack McGrath

Rooted in his childhood obsession with dismantling and reassembling gizmos and gadgets around the house, Jack McGrath's knowledge of programming,...