CODEWITHSUNDEEP
iosuitableviewinterface-builderautolayout
Enrico Susatyo
Enrico Susatyo

Reputation: 19790

How do I resize views when keyboard pops up using Auto Layout

I have a view (a UITableView in this case, but that's not important) on my UIViewController that I want to have the height resized when the keyboard pops up.

What is the best way to do this in Auto Layout? Currently on the view I have these constraints:

I think the quickest way of doing this, is to remove the height and bottom space constraint and just resize the actual view in the code when keyboardDidAppear notification is called, but is there any other ways to do this?

EDIT: I removed the height constraint, my bad.

Upvotes: 8

Views: 7485

Answers (3)

holex
holex

Reputation: 24041

I would give you a generic idea, it may need to be re-adjusted for your actual project.

swift 4.2

let notificationTokenKeyboardWillAppear = NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: nil) { (note) in
    guard let keyboardFrame = (note.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else { return }
    UIView.animate(withDuration: CATransaction.animationDuration(), animations: {
        self.scrollView?.contentInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: keyboardFrame.size.height, right: 0.0)
    }, completion: nil)
}

and

let notificationTokenKeyboardWillHide = NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: nil) { (_) in
    UIView.animate(withDuration: CATransaction.animationDuration(), animations: {
        self.scrollView?.contentInset = .zero
    }, completion: nil)
}

NOTE-1: scrollView represents here any subset of UIScrollView, e.g. UITableView or UICollectionView, etc...

NOTE-2: you'll need to remove the tokens manually by invoking the removeObserver(_:) method when you are about to release the view and the closure-based observers are not necessary any longer

ObjC

I persume the UITableView *_tableView has been set up properly somewhere before.

- (void)viewDidLoad {

    // ...

    [[NSNotificationCenter defaultCenter] addObserverForName:UIKeyboardWillShowNotification object:nil queue:nil usingBlock:^(NSNotification *note) {
        id _obj = [note.userInfo valueForKey:UIKeyboardFrameEndUserInfoKey];
        CGRect _keyboardFrame = CGRectNull;
        if ([_obj respondsToSelector:@selector(getValue:)]) [_obj getValue:&_keyboardFrame];
        [UIView animateWithDuration:0.25f delay:0.f options:UIViewAnimationOptionCurveEaseInOut animations:^{
            [_tableView setContentInset:UIEdgeInsetsMake(0.f, 0.f, _keyboardFrame.size.height, 0.f)];
        } completion:nil];
    }];
    
    [[NSNotificationCenter defaultCenter] addObserverForName:UIKeyboardWillHideNotification object:nil queue:nil usingBlock:^(NSNotification *note) {
        [UIView animateWithDuration:0.25f delay:0.f options:UIViewAnimationOptionCurveEaseInOut animations:^{
            [_tableView setContentInset:UIEdgeInsetsZero];
        } completion:nil];
     }];


     // ...

}

NOTE: if your UITableView is not at the bottom of the screen precisely, the contentInset value should be refined in this line: [_tableView setContentInset:UIEdgeInsetsMake(0.f, 0.f, _keyboardFrame.size.height, 0.f)];

Upvotes: 19

Thanh-Nhon Nguyen
Thanh-Nhon Nguyen

Reputation: 3418

Keep your height constraint and connect an outlet to it:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *CS_TableView_Height;

Take a look at Example 3 of this tutorial.

Update your view's height by capturing keyboard event using NSNotificationCenter:

- (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];
}

You might want to also take a look at the accepted answer of this question for some inspirations.

So in the end, you should get something like this:

- (void)keyboardWillShow
{

    self.CS_TableView_Height.constant = 500;//For example

    [self.tableView setNeedsUpdateConstraints];
}

- (void)keyboardWillHide
{

    self.CS_TableView_Height.constant = 568;// iPhone5 height

    [self.tableView setNeedsUpdateConstraints];
}

Upvotes: 2

Lord Zsolt
Lord Zsolt

Reputation: 6557

First off, you shouldn't add a top-bottom constraint AND a height constraint. If the screen size changes, the app will crash (unless one of the constraints have lower priority, in which case it will be removed).

Secondly, in your keyboardDidAppear notification method, you just change the bottom space to superview's constant value and call [myView setNeedsDisplay]

Edit: You don't do the setNeedsDisplay after becomeFirstResponder. You add self as observer for keyboardWillShow / keyboardWillHide notifications, and in that method, you update the constraint and call setNeedsDisplay.

Take a look at this apple post, Listing 5-1 Handling the keyboard notifications and Listing 5-2 Additional methods for tracking the active text field provide the code.

Upvotes: 0

Related Questions