In this tutorial we will learn how to add buttons to your application and associating actions to your buttons. This tutorial is mainly intended for no offence :P.
Step1- Open your xcode->View based application, name it something like ButtonDemo.Save.
Step2- Ok now lets design the UI first. On the left hand side of xcode there is a folder called Resources.
Go to Resources.Double click on the file ButtonDemoViewController.xib. Sometimes this is called as nib file.This will open your Interface builder which is a tool provided by apple for User Interface design.
Step3- Now apple provides you with its default tool set or library from where you can simply drag and drop the buttons,labels etc. UI elements onto your interface builder. So now on top toolbar of interface builder click on tools->Library it will open up the apple library for designing your app(right side of fig 1.0). In this there will be Rounded Rect button and a label. Now in your main window where a list of items is there like File Owner etc(left side of fig 1.0). There is a View. Double click on the view ,this opens a window which shows your current view(middle of fig 1.0). Drag and drop one button and a label onto this and final UI looks something like Fig-1.0 and do remember to save everything in interface builder before closing the main window.
Step4- Ok now time to write some code. Now open your ButtonDemoViewController.h file and paste the following code into your .h file. The .h file contains the declarations of variables and methods which you will implement in the respective .m file. It should look something like this.
#import <UIKit/UIKit.h>
@interface ButtonDemoViewController : UIViewController {
}
-(IBAction)sampleButtonPressed;
@end
Here what we did is declared an action named sampleButtonPressed.
Save the project Command+S.
Step5- Now time to tell the button to perform an action on press of it. In technical term how to create a link between the code and the interface builder(your view). Don't be scared!!!
Open your IB(Interface Builder) Ctrl+click on File Owner located in your main window. And a drop down will open (as shown in fig 2.0). In this there will be your function named sampleButtonPressed in Received Actions inside this drop down. Now click on the circle next to it and drag and drop it on the button in your view as shown in figure 2.0. Now your button knows that there is a method named
sampleButtonPressed in your ButtonDemoViewController class. This completes the link between
your code and the interface builder. One more thing do remember to save the changes to the interface
builder before any confusion pops up.
Step6-Now lets tell our xcode to do an action on press of this button. Go to ButtonDemoViewController.m where the action should be implemented. Copy and paste the following code to your ButtonDemoViewController.m file.
Now what we need to do is on button press the text in the label should change.
We have placed the label in our IB but not connected it to our .m class which is also referred to as the
controller class of its nib in the resources folder. So declare a label in our ButtonDemoViewController.h file.
Now copy paste the following code in your ButtonDemoViewController.h file:
#import <UIKit/UIKit.h>
@interface ButtonDemoViewController : UIViewController {
UILabel *msgLbl;
}
@property(nonatomic,retain) IBOutlet UILabel *msglbl;
-(IBAction)sampleButtonPressed;
@end
Only modification we did here is declared a UILabel called msgLbl. Open the nib file
in the interface builder and Ctrl+click on the file owner there click hold on the msgLbl , drag and drop on the label in your view as shown in Fig 3.0.
What this did is enables you to access this label by the name of msgLbl in your code.
Step6- Now its time to implement our action in our ButtonDemoViewController.m file
Now add the following line at the top of .m file just below @implementation.
@synthesize msgLbl;
What this does is generates the getter and setter for the property declared in the .h file.
Now copy and paste the function mentioned below in your .m file just above the viewDidUnload method.
-(IBAction)sampleButtonPressed{
msgLbl.text = @"Hello";//change the text of label on press of button and change it to hello.
}
Thats all! Save the application Command+S.
Command+B to build.
And finally run Command+R to run it.
If you have systematically followed the procedure above the final screens look like below.
Really good tutorial. Very well explained .
ReplyDelete