Keyboard is hiding text fields in UIScrollView. How to move the text field in accordance with the keyboard?

Question

I am developing an app that has 15 text fields. SO I used UIScrollView to make the scrolling possible. But my last five text fields hide behind the keyboard when click on those text fields to edit. How to move these text fields above the keyboard once they are in editing mode? Again, they text fields are on UIScrollView. Not UIView.

Answer 1

Try TPKeyboardAvoidingScrollView.

Just grab the scroll view you already have and change it's class to TPKeyboardAvoidingScrollView, now when the keyboard pops up, it will adjust it's size and offset so that the fields are properly displayed.

I recommend this because when you have complex layouts (many text fields and other components) it can be tricky to do this by hand. This control is as simple as it gets and works like a charm!

Answer 2

Here is some sample code:

#define kOFFSET_FOR_KEYBOARD 80.0

-(void)keyboardWillShow {
    // Animate the current view out of the way
    if (self.view.frame.origin.y >= 0)
    {
        [self setViewMovedUp:YES];
    }
    else if (self.view.frame.origin.y < 0)
    {
        [self setViewMovedUp:NO];
    }
}

-(void)keyboardWillHide {
    if (self.view.frame.origin.y >= 0)
    {
        [self setViewMovedUp:YES];
    }
    else if (self.view.frame.origin.y < 0)
    {
        [self setViewMovedUp:NO];
    }
}

-(void)textFieldDidBeginEditing:(UITextField *)sender
{
    if ([sender isEqual:mailTf])
    {
        //move the main view, so that the keyboard does not hide it.
        if  (self.view.frame.origin.y >= 0)
        {
            [self setViewMovedUp:YES];
        }
    }
}

//method to move the view up/down whenever the keyboard is shown/dismissed
-(void)setViewMovedUp:(BOOL)movedUp
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3]; // if you want to slide up the view

    CGRect rect = self.view.frame;
    if (movedUp)
    {
        // 1. move the view's origin up so that the text field that will be hidden come above the keyboard 
        // 2. increase the size of the view so that the area behind the keyboard is covered up.
        rect.origin.y -= kOFFSET_FOR_KEYBOARD;
        rect.size.height += kOFFSET_FOR_KEYBOARD;
    }
    else
    {
        // revert back to the normal state.
        rect.origin.y += kOFFSET_FOR_KEYBOARD;
        rect.size.height -= kOFFSET_FOR_KEYBOARD;
    }
    self.view.frame = rect;

    [UIView commitAnimations];
}


- (void)viewWillAppear:(BOOL)animated
{
    // register for keyboard notifications
    [[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWillShow)
                                             name:UIKeyboardWillShowNotification
                                           object:nil];

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

- (void)viewWillDisappear:(BOOL)animated
{
    // unregister for keyboard notifications while not visible.
    [[NSNotificationCenter defaultCenter] removeObserver:self
                                             name:UIKeyboardWillShowNotification
                                           object:nil];

    [[NSNotificationCenter defaultCenter] removeObserver:self
                                             name:UIKeyboardWillHideNotification
                                           object:nil];
}

Answer 3

You'll want to set the contentSize and contentOffset accordingly on your scrollView. So if your last text box is at an origin of (0,300), you'll probably want your contentSize to be CGSizeMake(0, 600) or so and then set your contentOffset to (0, 250).

Answer 4

You can decrease your scrollView Y coordinate in textFieldShouldBeginEditing:

-(BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
   if(textField == textField11 || textField == textField12 || textField == textField13 || textField == textField14 || textField == textField15)
   {   
       [UIView beginAnimations:nil context:NULL];
       [UIView setAnimationDuration:0.3];
       //set Y according to keyBoard height
       [scrollView setFrame:CGRectMake(0.0,-220.0,320.0,460.0)];
       [UIView commitAnimations];
   }
}

and set scrollView frame as it was when you press return key of keyboard

-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [textField resignFirstResponder];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
    [scrollView setFrame:CGRectMake(0.0,0.0,320.0,460.0)];
    [UIView commitAnimations];   
}