iPhone: Moving Content Located Under The Keyboard

Here’s what I have learned recently about trying to support editing in an iPhone app.

In developing an iPhone app that supports editing text, it doesn’t take long before you have to deal with the problem of the keyboard displaying on top of the text field or text view that you want to edit. I was surprised at how long it took me to come up with a solution.

I started with the iPhone Application Development Guide and looked in Chapter 5 on “Text and Web”. There is a section there titled “Moving Content That Is Located Under The Keyboard”. The guidance there is good, but what was lacking was a complete example that I could download and reverse engineer. As a new person to iPhone development, I find it still is easy to misinterpret explanations. I searched and searched but could not find anything on the web where someone posted a working example. So here’s mine.

Zip file: Under Keyboard project. This code works with Xcode 3.1.3. The views are done using Interface Builder.

Here are a few screen captures to show what the app looks like as you edit. Figure 1 is a screenshot of the app as it starts. The text field and text view have been placed low deliberately to illustrate how to scroll the view up as the keyboard appears.

Figure 1

Figure 2 shows what the screen looks like as you begin to edit the name in the text field. Notice that the everything has scrolled up enough to allow you to see the text field as you edit.

Figure 2

If you click either button or the return button, the keyboard goes away and the view scrolls back to its original position.

The same behavior holds for the text view, which is show in Figure 3. The only difference when editing in the text view is that you have to click the done button to stop editing in the view.

Figure 3

This took quite awhile to figure out. The trickiest thing for me was figuring out what to do in Interface Builder since most of the examples I found that explained scrolling well assumed you were creating the views by hand.

About Bill Lahti

Bill Lahti is a software engineer building mobile applications and knowledge management solutions. Two of his interests are writing for this blog and building Android apps, with strategy games being an area of particular interest.
This entry was posted in iphone and tagged , , , . Bookmark the permalink.

3 Responses to iPhone: Moving Content Located Under The Keyboard

  1. Freelander says:

    Thanks, I had the exact same problem, and agree it is hard to piece it all out from the documentation. You saved me a ton of time with this post!

  2. Freelander says:

    hmm, I had just one text view in the lower half of the screen that I needed to worry about. I look at your code, and it subtracts 80, not the keyboard height.

    I ended up ignoring the notifications stuff and all the rest and just did this:

    – (void) textViewDidBeginEditing:(UITextView *)textView {
    self.navigationItem.rightBarButtonItem = BARBUTTON(@”Done”, @selector(doneEditing:));
    [scrollView setContentOffset:CGPointMake(0.0, textView.frame.origin.y – 40) animated:YES];

    – (void)doneEditing:(id)sender; {
    self.navigationItem.rightBarButtonItem = nil;
    [scrollView setContentOffset: CGPointMake (0.0, 0.0) animated:YES];
    [bodyField resignFirstResponder];

    It works, but I assume it is bad in some way, given to the all the lengths apple was going thru in the pages you pointed out. But whats bad?

    • Freelander says:

      left out part:

      #define BARBUTTON(TITLE, SELECTOR) [[[UIBarButtonItem alloc] initWithTitle:TITLE style:UIBarButtonItemStylePlain target:self action:SELECTOR] autorelease]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s