Learn to Code iOS Apps 3: Your First App

Controlling the View Controller

Xcode wrote some basic starter code for you, so start by opening the file ViewController.h to have a look at the code for the view controller:

Remember that a header file is used to declare different parts of the program. Declaring means to say that it exists, but doesn’t give the actual implementation details.

You need some way to refer to the two labels you added earlier. This is called an outlet in Xcode, where some variable in the view controller refers to some user interface element in the storyboard view.

Near the top of the header file will be a line like this:

@interface ViewController : UIViewController

Change that line and add a few additional lines so it looks like this:

@interface ViewController : UIViewController {
  IBOutlet UILabel *scoreLabel;
  IBOutlet UILabel *timerLabel;
}

The code above will set up instance variables called scoreLabel and timerLabel that you can use later on to programatically change the label text. IBOutlet is a hint to Xcode that you want it to be an outlet and UILabel is the class name for a text label.

Next, add the declaration for a method called buttonPressed. This line should go just above the line that says @end:

- (IBAction)buttonPressed;

IBAction is another hint telling Xcode that this method will be connected to some action, such as a button press or a switch being toggled. After you fill in the implementation, you can connect the “Tap Me!” button to call the buttonPressed method.

Switch over to ViewController.m and have a look at the implementation code.

Xcode has stubbed out a few methods. One is called viewDidLoad, which gets called after the view has loaded and is ready to be displayed. The didRecieveMemoryWarning method gets called when the device is running low on memory; there’s no need to worry about this method in your tutorial app!

It’s time to add the implementation for the buttonPressed method. Add the following code toward the end of the file, before the line that says @end:

- (IBAction)buttonPressed {
  NSLog(@"Pressed!");
}

Perfect! The NSLog method will write out to the console when the method is called so you’ll be able to tell that everything is working as expected when you run your app.

Connecting the Dots

You’ve set up the look of the app in the storyboard and set up the view controller code. Now it’s time to connect the action and outlets to get the storyboard and code talking to each other! :]

Open up MainStoryboard.storyboard. With the cursor over the “Tap Me” button, hold down the Control key, then click and drag to anywhere in the green background. You will see a blue line connecting the button to wherever you drag your cursor:

When you release the mouse or trackpad button, a little window will pop up. Hey, cool — there’s the buttonPressed method that was created earlier! Select it now to hook the two together:

Because you declared buttonPressed with the IBAction keyword, Xcode offers it as a choice here. If you don’t see buttonPressed in the window, go back one step and check your code in the ViewController.h header file.

Time to test out the button! :] Run the app and tap the button a few times. Your buttonPressed method should be getting called and you will see some debugging output, as below:

Great, a working button! You’re closing in on your completed app!

Note that to connect an action you held down the control key, then clicked and dragged from the button (the view) to the view controller (in the background area).

However, to connect an outlet to the label, you need to do the opposite: hold down the control key, then click and drag from the view controller (represented by the round yellow icon at the bottom) to the “Score” label , just like below:

Yup, there’s scoreLabel, which you created in your code earlier! Select it now:

Now the label is connected and accessible from the code! Do the same thing to connect the outlet to timerLabel. You need to control-click and drag from the view controller to the “Time: 30” label this time.

Okay, you have things connected and some console debugging code setup in the app. But you still need the countdown to happen, and the score to change when the player taps the button. Head on in to the next section to do this now! :]

Labeling Labels

You’ve already made sure the button works, so it’s time to do the same with changing the label’s text. In ViewController.m, replace what you previously wrote for the buttonPressed method with this code:

- (IBAction)buttonPressed {
  scoreLabel.text = @"Pressed!";
}

The scoreLabel variable is the outlet connected to the UILabel in the storyboard. Now when the button is pressed, the label text should update.

Build and Run the app to see for yourself that the buttonPressed gets called and properly updates the label! Neat, eh? :]

You’re setting the label text from code, but there are many more interesting attributes such as text color, size, alignment, and others that you can access programatically. The iOS Developer documentation is a great way to learn more about all the things your UILabels and UIButtons can do.

Testing, Testing, 1, 2, 3

Now that the interface is set up and the code is running, pause for a moment and think about the game mechanics.

There are a few things you’ll need to keep track of:

• The number of times the button was pressed
• The number of seconds remaining
• Some way to keep track of time

Time to add a few more variables! Add the code below to ViewController.h:

@interface ViewController : UIViewController {
    IBOutlet UILabel *label;
    IBOutlet UILabel *timerLabel;

    // Add the next three lines
    NSInteger count;
    NSInteger seconds;
    NSTimer *timer;
}

In the code above, the “count” variable will hold the number of button taps, and “seconds” will hold the number of seconds remaining. The NSInteger type makes the most sense since it can store integers (whole numbers) from zero up to over two billion. Here’s hoping that no one who tries your app can tap that many times in 30 seconds! :] The “timer” variable will be dealt with in the next section.

When the player taps on the button, you need to increase the tap count and update the label on screen with the new count. Change the buttonPressed method as below:

- (IBAction)buttonPressed {
  count++;

  scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];
}

The code above probably looks a little obtuse, so break it down piece by piece:

• “Score” – The plain old word “Score”
• “\n” – A line break. Everything else after this will be on the next line
• “%i” – A placeholder for an integer. In this case, the “%i” will be replaced by your variable count

Build and run the app! Tap the button a few times, and you should see your score increase as you tap!

Well, you can’t give your player unlimited time to tap the button, can you? :] Looks like you need a countdown timer!