How to make the view controller scroll to text field when keyboard appears

Question

I want to make my uiviewcontroller.xib scroll. My view controller has like 8 textfields. So my problem is when I want to write something in the 5th textfield and so on my keyboard covers the textfields. How can I get rid of this problem, and make my viewcontroller scroll?

Please guide in detail because am new to iPhone development.

Thanks in advance.

Answer 1

You can use a ScrollView.

Adding the scroll view

Drag an drop a scrollView onto your view controller, the same way you would with a text field and adjust the dimensions to suit your needs (it seems like you'd want it to fill the view controller.)

Then place the text fields into the scroll view. I think it's easiest to do using the document outline on the left. Drag the text fields onto the scroll view here, like in the picture.

Making the scroll view scroll when keyboard appears

Add this code to your view controller in viewDidLoad

//register for keyboard notifications
[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWasShown:)
                                             name:UIKeyboardDidShowNotification object:nil];

And add these methods to your view controller

// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
    NSDictionary* info = [aNotification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
    [self.scrollView setContentOffset:CGPointMake(0, kbSize.height) animated:YES];
}
//called when the text field is being edited
- (IBAction)textFieldDidBeginEditing:(UITextField *)sender {
    sender.delegate = self;
}

The first two of these methods is called when the keyboard is shown. The second is called when you start to edit a text field.

Now go to your storyboard and attach actions of the text fields to the method that was just added. You can right click on the text field, select the appropriate action and drag it to the method.

Your should see something like this when you right click on your textfields.

Add this property to your view controller and right click drag from your scroll view to it. It allows your view controller to control the scroll view.

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

Like this:

Closing the keyboard

When the return button is pressed we want the keyboard to close.

In your view controller header make your view controller a UITextFieldDelegate Like this:

@interface ViewController : UIViewController <UITextFieldDelegate>

Add this code to your view controller in viewDidLoad

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWillBeHidden:)
                                             name:UIKeyboardWillHideNotification object:nil];

And add these methods to your view controller

// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
    [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    return [textField resignFirstResponder];
}

The first method is called when the keyboard is closed. It returns the scroll view to its original position. The second method is called when you have finished editing a text field. It allows the keyboard to be dismissed when this happens.

More info

Here is more information on managing the keyboard.

And for reference here is my ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITextFieldDelegate>

@end

and ViewController.m

#import "ViewController.h"

@interface ViewController () 
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //register for keyboard notifications
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWasShown:)
                                                 name:UIKeyboardDidShowNotification object:nil];

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillBeHidden:)
                                                 name:UIKeyboardWillHideNotification object:nil];
}
// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
    NSDictionary* info = [aNotification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
    [self.scrollView setContentOffset:CGPointMake(0, kbSize.height) animated:YES];
}
// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
    [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}
- (IBAction)textFieldDidBeginEditing:(UITextField *)sender {
    sender.delegate = self;
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    return [textField resignFirstResponder];
}

@end

Answer 2

All the previous answers are great, but if you don't want to confuse yourself with code, use a control.

One that I love is: https://github.com/michaeltyson/TPKeyboardAvoiding (Cocoapods: pod 'TPKeyboardAvoiding')

All you have to do is embed your text fields into a UIScrollView (Editor/Embed In. Select your UITextFields first) then set that UIScrollView's class to TPKeyboardAvoidingScrollView.

Yes you should learn how to do it manually first, but after just use this if you'd like.