iOS : Sample User Interaction using Button, TextField and Label

Here we are going to create a sample of User Interaction to display the text on UILabel after clicking on UIButton. For creating the sample we need to add UILabel, UITextField and UIButton using drag and drop on view.

Adding elements 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.

Now, add all the elements on the view.

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 “Button” to our button. Similarly change the text of UILabel with "Default Text".

You can also take this opportunity to widen your UIButton and UILabel elements a little bit by adjusting it in Interface Builder.

After adding elements view will look like this:


At first, To create the sample we need to learn some important things which we will use in our project:

UIViewController: The UIViewController class provides the fundamental view-management model for all iOS apps. You rarely instantiate UIViewController objects directly. Instead, you instantiate subclasses of the UIViewController class based on the specific task each subclass performs. A view controller manages a set of views that make up a portion of your app’s user interface. As part of the controller layer of your app, a view controller coordinates its efforts with model objects and other controller objects—including other view controllers—so your app presents a single coherent user interface.

IBOutlet: Identifier used to identify a property so Interface Builder can synchronize the display and connection of outlets with Xcode.

IBAction: Type qualifier used by Interface Builder to synchronize actions. Use this type as the return type of any action methods defined in your project.

UILabel: The UILabel class implements a read-only text view. You can use this class to draw one or multiple lines of static text, such as those you might use to identify other parts of your user interface. The base UILabel class provides control over the appearance of your text, including whether it uses a shadow or draws with a highlight. If needed, you can customize the appearance of your text further by subclassing.

UITextField: A UITextField object is a control that displays editable text and sends an action message to a target object when the user presses the return button. You typically use this class to gather small amounts of text from the user and perform some immediate action, such as a search operation, based on that text.

UIButton: An instance of the UIButton class implements a button on the touch screen. A button intercepts touch events and sends an action message to a target object when tapped. Methods for setting the target and action are inherited from UIControl. This class provides methods for setting the title, image, and other appearance properties of a button. By using these accessors, you can specify a different appearance for each button state.

UIView: The UIView class defines a rectangular area on the screen and the interfaces for managing the content in that area. At runtime, a view object handles the rendering of any content in its area and also handles any interactions with that content. The UIView class itself provides basic behavior for filling its rectangular area with a background color. More sophisticated content can be presented by subclassing UIView and implementing the necessary drawing and event-handling code yourself. The UIKit framework also includes a set of standard subclasses that range from simple buttons to complex tables and can be used as-is. For example, a UILabel object draws a text string and a UIImageView object draws an image.


Now, here we provide Source Code of our project:

MSViewController.h file: here we create interface of our class

@interface MSViewController : UIViewController

@property (retain, nonatomic) IBOutlet UILabel *helloLabel;
@property (retain, nonatomic) IBOutlet UITextField *customTextField;
@property (retain, nonatomic) IBOutlet UIButton *clickyButton;

- (IBAction)handleButtonClick:(id)sender;
- (IBAction)touchoutside:(id)sender;


and the implementation class code will be in MSViewController.m file, the name of the implementation file will be same as name of interface: 

@implementation MSViewController
@synthesize helloLabel;
@synthesize customTextField;
@synthesize clickyButton;

- (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];

// this method will generate action when the button will be cilcked
- (IBAction)handleButtonClick:(id)sender {
   self.helloLabel.text = self.customTextField.text;

// this method will be called when user click outside the UITextField to disable the keyboard
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.customTextField resignFirstResponder];


now, coding section will be completed, click on run button, an iOS Simulator will be generated, for example see image on top.

now, enter some text on text field on the simulator and after click on Button,  after clicking the button you will see that the label's text "Default Text" will be replaced by your's text which is written in the text field. 

Example here:


  Modified On Nov-23-2017 11:32:34 PM

Leave Comment