Building A Simple App

In this blog, I’m going to give you a brief guide on how to build an IOS application. Before following along with this, you’re going to want to make sure that you have a Mac computer with Xcode installed. The Xcode version that I’m using is 6.4.

At the end of this tutorial, you will have an app that says Hello after a button is pressed.

Create a new Xcode project and choose “Single View Application”.

Give your project a name and be sure to select Objective-C as the language.

After your Xcode project loads up, the first step will be to add a button and label to the storyboard. To get to the story board, simply select it on your menu on the left side of the screen.

If you are not seeing the menu on the left, you can reveal it with the navigation control on the top right portion of your screen.

Now add one label and button to the storyboard. This is done by dragging and dropping one of each.

It doesn’t matter where you have placed these, but here’s how I have mine laid out:

I’ve also disabled size classes on mine.

Size classes are a relatively new feature on Xcode that allow you to make a universal app. These apps will run on any iOS device from iPhone 4s to an iPad air 2. For the purposes of this exercise it’s easier to just focus on iPhones for now. When you develop for multiple devices, you have to add sizing constraints to account for the different screen sizes. These add mathematical formulas to automatically adjust the spacing ratios.

Let’s change the button and label to say something more interesting. This can be done by clicking on one of the objects and then the attributes inspector (shown in the image below).

IBOutlets and IBActions

Right now, if you run the application, you will get a button and a label that don’t do anything. We are going to change that by adding IBOutlets and IBActions.

Navigate over to ViewController.h file.

In the .h file, we will declare an instance method of IBAction. This is a keyword that allows you to connect your code to the button on the storyboard. IBAction is part of the Cocoa Touch Framework. Cocoa Touch already has the interaction between the users finger and the screen programed for us. This means that we only need to be concerned with coding what we want to happen after the user taps the button that we’ve put into place. I’ve went ahead and named my method buttonClick.

Now let’s connect our method declaration to the button on storyboard. Navigate back to storyboard. Click on the button, hold your control key and then drag the arrow to ViewController.

A window will pop up and you will see buttonClick as an option. Go ahead and click on buttonClick. The button is now connected to an IBAction method. But, there is no code behind the scenes to generate an actual action. Our ultimate goal is to have the Label change after the Button is pressed. Before we complete the code for buttonClick, let’s generate an IBOutlet for the label. Navigate back to ViewController.h and copy the code below.

An IBOutlet does not take in user action like an IBAction. Instead, it connects properties. We will connect the IBOutlet to the action generated by IBAction. First, lets go back to the storyboard and connect the IBOutlet to the label.

To get the side by side view above, simply click on the button shown below in the top right hand corner of the screen.

Now click on the property and hold the control key while dragging over to the label. Now that the connection is established we can complete our code. Go back to the ViewController.m file.

Implement the code in the screen below.

self is used because we are referring a property within the same class. helloLabel is the identifier for the IBOutlet that we created earlier. text is a subclass of UILabel and tells the compiler that we are providing plane text to display.

Now hold on to the command key and hit R to run the program. You should be able to click the button and have the label generate Hello.