Consider a login or sign-up page for your application with a number of input fields such as textboxes. As the user focuses on any of the textbox, the keyboard appears on the bottom of the screen and will eventually block the the other fields as below.

Keyboard Overlap

The possible way to overcome this problem is to whether

1. Design your application that all input fields are visible although the keyboard is displayed
2. Scroll the page up and down as the user focuses and loses focus on a input field

We will try the latter one now.

First, create a new View based project, I have named it scrollview. Afterwards, place some Text fields as in the above example.

-Open the scrollviewViewController.h file generated and place the following code to create and connect the text fields:

@interface scrollviewViewController : UIViewController {
    UITextField    *txtUsername;
    UITextField    *txtPassword;
    UITextField    *txtName;
    UITextField    *txtLastName;
    UITextField     *txtPassword2;
}

@property (nonatomic, retain) IBOutlet UITextField *txtUsername;
@property (nonatomic, retain) IBOutlet UITextField *txtPassword;
@property (nonatomic, retain) IBOutlet UITextField *txtName;
@property (nonatomic, retain) IBOutlet UITextField *txtLastName;
@property (nonatomic, retain) IBOutlet UITextField *txtPassword2;

@end

- Open the .m file and synthesize:

@synthesize txtUsername, txtPassword, txtPassword2, txtName, txtLastName;

-Connect the view objects to these fields – as in the previous tutorials.
-Now, let’s create the functions to move the view up and down. Open the .h file again and place the following :

- (IBAction)BeginEditing:(UITextField *)sender;
- (void)setViewMovedUp:(BOOL)movedUp;
- (void)keyboardWillShow:(NSNotification *)notif;
- (void)viewWillAppear:(BOOL)animated;
- (void)viewWillDisappear:(BOOL)animated;
-(IBAction)textFieldHideKeyboard:(id)sender;

-Now the .m file, and further explanation is below:

-(IBAction)BeginEditing:(UITextField *)sender:(UITextField *)sender
{
    if  (self.view.frame.origin.y >= 0 && ([sender isEqual:txtName] || [sender isEqual:txtLastName])){
        scroll_value = 90;
        [self setViewMovedUp:YES];
    }else if (self.view.frame.origin.y < 0 &&  !([sender isEqual:txtName] || [sender isEqual:txtLastName])){
        [self setViewMovedUp:NO];
    }
}

-Assign this IBAction to Editing Did Begin event of “ALL” the textboxes. It will check if the focused field is Last Name or Name fields first. If yes, the view will scroll up with the set ViewMovedUp function, descibed below.

-(void)setViewMovedUp:(BOOL)movedUp
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];

    CGRect rect = self.view.frame;
    if (movedUp)
    {
        rect.origin.y -= scroll_value;
        rect.size.height += scroll_value;
    }
    else
    {
        rect.origin.y += scroll_value;
        rect.size.height -= scroll_value;
    }
    self.view.frame = rect;
    [UIView commitAnimations];
}

-It will scroll the view up by the scroll_value defined, and revert it back once setViewMovedUp:NO is called.

-Finally, add the following to the .m file too, for notification and animation addons:

- (void)keyboardWillShow:(NSNotification *)notif
{
    if (([txtLastName isFirstResponder] || [txtName isFirstResponder]) && self.view.frame.origin.y >= 0)
    {
        [self setViewMovedUp:YES];
    }
    else if (!([txtLastName isFirstResponder] || [txtName isFirstResponder]) && self.view.frame.origin.y < 0)
    {
        [self setViewMovedUp:NO];
    }
}

- (void)viewWillAppear:(BOOL)animated
{
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:)
                                                 name:UIKeyboardWillShowNotification object:self.view.window];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
}

-Run your application and see the result!

Scrolling the View Up