Keeping object on top of keyboard in the event of becomeFirstResponder or resignFirstResponder?

Question

I currently have a UITextField on top of a keyboard. When you tap it, it should stick on top of the keyboard and move up smoothly. I don't know the exact duration and animation type of the keyboard, so it's really bumpy. Here's what I have:

[theTextView resignFirstResponder];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.25];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
// Frame changes go here (move down 216px)
[UIView commitAnimations];

[theTextView becomeFirstResponder];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.25];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
// Frame changes go here (move up 216px)
[UIView commitAnimations];

If anyone has done something like this before, I would like to know the settings you used to make the animation smooth and make it appear that the bar is "stuck" to the top of the keyboard.

rob mayoff · Accepted Answer · 2012-01-02T23:45:27.653

UIKit posts UIKeyboardWillShowNotification when it shows the keyboard, and UIKeyboardWillHideNotification when it hides the keyboard. These notifications contain everything you need to properly animate your UITextField.

Let's say your UITextField is in a property called called myTextField.

First, you need to register for the notifications somewhere. Where you register depends on what object is responsible for moving myTextField. In my project, the field's superview is responsible, and since I load my UI from a nib, I do it in the superview's awakeFromNib:

- (void)awakeFromNib
{
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHideOrShow:) name:UIKeyboardWillHideNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHideOrShow:) name:UIKeyboardWillShowNotification object:nil];
}

If you use a UIViewController to move the field around, you'll probably want to do it in viewWillAppear:animated:.

You should unregister in your dealloc or viewWillDisappear:animated::

- (void)dealloc
{
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

Of course the tricky bit is in the keyboardWillHideOrShow: method. First I extract the animation parameters from the notification:

- (void)keyboardWillHideOrShow:(NSNotification *)note
{
    NSDictionary *userInfo = note.userInfo;
    NSTimeInterval duration = [[userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    UIViewAnimationCurve curve = [[userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];

    CGRect keyboardFrame = [[userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];

The keyboardFrame is in the global coordinate system. I need to convert the frame to the same coordinate system as myTextField.frame, and myTextField.frame is in the coordinate system of myTextField.superview:

    CGRect keyboardFrameForTextField = [self.myTextField.superview convertRect:keyboardFrame fromView:nil];

Next, I compute the frame that I want myTextField to move to. The bottom edge of the new frame should be equal to the top edge of the keyboard's frame:

    CGRect newTextFieldFrame = self.myTextField.frame;
    newTextFieldFrame.origin.y = keyboardFrameForTextField.origin.y - newTextFieldFrame.size.height;

Finally, I animate myTextField to its new frame, using the same animation parameters that the keyboard is using:

    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionBeginFromCurrentState | curve animations:^{
        self.myTextField.frame = newTextFieldFrame;
    } completion:nil];
}

Here it is all put together:

- (void)keyboardWillHideOrShow:(NSNotification *)note
{
    NSDictionary *userInfo = note.userInfo;
    NSTimeInterval duration = [[userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    UIViewAnimationCurve curve = [[userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];

    CGRect keyboardFrame = [[userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    CGRect keyboardFrameForTextField = [self.myTextField.superview convertRect:keyboardFrame fromView:nil];

    CGRect newTextFieldFrame = self.myTextField.frame;
    newTextFieldFrame.origin.y = keyboardFrameForTextField.origin.y - newTextFieldFrame.size.height;

    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionBeginFromCurrentState | curve animations:^{
        self.myTextField.frame = newTextFieldFrame;
    } completion:nil];
}

Thank you. Thank you. Thank you. Thank you. With a little modification, I have it working and it's looking super slick. — iosfreak, Jan 05 '12 at 21:34
@rob mayoff the problem is when I've a `UITabBar`. When the keyboard will hide the `UITextField` slides down under the `UITabBar`. Why? — Fred Collins, Feb 05 '12 at 20:41
If you have a tab bar, then when the keyboard is hiding you need to compute `newTextFieldFrame` based on the frame of the tab bar instead of the frame of the keyboard. — rob mayoff, Feb 05 '12 at 21:30
Or you can save `self.myTextField.frame` when the keyboard shows, and restore it when the keyboard hides. — rob mayoff, Feb 05 '12 at 21:30
I can recommend doing the observer notifications in `- viewDidAppear:` and again remove the observer in `- viewDidDisappear:`. You could be surprised by undefined behavior if you are presenting a keyboard in a sub view controller. — Kasper K., Oct 15 '12 at 08:57
The UIViewAnimationCurve value can't be passed directly to options; they're different types. You need to convert it first or your timing will be slightly off: http://stackoverflow.com/questions/7327249/ios-how-to-convert-uiviewanimationcurve-to-uiviewanimationoptions — Jesse Rusak, Jun 08 '14 at 14:11
A small pedantic correction: it should be integerValue instead of intValue. — Conor, Jun 11 '14 at 12:10
this works very nicely when an inputAccessoryView does not fit the bill! — Dan, Nov 30 '16 at 23:31
Won't constraints to UITextView, that is already in IB break this nice little trick? — Artem Zaytsev, Apr 12 '17 at 15:28

score 5 · Answer 2 · answered Jan 02 '12 at 19:11

5

Set your text field (or a view holding the text field) as the inputAccessoryView of the field that you are editing. It will then automatically be attached to the top of the keyboard and animate appropriately.

answered Jan 02 '12 at 19:11

jrturton

118,105
32
252
268

score 0 · Answer 3 · answered Jul 19 '18 at 05:29

Use this code in your keyboard notification:

@objc func keyboardWillShowNotification(notification: Notification) {
    let keyboardHeight = (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue.size.height ?? 216
    let duration = notification.userInfo?[UIKeyboardAnimationDurationUserInfoKey] as? Double ?? 0.25
    let curve = (notification.userInfo?[UIKeyboardAnimationCurveUserInfoKey] as? UInt ?? 7) << 16
    tableViewBottomConstraint.constant = keyboardHeight - submitButtonContainer.frame.size.height

    UIView.animate(withDuration: duration, delay: 0, options: [UIViewAnimationOptions(rawValue: curve)], animations: {
        // Animation
    }, completion: nil)
}

score 0 · Answer 4 · answered Jan 02 '12 at 18:42

0

in order to make the UITextField to dock to keyboard (with animation), you need to do offset calculations and apply offset changes on the scroll view (assuming UITextField is placed in UIScrollView) using setContentOffset:animation: method.

answered Jan 02 '12 at 18:42

Tatvamasi

2,537
19
14

It's not in the ScrollView. A scrollView doesn't even exist, it's a UITableView. – iosfreak Jan 02 '12 at 18:49
2

@phpnerd211: UITableView is a subclass of UIScrollView. – Andrew Jul 19 '13 at 07:46

Keeping object on top of keyboard in the event of becomeFirstResponder or resignFirstResponder?

4 Answers4

Linked

Related