Usage of Text Fields

A text field is a user interface element that captures user input through an application.

A UITextField looks like this:

Important properties of text fields:

• Displays a placeholder when there is no user input
• Normal text
• Auto-correction type
• Keyboard type
• Return key type
• Clear button mode
• Alignment
• Delegate

Updating Properties in xib

You can change the text field properties in the xib using the Attribute Inspector in the Utility area (right side of the window).

Text Field Delegate

We can set the delegate in the UIElement Interface Builder by right-clicking and connecting it to the file owner, as shown below:

Steps to use the delegate:

• 1. Set the delegate as shown above
• 2. Add the delegate to your response class
• 3. Implement the text field delegate, important text field delegates are:

     - (void)textFieldDidBeginEditing:(UITextField *)textField
     

- (void)textFieldDidEndEditing:(UITextField *)textField

• 4. As the names suggest, the above two delegates are called when editing begins and ends
• 5. For other delegates, refer to the UITextDelegate Protocol reference manual.

Example

Below is a simple example to create a UI element.

The ViewController class will adopt UITextFieldDelegate, modify the ViewController.h file as follows:

Add the method addTextField to our ViewController.m file

Then call this method in the viewDidLoad method

Update viewDidLoad in ViewController.m as follows:

#import "ViewController.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // The custom method to create our textfield is called
    [self addTextField];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void)addTextField{
   // This allocates a label 
   UILabel *prefixLabel = [[UILabel alloc]initWithFrame:CGRectZero];
   //This sets the label text
   prefixLabel.text =@"## ";
   // This sets the font for the label
   [prefixLabel setFont:[UIFont boldSystemFontOfSize:14]];
   // This fits the frame to size of the text
   [prefixLabel sizeToFit];

   // This allocates the textfield and sets its frame
   UITextField *textField = [[UITextField  alloc] initWithFrame:
   CGRectMake(20, 50, 280, 30)];

   // This sets the border style of the text field 
   textField.borderStyle = UITextBorderStyleRoundedRect;
   textField.contentVerticalAlignment =
   UIControlContentVerticalAlignmentCenter;
   [textField setFont:[UIFont boldSystemFontOfSize:12]];

   //Placeholder text is displayed when no text is typed
   textField.placeholder = @"Simple Text field";

// Prefix label is set as the left view and the text starts after that
textField.leftView = prefixLabel;

// It sets when the left prefixLabel to be displayed
textField.leftViewMode = UITextFieldViewModeAlways;

// Adds the textField to the view
[self.view addSubview:textField];

// Sets the delegate to the current class
textField.delegate = self;
}

// pragma mark is used for easy access of code in Xcode
#pragma mark - TextField Delegates

// This method is called once we click inside the textField
-(void)textFieldDidBeginEditing:(UITextField *)textField{
   NSLog(@"Text field did begin editing");
}

// This method is called once we complete editing
-(void)textFieldDidEndEditing:(UITextField *)textField{
   NSLog(@"Text field ended editing");
}

// This method enables or disables the processing of return key
-(BOOL) textFieldShouldReturn:(UITextField *)textField{    
    [textField resignFirstResponder];
    return YES;
}

- (void)viewDidUnload {
   label = nil;
   [super viewDidUnload];
}

@end

Running the application will show the following output: