The UIScrollView Class: Moving The Scroll View Controls Above The Keyboard

Last week you learned how to make controls you placed on the Scroll View scroll vertically and horizontally without regards to the fact that the keyboard is obstructing the active control. The user had to scroll the view to see the control the keyboard is blocking.

Workshop Objective

In this workshop you learn how to make controls place on the Scroll View control scroll vertically and ensure that the active control is not obstructed by the keyboard, by moving the Scroll View content above the keyboard.

The Keyboard Problem

When the user scroll the view then tap the Text View control (see Figure 1), the on-screen keyboard automatically slides in from the bottom of the screen and positions itself over the View’s controls; thus obstructing the Text View control the user is currently editing (seeFigure 2).

Figure 1	Figure 2

To remedy the keyboard problem, you have to examine what happens when the keyboard appear and what happens when the user finish editing the Text Field or the Text View control.

What happens when the keyboard appear

When the user tap the Text Field control or the Text View control, the iDevice’s operating system will trigger these delegate methods of the Text Field and Text View control. You’ll have to add code in them to basically shift the Text Field or Text View control above the keyboard, by shrinking the Scroll View frame so the keyboard and the Scroll View share the screen.

• textFieldDidBeginEditing:
• textViewDidBeginEditing: 

What happens when the user finish editing the Text Field or Text View control

When the user finish editing the Text Field or the Text View control by tapping another control or the view’s background, the iDevice’s Operating System will trigger these delegate methods of the Text Field and the Text View control. You’ll have to add code in them to basically reset the Scroll View frame to its original size.

• textFieldDidEndEditing:
• textViewDidEndEditing:

The Text Field Delegate Methods

Now you know what happens when the keyboard appear and what happens when the user finish editing the Text Field or the Text View control, you can go ahead and enter the Text Field control’s delegate methods in the FirstViewController.m file.

- (void)textViewDidBeginEditing:(UITextView *)textView
{
  CGPoint scrollPoint = CGPointMake(0, textView.frame.origin.y);
  [self.scrollView setContentOffset:scrollPoint animated:YES];
}

- (void)textViewDidEndEditing:(UITextView *)textView
{
  [self.scrollView setContentOffset:CGPointZero animated:YES];
}

Conform The FirstViewController Class

Since you’ve implemented delegate methods of the Text Field, you have to conform the FirstViewController class to the UITextFieldDelegate protocol. You have to conform the class to the UITextViewDelegate protocol as well. So go ahead and replace the class signature with this:

@interface FirstViewController : UIViewController <UITextFieldDelegate, UITextViewDelegate>

Connect The Text Field Control to The Delegate Outlet

You will have to connect the Text Field controls and the Text View control to the delegate outlet in Interface Builder. Here is a walk through on connecting the first Text Field control to the delegate outlet

1. Click the Main.storyboard file to load it in Interface Builder.
2. Click the First View Controller Scene’s Dock, then click the Connection Inspector button.
3. Click the first Text Field control.
4. Now, click-drag from the delegate circle to the First View Controller object. When the object is highlighted, as shown in this image, release your mouse.

Figure 3

Repeat step 3 and 4 above to connect remaining Text Field controls and the TextView control to the delegate outlet. When you are done, save your work. Again, by connecting each Text Field and the Text View control to the delegate outlet, ensures its delegate methods are fired when you tap the control and outside the control.

Test The Text Field Delegate Methods’ Code

Go ahead and run the application to test the Text Field control’s delegate methods’s code. Once the application is launched in the simulator, click Gender Text Field control. Notice how the control is shifted above the keyboard (see Figure 4). That’s because the Text Field’s delegate method (textFieldDidBeginEditing:) was fired.

Now to trigger the Text Field’s delegate (textFieldDidEndEditing:) method, click another control; for example the Text View control. Notice how the Gender Text Field scroll back under the keyboard. That’s because code you entered in the textFieldDidEndEditing: method rest the Scroll View back to its original size.

Figure 4	Figure 5

Implement The Text View Control Delegate Methods

Here’s the code to implement the Text View control’s delegate method. Don’t forget to connect the Text View control to the delegate outlet in Interface Builder. When you are done, run the application to test the code.

- (void)textViewDidBeginEditing:(UITextView *)textView
{
  CGPoint scrollPoint = CGPointMake(0, textView.frame.origin.y);
  [self.scrollView setContentOffset:scrollPoint animated:YES];

}

- (void)textViewDidEndEditing:(UITextView *)textView
{
  [self.scrollView setContentOffset:CGPointZero animated:YES];
}

Now here is the final code to add in the FirstViewController.m file. It is fired when the user tap the on-screen keyboard’s return key, which dismiss it.

-(BOOL) textFieldShouldReturn:(UITextField *) textFieldView
{
  [textFieldView resignFirstResponder];
  return NO;
}

This concludes the Moving The Scroll View Controls Above The Keyboard workshop. In it you learned how to do the follow:

1. Move the control the user is currently editing (the Text Field or the Text View ) above the on-screen keyboard by implementing two delegate methods of the Text Field and the Text View control.
2. Conform the FirstViewController class to the UITextFieldDelegate protocol and the UITextViewDelegate protocol.
3. Connect the Text Field and the Text View delegate outlet in Interface Builder.
4. Hide the on-screen keyboard when the user click its return key.

Next week you will learn how to implement the Scroll View “Zoom” function of the Scroll View control. Until then, happy coding! 🙂