Sliding UITextFields around to avoid the keyboard

It seems like the iPhone SDK should have given developers a more convenient way to scroll a view when the keyboard covers parts of the screen that should be visible for editing. If you are using a UIScrollView there are some relatively easy techniques to use but what if you are not using a scroll view?  In fact, there is a simple way to do this.
The short answer to the question is: Move (translate) the view the required amount when the keyboard appears and translate it back down when the keyboard is dismissed.
In our case we are using a standard UIView which contains a UITextView.  When the UITextView is selected the keyboard pops up to cover most of the text entry area.  We need to scroll the text entry area to the top of the screen to maximize the amount of text visible for user.
To solve this problem we will implement a delegate method of the UITextView called  textViewDidBeginEditing.  Since the UITextView “return” key doesn’t behave the same way as a UITextField we will also include a “Done” button in a toolbar just above the keyboard to dismiss the keyboard when text entry is complete.  To support the “Done” button we will also create our own “done”method.

You’ll notice that the toolbar is sitting midway up the xib and not at the bottom. This was necessary to make it appear at the top of the keyboard rather than at some place under it. After creating the toolbar we set it’s opacity to 0 so that it was not visible until the keyboard appeared.
From here, it is a matter of translating the view and making the toolbar visible when editing then translating the view back and hiding the toolbar when we were done.


This was done with the following code:
Translate up and unhide the toolbar

self.view.transform = CGAffineTransformTranslate(self.view.transform, 0, -85);
self.toolbar.alpha = 1;

Translate back and hide the toolbar

self.view.transform = CGAffineTransformTranslate(self.view.transform, 0, 85);
self.toolbar.alpha = 0;

The CGAffineTransformTranslate method was used to translate the view’s transform by 0 pixels in the x-direction and 85 pixels in the y-direction. Translating by a negative value for x or y moves an object left or up respectively, and translating by a positive value moves an object right or down.
But, it’s no good to have the view jump to it’s new location while the keyboard slides up. So, we wrapped everything in some animation with a duration equal to the duration of the keyboard sliding into view. Here is the final code along with a line to release the keyboard when the Done button is tapped.

- (void)textViewDidBeginEditing:(UITextView *)textView {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.3];
self.toolbar.alpha = 1;
self.view.transform = CGAffineTransformTranslate(self.view.transform, 0, -85);
[UIView commitAnimations];
}

- (IBAction)done {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.3];
self.toolbar.alpha = 0;
self.view.transform = CGAffineTransformTranslate(self.view.transform, 0, 85);
[UIView commitAnimations];

[self.userComment resignFirstResponder];
}

In practice, you will need to experiment with the location of the toolbar in the xib and the number of pixels to translate in the y-direction to move the text you are editing into view.
We’ve glossed over some things such as wiring up the toolbar in the xib so that its opacity will change when we tell it to and so that our “done” method gets called when we tap the Done button. We also don’t have the toolbar moving exactly with the keyboard, but this could easily be done by adjusting it’s position in the xib and translating it up and down along with the view. But, hopefully, what we have shown here helps you out with your own project. If so, let us know in the comments and tell us the name of the app you are working on so we can look for it when it hits the store.