Simple Calculator iOS Application

The First assignment that I did when following the Stanford iPhone / iPad Development course was the Simple Calculator iOS Application. In this post, I am going to share every step in making this mobile application.

Create a New Project

First of all, launch the Xcode and create a new project using “Single View Application“.

Under Product Name, you may put “Calculator”. Put your name or your company’s name under organization name.

As for Company Identifier, it is usually the reverse characters of a web domain that you own. For example, if you own “abc.com” then you put it as “com.abc”. If you do not own any web domain, you can just put any domain such as “com.example”. It is not important for now if you just want to run the application on simulator. But, when you want to run the application on your mobile device, you should get your own domain. You will also need to do some provisioning settings on the Apple Developer Portal, attach the provisioning certificates on your Xcode before you can run it on your device and also submit the application to Apple. I will do tutorial on that in a later post)

Under the Class prefix, you can put it as “Calculator”. Choose “Universal” under Devices as we will build both iPhone and iPad app. Tick “Use Storyboards” and “Use Automatic Reference Counting (ARC)“. We want to use Storyboard as it is an important technology that simplifies the implementation of MVC in iOS. Before iOS 5, the developers have to take care of every object creation and destruction to manage the memory. But, Apple has released a new technology calls ARC which simplifies the memory management in Xcode.

After you click “Next”, you will be asking to choose a place that you want to create this project. I normally put it under a “Developer” folder just to keep everything organized. After you click “Create”, you will see a screen like the below screen shot:-

Your project will have 2 AppDelegate files (.h, .m), 2 storyboards (for iPhone and iPad) and 2 ViewController files (.h, .m). .H is a header file which can be accessed by public while .M is a implementation file which can only be accessed by the class itself (private).

The storyboards will contain all the views for our controllers. So, the initial project creation has given us both the view and also controller. We will create our own model later.

Creating Our Views

We will leave iPad storyboard for now until the end of the tutorial. So, let’s start with the iPhone storyboard. From the storyboard, you will see an iPhone size view controller object on the screen. When you click the “view” inside the view controller object, you may see the height for the view is 548. It is actually the iPhone 5 size. We can click a small screen toggle button on the bottom of the page to toggle it to normal iPhone height which is 460. We will optimize for iPhone 5 later. But for now, we just want to keep it simple and start with normal iPhone size.