iPhone App Tuts - Free iPhone App Tutorials & Resources

Do you often think about that, if a text field is at the bottom of the view how the user will input? When user will tap on text field the text pad will appear and text field will be hidden.  Well, here is the solution: You can animate your text field upwards.

Declare a UITexField instance and map it with the actual text field through interface builder. See the image below.

Now write an action function and map it to the textfieldEditing Did Begin event as shown in following figure. Function Prototype is given below.

1

-(IBAction)startEdit;

This function calls whenever a user taps on text field to start editing. Now you need the main code which can move the Text field upward. Here is the following:

1
2
3
4
5
6
7
8
9
10
11

-(IBAction)startEdit {
[UIViewbeginAnimations: @"moveField"context: nil];
[UIViewsetAnimationDelegate: self];
[UIViewsetAnimationDuration: 0.5];
[UIViewsetAnimationCurve: UIViewAnimationCurveEaseInOut];
txtField.frame = CGRectMake(txtField.frame.origin.x,
txtField.frame.origin.y - 200,
txtField.frame.size.width,
txtField.frame.size.height);
[UIViewcommitAnimations];
}

You can change the value 200 according to your view, how you want to move your text field.

When user will end the editing you need to re-adjust the text field to the previous location. For that You have write another action function and map it with the text field Did End on Exit action as shown in the figure below.

Write the following code in the action function:

1
2
3
4
5
6
7
8
9
10
11
12

-(IBAction)endEdit {
[txtFieldresignFirstResponder];
[UIViewbeginAnimations: @"moveField"context: nil];
[UIViewsetAnimationDelegate: self];
[UIViewsetAnimationDuration: 0.5];
[UIViewsetAnimationCurve: UIViewAnimationCurveEaseInOut];
txtField.frame = CGRectMake(txtField.frame.origin.x,
txtField.frame.origin.y + 200,
txtField.frame.size.width,
txtField.frame.size.height);
[UIViewcommitAnimations];
}

Function resignFirstResponder makes the keypad disappear.

You can move any sort of view, which is inherited from UIView exactly the same way and make your application animated. Hope this tutorial has solved your problem regarding text field.

Download the source code

Related Posts