Monday, 21 April 2014

How to make UITextField move up when keyboard is present.

When the user taps in a text field, that text field becomes the first responder and automatically asks the system to display the associated keyboard.

The appearance of the keyboard might obscure portions of the UI that you would like to keep visible. Usually the content scrolls up so that it doesn’t get obscured by the keyboard. Let’s find out how to do that.


We will create a method called
registerForKeyboardNotifications and one
deregisterForKeyboardNotifications. We will call
registerForKeyboardNotifications from viewWillAppear: and
deregisterFromKeyboardNotifications in viewWillDisappear:

- (void)registerForKeyboardNotifications 
{
 
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWasShown:)
                                                 name:UIKeyboardDidShowNotification
                                               object:nil];
 
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillBeHidden:)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
 
}
 
- (void)deregisterFromKeyboardNotifications 
{
 
    [[NSNotificationCenter defaultCenter] removeObserver:self
                                                    name:UIKeyboardDidHideNotification
                                                  object:nil];
 
    [[NSNotificationCenter defaultCenter] removeObserver:self
                                                    name:UIKeyboardWillHideNotification
                                                  object:nil];
 
}
 
- (void)viewWillAppear:(BOOL)animated 
{
 
    [super viewWillAppear:animated];
 
    [self registerForKeyboardNotifications];
 
}
 
- (void)viewWillDisappear:(BOOL)animated 
{
 
    [self deregisterFromKeyboardNotifications];
 
    [super viewWillDisappear:animated];
 
}



We want to scroll the content so that the  button is above the keyboard. To do this we get the current location of the  button, check if it’s being obscured by the keyboard and if it is then we scroll the content up so that the button is visible just above the keyboard. Here is the code for this:


- (void)keyboardWasShown:(NSNotification *)notification 
{
 
    NSDictionary* info = [notification userInfo];
 
    CGSize keyboardSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
 
    CGPoint buttonOrigin = self.button.frame.origin;
 
    CGFloat buttonHeight = self.button.frame.size.height;
 
    CGRect visibleRect = self.view.frame;
 
    visibleRect.size.height -= keyboardSize.height;
 
    if (!CGRectContainsPoint(visibleRect, buttonOrigin))
   {

 
        CGPoint scrollPoint = CGPointMake(0.0, buttonOrigin.y - visibleRect.size.height + buttonHeight);
 
        [self.scrollView setContentOffset:scrollPoint animated:YES];
 
    }
 
}
 
- (void)keyboardWillBeHidden:(NSNotification *)notification 
{
 
    [self.scrollView setContentOffset:CGPointZero animated:YES];
 
}


So, to summarise, these are the steps we took:
– Embed the UI controls in a UIScrollView
– Register for keyboard notifications
– Scroll the scroll view so that the content you want visible is above the keyboard


2 comments:

  1. Clear code for this scenario is available in following link

    http://code-ios.blogspot.in/2014/05/code-to-make-uitextfield-move-up-when.html

    ReplyDelete
  2. Use TPKeyboardAvoiding By Michael Tyson.
    https://github.com/michaeltyson/TPKeyboardAvoiding

    ReplyDelete