Scrolling Forms

Sometimes, you will need to build forms to capture a lot of information from your user. Download and run the following starter project.

If you don’t put too much thought into this, it can be a real pain for your user. Let’s look at ways to make this process as easy as possible.

Customizing the keyboard

The first thing to do would be to set the right keyboard type for each field. In the above example, most fields will just use the Default keyboard, but you should set the email field to use the E-mail Address keyboard, and the phone number field to use the Numbers and Punctuation keyboard. This will prevent the user from manually having to switch keyboards when inputting that data.

Another easy improvement is to set an appropriate title for the Return key. In our case, it should be Next for all fields but the last one, where it should be Done.

Auto-selecting the next field

The next improvement would be to hide the keyboard when the Return key is pressed. In your past apps, you probably did this by calling resignFirstResponder on your UITextField instances, either as a callback from the delegate or from the Did End On Exit event.

In this case however, it would be better to automatically select the next field until we reach the last one, where we would finally hide the keyboard.

First, set your view controller to conform to the UITextFieldDelegate protocol.

Then, set the delegate of each text field to your view controller.

Then, set the tag of each text field to an incrementing value starting at 1. We start at 1 because the default is 0, and we want to filter out all other UIViews on screen. In this example, the first name text field will have tag 1, the last name will have tag 2, and so on until the phone number at tag 9.

Once that’s done, you can implement textFieldShouldReturn:, which will get called every time the Return key is pressed.

The code will read the tag of the field that just returned. If it’s the last one, it will hide the keyboard, otherwise it will automatically focus on the next field.

You can go one step further and automatically populate the list of entry fields. That way, you can add or remove fields without having to worry about the value of the last tag.

Scrolling the fields into view

You’ve probably noticed by now that all the fields in the bottom half of the screen are hidden by the keyboard. This is really bad for the user experience because you can’t tell if you’re in the right field or even if you’re entering any data at all.

The solution to this problem is to put all the fields in a scroll view, and to have it automatically scroll so that the field in focus is always visible.

The first thing you need to do is to calculate how much space the keyboard takes up. You can do this by listening for notifications on when the keyboard will show, and to measure its size when it is on screen.

You can then move all the text fields inside of a UIScrollView, and create an outlet for this scroll view in your view controller.

Header Source

You can then add a method that will scroll to position a subview in the middle of the available space on screen, and call that method every time a new text field is selected.

At first glance, this seems to work fine, but if you play with it a bit you’ll notice that the centering code does not work the first time it is called. That’s because textFieldDidBeginEditing: is called before keyboardWillShow:, and so the _keyboardBounds are not set the first time scrollViewToCenterOfScreen: is called.

You can fix this by saving a reference to the text field that is being edited, and calling scrollViewToCenterOfScreen: directly from keyboardWillShow:.

Finally, you’ll want to add a method to scroll the view back down to its original position, and call that method whenever the keyboard will hide.

You might notice that the view doesn’t actually animate down, but jumps down directly. That’s because of the call to setContentSize:, which sets the content to fit into the app frame, so there’s nowhere left for it to scroll. This can be fixed by “manually” animating the offset.

Comments are closed.