This is a “Hello World” tutorial to iOS programming. We are going to build an iPhone app that has a counter and two buttons. Tapping the “+1″ button increments the counter and tapping “-1″ decrements the counter.

So Lets begin: Open Xcode and start a new project File->New->Project. Under iOS templates select Application and then “Single View Application”.

This tutorial does not output “Hello World”. I have used the term loosely as it symbolises the first of something computer related

xcode single view iOS application

Click on “Next” and choose the options for the project. Type in “Counter” for Product Name and Class Prefix. Company Identifier can be anything, so put your company name or n/a. Select iPhone for Device Family.

xcode save new project

Click Next to save your new project. Xcode should have created 5 different files for you:
1) CounterAppDelegate.h
2) CounterAppDelegate.m
3) MainStoryboard.storyboard
4) CounterViewController.h
5) CounterViewController.m

We will make changes to the the last 3 files in this project.

Open MainStoryboard.storyboard.

xcode main storyboard

In the lower right corner is the Object Library. From the Object Library drag two “Buttons” and a “Label” to the canvas. Double click on the buttons and on the label and change their titles to the following.

xcode add buttons

Now we need to create outlets and actions to connect our buttons to the code. There are a few different ways to create actions and outlets in Xcode. The easiest one is to click on the assistance editor button.

xcode assistance editor button

This will open CounterViewController.h to the right of the storyboard. Click ctrl and drag from each button to the area between @property and @end in the CounterViewController.h file. A pop up will appear, select Connection=action and set Name=decrement for the “-1″ button and Name=increment for “+1″ button. Press Connect to create the action.

iOS7 xcode set action

Do the same for the label but set Connection=outlet and Name=label. We also need to add a counter to keep track of our value. Again in CounterViewController.h under @interface add the following code “@property (nonatomic) int counter;” After adding all this CounterViewController.h should look like similar to this.


1
2
3
4
5
6
7
@interface CounterViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *label;
@property int counter;
- (IBAction)increment:(id)sender;
- (IBAction)decrement:(id)sender;

@end

Open CounterViewController.m find the decrement and increment methods and implement them. They should look like the following when done.


1
2
3
4
5
6
7
8
- (IBAction)decrement:(id)sender {
    self.counter -= 1;
    [self.label setText:[NSString stringWithFormat:@"%d", self.counter]];
}
- (IBAction)increment:(id)sender {
    self.counter += 1;
    [self.label setText:[NSString stringWithFormat:@"%d", self.counter]];
}

The app is ready to run. Go to Product->Run and wait for the simulator to load. Every time you press +1 button the number in the label increases by 1, pressing -1 button decreases the counter by 1.

iOS7 hello world app running

Great! Your app is running and you have successfully created your first simulated version of an iOS Application.

Where do we go from here?

If you want to delve deeper into Objective-C Programming check out this great beginners tutorial series: Beginners iOS Development: Objective-C Guide for Developers. If you’re comfortable with Objective-C you might wish to check out our: iOS Application Development Tutorials.

Enjoyed this post?

Subscribe to our RSS Feed or Follow us on twitter to keep up to date with the latest from iOS-Blog. Remember, Sharing is caring so please click one of the following options:

Tags: , ,