iPhone UITextField dynamically moving with keyboard tutorial

Hello everyone,

This is a quick IOS tutorial to solve a couple of common problems with the use of UITextFields and the on-screen keyboard which appears when a user begins editing text. In many situations the location of a textfield may be at a low point in your view so that when the user selects the text field the on-screen keyboard will appear and cover the text field. In my early days of development I would just rearrange the view so that the text field was higher up in the view and would not be covered but this tutorial is a more legitimate solution. Another piece of this tutorial is dismissing the keyboard by selecting anywhere outside of the keyboard as this is another common problem.

I have created a very simple iPhone project to demonstrate my code which you can download at this link: Project

NOTE: I realize now that I named the project UITextView…. rather than UITextField…. but I don’t feel like adjusting that and re-uploading it.

Here are a couple of screen shots from the sample:

 

 

 

 

 

 

 

Keyboard shown

 

 

 

 

 

 

 

Lets get started:

First off this project is very simple and I’ve stripped out everything but the essentials.

Open up UITextViewViewTutorialViewController.h

@interface UITextViewViewTutorialViewController : UIViewController {
	IBOutlet UITextField *commentTextField;
}

In this file the only thing to pay attention to is our declaration of the IBOutlet connecting to the text field as well as declaring this view controller as a UITextFieldDelegate.

Next open up UITextViewViewTutorialViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];

	//Set the text field's delegate to be self so we can intercept the
	//didBeginEditing and didEndEditing delegate functions
	commentTextField.delegate = self;
}

This crucial step is to set the text field’s delegate to self so we intercept its delegate functions. We could have also done this in Interface Builder but I prefer to do it in code;

There are two delegate functions which we will be handling for our text field. One when the user selects the text field for editing, which will cause the keyboard to appear, and one when the text field is “deselected”, or resignsFirstResponder.

- (void)textFieldDidBeginEditing:(UITextField *)textField
{
	//If we begin editing on the text field we need to move it up to make sure we can still
	//see it when the keyboard is visible.
	//
	//I am adding an animation to make this look better
	[UIView beginAnimations:@"Animate Text Field Up" context:nil];
	[UIView setAnimationDuration:.3];
	[UIView setAnimationBeginsFromCurrentState:YES];

	commentTextField.frame = CGRectMake(commentTextField.frame.origin.x,
						TEXTFIELD_ACTIVE_Y_POSITION	,
						commentTextField.frame.size.width,
						commentTextField.frame.size.height);

	[UIView commitAnimations];
}

Here is the delegate function telling us that the text field has been selected and the keyboard will appear. I am just setting the frame of the text field to a Y position which will place it above the keyboard but I am also using an animation to make this look a little better.

The other delegate function looks the same as this and is when the text field is no longer going to be edited and the keyboard will return. In that function the only difference is the Y position is set to its original spot near the bottom of the view.

Finally:

In this example I’m not using a keyboard with a “done” button on it so there is no way for the keyboard to be minimized. A simple way to do this is to allow the user to minimize the keyboard by simply touching outside of the keyboard or text field.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	//If the user touched on our view we set the text field to resign
	//first responder to minimize the keyboard
	[commentTextField resignFirstResponder];
}

This function is a part of our UIViewController and intercepts any touches on its view. In this example any touch intercepted will be a touch that is not on the keyboard. We simply call “resignFirstResponder” on our text field to minimize the keyboard.

Well thats it. I hope this tutorial helps anyone who was struggling for a good solution to this problem and I’m sorry about the incorrectly named project.

If you have any questions, suggestions or you found this tutorial helpful I would appreciate a comment or send me an email: Email Me

Thanks
-Ryan