In this tutorial we’re going to discuss and implement the basic UI elements such as text fields, labels and buttons.
Overview
Labels as we had seen in the first tutorial itself, are used for displaying static content.
TextFields are UI elements that enable user input.
Buttons are used for handling user actions.
Buttons and Labels we had implemented at a basic level in the first tutorial. Let’s look into UITextField.
iOS UITextField
UITextField supports the use of a delegate object to handle editing-related event handling. When certain actions occur, the UITextField will call delegate methods that allow its behaviour to be customised and controlled. For this to occur we need to add the UITextFieldDelegate Protocol.
Some delegate methods include :
-(void)textFieldDidBeginEditing:(UITextField *)textField-(void)textFieldDidEndEditing:(UITextField *)textField
We can customise the UITextField from the attributes inspector as shown in the image below.
The Placeholder attribute needs the hint text as the input.
Clear button attribute is set to Appears while editing. On clicking the button on the right of the textfield it deletes all the characters from the TexField. The Keyboard type can be chosen from the numerous options available in the dropdown. These attributes can also be set programmatically. We’ll add a UITextField programmatically too.
Implementation
We’ll add a Label, Button and TextField onto the ViewController. Drag the TextField to the ViewController dock file’s owner button. And choose delegate. Open up the assistant editor and drag the three outlets onto the header file and name them accordingly. Your screen should look like the one given below.
The Main.storyboard ViewController should look like the one given below
The red lines you see are the margins between the UI elements on the screen. They’re set by holding control button and dragging the line from one UI element to the other. We can then chose from the list of options.
The ViewController.h code is given below:
|
1 2 3 4 5 6 7 8 9 10 |
#import <UIKit/UIKit.h> @interface ViewController : UIViewController <UITextFieldDelegate> @property (strong, nonatomic) IBOutlet UITextField *myText; @property (strong, nonatomic) IBOutlet UITextField *customText; @property (strong, nonatomic) IBOutlet UIButton *button; @property (strong, nonatomic) IBOutlet UILabel *label; -(IBAction)showTextField; @end |
We’ve defined a custom method that would be implemented later to handle the button action. Also we’ve added a property for a UITextField that would be added programmatically.
Building and run the project at this point. You’ll see that you’re able to write in the textfields but you’ll be unable to dismiss the keyboards since the return key and the tap outside to dismiss are not configured.
If the return key is clicked the protocol will call textFieldShouldReturn: delegate method in our class. We’ll dismiss the keyboard by calling the resignFirstResponder method on the textfield object.
The ViewController.m is defined below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self addTextFieldWithDifferentKeyboard]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)showTextField { self.label.text = self.myText.text; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; if(![touch.view isMemberOfClass:[UITextField class]]) { [touch.view endEditing:YES]; } } - (BOOL)textFieldShouldReturn:(UITextField *)textField { NSLog(@"You entered %@",self.myText.text); [self.myText resignFirstResponder]; return YES; } -(void) addTextFieldWithDifferentKeyboard{ self.customText = [[UITextField alloc]initWithFrame: CGRectMake(10, 200, 300, 30)]; self.customText.delegate = self; self.customText.borderStyle = UITextBorderStyleRoundedRect; self.customText.keyboardType = UIKeyboardTypeNumberPad; self.customText.placeholder = @"Number pad keyboard"; self.customText.returnKeyType = UIReturnKeyDone; self.customText.clearButtonMode=UITextFieldViewModeWhileEditing; self.customText.font = [UIFont systemFontOfSize:14]; self.customText.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; [self.view addSubview:self.customText]; } @end |
To dismiss the keyboard when tapped outside, the following code snippet is used.
|
1 2 3 4 5 6 7 8 9 |
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; if(![touch.view isMemberOfClass:[UITextField class]]) { [touch.view endEditing:YES]; } } |
When we’re typing in a text field, the isEditing property of the text field is set to YES. The endEditing: message is passed to a view and all of its subviews. If we pass YES, it forces any and all view objects to call resignFirstResponder, in turn dismissing the keyboard.
A TextField is added programmatically using [self addTextFieldWithDifferentKeyboard]
CGRectMake(topX, topY, width, height) is used to define the layout. The other attributes are similar to the one chosen from the attributes inspector. We’ve used a Number pad input type keyboard. There are many input types of the TextFields such as :
- UIKeyboardTypeASCIICapable
- UIKeyboardTypeNumbersAndPunctuation
- UIKeyboardTypeURL
- UIKeyboardTypeNumberPad
- UIKeyboardTypePhonePad
- UIKeyboardTypeNamePhonePad
- UIKeyboardTypeEmailAddress
- UIKeyboardTypeDecimalPad
- UIKeyboardTypeTwitter
Note: The simulator keyboard may not pop up in some cases. This is due to an an already present hardware keyboard. Go to Simulator->Hardware-> Uncheck hardware keyboard. It would work fine then
The button action is defined to change the label text to the TextField that was defined in the ViewController.
The output of the application in action is shown below.
This brings an end to this tutorial. You can download the BasicUI XCode Project from the link given below.