XCode Tutorial Practice 2: Buttons, Textboxes and Handling User Interaction

We’re taking a practical approach to learning iOS programming. This means lots of hands on work and practice!
In order to benefit the most from these lessons, you should open XCode and try to follow along.

This is part 6 of the lesson plan. Click here for the entire Learning Plan.

In this tutorial, we’re going to explore some additional UIElements and how to handle user interaction!

I highly recommend that you follow along on your own computer to get the most out of these lessons.

We’re going to start a brand new single-view project. If you forgot how to do this, please refer to the tutorial on creating your first XCode project.

Adding a Button to the View

Let’s start with adding a UILabel, UITextField and UIbutton to our view!

First let’s go into Interface Builder to edit Main.storyboard. Click on that file now in the Navigator.
If you’re using XCode 4, your storyboard file may be named differently.

The editor area is going to change to Interface Builder.

We’re going to add a UILabel to the view just like in our Hello World demo. Search for “UILabel” in the Library pane in the lower right hand corner and drag the UILabel onto your view.

Next, repeat the same steps but this time, search for “UITextField” and drag and drop that element onto your view.

Next, repeat the same steps but this time, search for “UIButton” and drag and drop that element onto your view.

You should end up with a view with a label, textfield and button.

Let’s put some text on this button through the property inspector on the right hand side. Since we’re going to make the button change the text of the label, let’s add the text “Switch Text” to our button. You can also take this opportunity to widen your UIButton and UILabel elements a little bit by adjusting it in Interface Builder.

Exposing UIElements to the ViewController

ViewController is the class that manages the view so naturally, it’s going to be the place we add the code to handle the button click. However, before we can do that, the ViewController needs to have references to the UILabel and the UIButton that we added to the view; otherwise, how does it know about them?

Interface Builder has an easy drag-and-drop way for us to create the properties in our ViewController and also assign the UIElements we create in Interface Builder to these properties of the ViewController. This way, our ViewController will have references to these UIElements and it can do things with them!

First, click the ViewController.xib file in your navigator so that you see the Interface Builder view.

Next, you need to click an icon called the “Assistant Editor” located in the upper right corner of XCode. It kinda looks like a butler icon. Check the screenshot below.

Clicking that screen will give you a split window view.
On the left hand side, you’ll have the Interface Builder view of ViewController.xib.
On the right hand side, you should be looking at ViewController.h.

If you’re not, you can change it like in the screenshot below.

Once you have ViewController.xib on the left hand side and ViewController.h showing on the right hand side, all you have to do is hold down “control” on your keyboard, click your UILabel on the left hand side and drag it over to the right hand side, and drop it on an empty line under “@interface ViewController : UIViewController”.

As you’re dragging, you should see a blue line follow your mouse like this screenshot:

This will pop-up a little dialog asking you to name the property that it’s about to create for you.
Type in “helloLabel” and click “Connect”

The end result is that your ViewController.h will have this code:

#import 

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *helloLabel;

@end

Next, you’re going to do this for the UITextField element. So hold down “control” on your keyboard, click your UITextField on the left hand side and drag it over to the right hand side, and drop it on an empty line under the label property. I named this property “customTextField”.

Now your ViewController.h will have this code:

#import 

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *helloLabel;

@property (strong, nonatomic) IBOutlet UITextField *customTextField;

@end

Next, you’re going to do this for the UIButton element. So hold down “control” on your keyboard, click your UIButton on the left hand side and drag it over to the right hand side, and drop it on an empty line under “@property (strong, nonatomic) IBOutlet UILabel *helloLabel;”. I named this property “clickyButton”.

Now your ViewController.h will have this code:

#import 

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *helloLabel;

@property (strong, nonatomic) IBOutlet UITextField *customTextField;

@property (strong, nonatomic) IBOutlet UIButton *clickyButton;

@end

Great! Now you’ve just created three properties in the ViewController class that reference the three UIElements in your ViewController.xib. This allows you to access the UILabel, UITextField and UIButton from your code in the ViewController object.

Let’s try that now; go to ViewController.m
(You can go back into single view now)

In the method “viewDidLoad”, we’re going to add some code to change the text of the UILabel and the UIButton.

Add the below two lines into your viewDidLoad method so that it looks like this:

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    self.helloLabel.text = @"default text";

    [self.clickyButton setTitle:@"Clicky" forState:UIControlStateNormal];
}

If you run your app now, you’ll see this (widen your UILabel in Interface Builder if your text is cropped):

Handling Button Clicks

To handle a button click, we need a method in ViewController.m that the contains code we want to be executed when the button is clicked. Then we connect this method to the button click event of the UIButton in our view.

Interface Builder provides an easy drag and drop way to create this method and all we need to do is fill in the code.

So once again, turn on Assistant Editor view where we have two panes. The left hand side should have ViewController.xib and the right hand side should show ViewController.m.

When we were creating properties, we had ViewController.h on the right pane, but this time, we’re creating a method to handle the button click so we want ViewController.m on the right hand side.

If you have trouble changing the file on the right hand side, click the button circled in this screenshot:

Once you have both the xib file and the .m file visible, hold down “control” on your keyboard, click and drag the UIButton in the view over to the right hand side and drop it on an empty line just before “@end”. I named my method “handleButtonClick”.

You’ll end up with a new method created in ViewController.m that looks like this:

- (IBAction)handleButtonClick:(id)sender {
}

Now whenever the button is clicked, it will execute the code in this method!

Changing The Label Text

Next, let’s change the text of the label to whatever is in the textfield when the Clicky button is clicked.

In the “handleButtonClick” method that we created previously, we’re going to add the single line of code below.
Also, we’re going to add a method below “handleButtonClick”, called “touchesBegan”.
Follow the code sample below:

- (IBAction)handleButtonClick:(id)sender {
    self.helloLabel.text = self.customTextField.text;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.customTextField resignFirstResponder];
}

Now if you run the app, you’ll be able to type in some text into the textfield, tap outside to dismiss the keyboard and then click the button to change the Hello label text.

Frequently Asked Questions

If you have a question related to this tutorial or need me to clarify something, please ask in the comments below and I’ll update this FAQ section for everyone’s benefit.