Adjust TextField Hidden by Keyboard

Welcome to the first in a series of tips that are based on content from one of O’Reilly’s latest iPhone books, Head First iPhone Development, written by Dan and Tracey Pilone. Each Monday in November I’ll write a tip that is based on ideas and code in the book.

Book Giveaway – Every Friday in November

O’Reilly and iPhone Developer Tips are collaborating to give away a free ebook (electronic copy) of Head First iPhone Development each Friday in November. You can register in this weeks drawing by referring a friend to this tip – see the Refer-a-Friend button near the bottom of this post.

UITextField Hidden by Keyboard

Have you ever had one or more textfields on screen, that when tapped, become hidden by the on-screen keyboard? This tip will show an example of how to adjust textfields that are contained within a scrollview such that they are always visible, even when entering text.

The inspiration for this tip comes from Chapter 6, Saving, Editing and Sorting Data. The code example in the book is created over a series of chapters – to provide a complete working example for this tip, I’ll write a small working example from the ground up that you can download and build using Xcode. I’ll write all the code for the UI without Interface Builder, which will provide a little more insight into how all the pieces fit together.

The UI Problem

Let’s get started – When working with UITextFields, depending on the layout of your screen, good chance the keyboard will overlay your textfield when a user taps on the field to start editing. For example, the screenshot below shows two textfields, both displayed within a scrollview.

When the user selects either textfield, the keyboard will appear, trouble is, the keyboard may overlay the textfields as shown here:

Scrollview with Two UITextFields

For this code example, I’ll wrap two UITextFields inside a scrollview. When the keyboard is shown, the scrollview size is adjust based on the size of the keyboard, allowing the textfield selected to be visible on the display.

Let’s look at the view controller that will contain the textfields and the scrollview:

The variable keyboardVisible will keep the state of whether or not the keyboard is visible. The variable offset will keep track of current offset of the scrollview, before the keyboard is shown, so when the keyboard is dismissed, we can return the scrollview to its original position.

UI Layout

The code that follows show the layout of the user interface, a view that contains a scrollview, which in turn, contains two textfields.

Keyboard Notifications

The magic behind all of this begins by registering to receive notifications when the keyboard is shown and when it is hidden. You can read more about notifications on this iPhone Developer Tip: Basics of Notifications.

To add the notifications for the keyboard, here’s all we need to do:

These calls request that the methods keyboardDidShow and keyboardDidHide be called when the notifications UIKeyboardDidShowNotification and UIKeyboardDidHideNotification, respectively, are fired.

Keyboard Visible Code

The OS will trigger the notification UIKeyboardDidShowNotification when a user taps in a textfield, which will in turn call the method shown below. The first check is to see if the keyboard is currently visible, if so, we’re done. If not, access the dictionary for the notification so we can get to the keyboard size – this is important as the keyboard size can vary depending on the textfield.

With the keyboard size known, we can now adjust (shrink) the scrollview frame so the keyboard and scrollview share the screen.

One line of code to point is line 17, where we save the current offset of the scrollview so we can restore the position once the keyboard is hidden.

Keyboard Hidden Code

Upon dismissing the keyboard, the code below will be called. The basic idea is to reset the size of the scrollview to its original size, and follow this by updating the scrollview offset to where it was prior to the keyboard being shown.

Final User Interface

The end result is shown below – when the keyboard is shown, the scrollview is adjusted to the textfields are visible.

Xcode Project Source Code

You can download the Xcode project with source code here.

Book Giveaway

The drawing for this weeks free eBook is now closed.

12 Comments

  1. Nice tip, easy to understand. Thanks for the Xcode project file, that helps a lot to see how all this works!

  2. Awesome, I’ve been looking for a way around this :)

  3. Oh wow, a whole copy of a PDF file each Friday? That sounds great!

  4. Referred a friend too. I have tons of App ideas, but don’t know where to start. this book will definitely help.

  5. Hi,

    Because I am just using 1 UITextField, to make a simple “word proccessor”, can this code also be applyed to my single UITextField?

    Max.

Comments are closed.