The iPhone’s keyboard takes up a whopping 216px, and sometimes text fields are positioned towards the bottom. When the keyboard appears, they are hidden.

This article shows how to add a scroll animation to your UIView that scrolls up when the text field is active, and scrolls back to normal when the text field is no longer active.

Note that the keyboards have custom toolbars, which you can learn about here. The “Done” button dismisses the keyboard.

I have defined two values for readability.

static const CGFloat PORTRAIT_KEYBOARD_HEIGHT = 216;
static const CGFloat ANIMATE_VIEW_PADDING = 10;

First, let’s write a generalized method that animates to any Y value:

- (void) animateViewToYValue: (float) pixels {
    CGRect viewFrame = self.view.frame;
    viewFrame.origin.y = pixels;
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:.3];
    [UIView setAnimationDelay:0];
    [self.view setFrame:viewFrame];
    [UIView commitAnimations];
    NSLog(@"frame origin y %f",self.view.frame.origin.y);
}

On line 1. we copy the existing frame of the view, and on line 2. we change the y value of the origin component to that frame. We now have a frame to animate to with all values exactly like the original frame except the value we are animating (the y value). Line 4 tells the system that we are now going to specify animations to perform. Notice this is a class method to UIView, not to the instance you’re working with. Next, we set some simple values regarding the animation. Then we change the frame of our view to the one we altered earlier, and then commit the animations. I am also logging a message for debug purposes.

So that gives us a generalized animation, but what values do I pass it? Let’s write another helper method, -(void) animateViewToShow: (CGRect) frame; that we can pass a frame, and that method will calculate the value to animate to.

- (void) animateViewToShow: (CGRect) frame {
    float bottom = frame.origin.y + frame.size.height + ANIMATE_VIEW_PADDING;
    float frameKeyboardDifference = bottom - PORTRAIT_KEYBOARD_HEIGHT;
    [self animateViewToYValue:-frameKeyboardDifference];
}

On line 2. we calculate the bottom of the frame, because the x,y, coordinate system begins at the upper-left corner. A little padding is added for aesthetics. On line 3. we find the difference between the frame and the keyboard, because this is the amount we will actually want to move! If the text field is 40 pixels below the top of the keyboard, we want to move up 40 px. Finally, on line 4. we can call the method we wrote earlier. However, notice that it is negative. This is because the coordinate system begins at the upper left hand corner, and a negative y coordinate is actually above the origin.

This sets up our animation, but when should we call this method? Well, if our current class is the delegate of the text fields, we will get a call to -(void)textFieldDidBeginEditing:(UITextField *)textField; when any text field begins editing. Here is the code I use:

-(void)textFieldDidBeginEditing:(UITextField *)textField {
    if (textField.frame.origin.y > (PORTRAIT_KEYBOARD_HEIGHT - 
        textField.frame.size.height - ANIMATE_VIEW_PADDING)) {
    [self animateViewToShow:textField.frame];
    }
}

On line 2, we check if the text field will be obscured by the keyboard. We just need to check if the keyboard height minus the height of the text field, minus a little padding (so it will move if the text field is within 10px of the keyboard) is less than the position of the text field. In the example, you’ll notice that the top text field doesn’t move, which is what we want. Then, we can send the frame to our helper method, which then calls the animation.

The last thing to do is to animate back to 0px whenever the text field is no longer in use. In the example project it happens when the “Done” button is pressed. Pretty simple!

Here is the example Xcode project if you want to check it out!
CodeProject

UITextField has a property called inputAccessoryView that can be set to a UIToolbar to give the user something to do after inputting text.

I have already set up text field as a synthesized property of my view controller, called nameTextField, and linked it to by nib.

viewDidLoad is a good place to create this toolbar, and I’ll call it keyboardToolBar.

UIToolbar * keyboardToolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
keyboardToolBar.barStyle = UIBarStyleBlackTranslucent;

This gives us a black, translucent UIToolbar that is 320 x 50. We can set the items by passing an array of UIBarButtonItem to [keyboardToolBar setItems:(NSArray*)]. The constructor of a UIBarButtonItem that I am using [[UIBarButtonItem alloc] initWithTitle:(NSString *)title style:(UIBarButtonItemStyle)style target:(id)target action:(SEL)action];

UIBarButtonItemStyle are predefined styles you can use, I suggest you browse through the options. The target is the object to send action (a method/message) to, which is triggered when the button is pressed. You need to implement these methods to avoid a crash.

I have decided on three buttons, and a spacer in between. The spacer is simply a UIBarButtonItem initialized with [UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFlexibleSpace target:nil action:nil];. This pushes all previous buttons to be left aligned and all buttons after it to be right aligned.

All together we have:

[keyboardToolBar setItems: [NSArray arrayWithObjects:[[UIBarButtonItem
    alloc]initWithTitle:@"Cancel"style:UIBarButtonItemStyleBordered target:self
    action:@selector(cancelNumberPad)],
    [[UIBarButtonItem alloc]initWithBarButtonSystemItem:
    UIBarButtonSystemItemFlexibleSpace
    target:nil action:nil],
    [[UIBarButtonItem alloc] initWithTitle:@"Next"
    style:UIBarButtonItemStyleBordered target:self
    action:@selector(nextTextField)],
    [[UIBarButtonItem alloc]initWithTitle:@"Done"
    style:UIBarButtonItemStyleDone target:self
    action:@selector(doneWithTextField)], nil]];

Finally, we make the connection from our text field to the new toolbar with

nameTextField.inputAccessoryView = keyboardToolBar;

You can grab the Xcode project here.
CodeProject