iOS Tutorials / The old ways

UIButton tutorial – example how to use the Button in XCode for iPhone

iOS Tutorials / The old ways IMG_0558.JPG

I this tutorial you will see how to use Buttons (UIButton) and how to change text of the Label (UILabel) after pressing the button.

After finishing the tutorial you should have some basic idea about how this thing works. Have fun and leave some feedback :-)

First of all you need to create a new project. Let’s say View-Based Application and to make everything easier to explain, call it “TutorialProject”.

Open the TutorialProjectViewController.xib file. In Interface Builder place View into the new window (Library » Cocoa Touch » Windows, Views & Bars) and place the Button and Label on the view (UIButton, UILabel).

Open the TutorialProjectViewController.h file, the code should look like this:

Please place the code (lines 12 – 18 and 21 – 23) into your file. The first piece of code is creating new variable which we will use to control the text in UILabel after pressing the button and second part of the code is the declaration of the function (pressMyButtonDudeFunction) which will be called after pressing your button.

Open the TutorialProjectViewController.m file, the code should look like this:

In the first part (lines 13 – 15) we are synthesizing the label variable (I am a bit lame and I forgot to synthesize the label variable in the included source code :-), sorry for that). In the second part (lines 17 – 22) we are actually writing some code which is the action after pressing our button. Third (lines 72 – 74) part is releasing the label variable from the memory.

this is just setting the text property for label to say “Heeey nice work!!”

Now when we have all the code, we can connect everything with the Interface Builder

Open the TutorialProjectViewController.xib file once again and follow the pictures bellow.

Connecting the Button to the File's owner

Right-click on the button and you should see menu like the one above. Drag the small circle next to the Touch Up Inside and drop it over the File’s Owner icon in the second window.

Connecting the Button to the function

After releasing the mouse over the File’s Owner icon, you should see smaller menu with the name of your new function, in this case pressMyButtonDudeFunction, select it and we are done with the button.

Now we need to connect Label (UILabel) to the variable in your code.

Connecting label to the variable in the code

This time right-click on the File’s owner icon and you’ll see almost the same menu like in the first case when we were connecting the button. Drag the little circle next to the label in Outlets and drop it over your label in the View.

Save everything in the interface builder and go back to the XCode. Hit “Build & Go” button and wait for iPhone simulator to show you how easily you can build an app in iPhone SDK (at least it wasn’t Hello World!! :-)))

Please feel free to download the example here: Tutorial files download. If this tutorial was at least a little bit useful for you, I’ll really appreciate any back-link to this article you can provide me with :)

Working app

Ondrej Rafaj

Ondrej is a developer, director in several startups and manages XPROGRESS just like that, just for fun!

More Posts - Website - Twitter

Categories: iOS Tutorials, The old ways

Post a new comment