Practicing Auto Layout - An example of keyboard sensitive layout

The keyboard sensitive layout is very common in iOS apps, in which the view(s) will automatically shrink or extend when the keyboard comes out or disappears.

OK, ready? Let’s go!

1. Creating the view hierarchy

Start a new project with single view application. Drag a UITextView and a UIButton into the controller’s default view. Make these two views extend to fill the parent view. Keep the button’s height as the system default (44 points)

2. Setup the constraints

Now expand the “Constrants” node in Interface Builder. We can find that the Interface Builder has already generated some constraints for us. The purple icon indicates that it’s managed by IB, and the blue ones are user-managed constraints. A user-managed constraint can be deleted manually. And each time you create or delete a constraint, Interface Builder may recalculate those constraints to determine if there’s need to generate non-user-managed constraint. So you have to take care of the change of the automatic generated constraint.

In this example, we will define 3 user-managed constraints in vertical space:

• The top spacing between the text view and the parent view.
• The spacing between the text view and the button.
• The bottom spacing between the button and the parent view.

Set constant value of those constraints to “0″ to make the subviews fill the parent bounds.

3. Creating the outlet of the constraint to make it changeable by code

When the keyboard comes out, we need to change some spacing to make the new layout adaptive to the keyboard. But with Auto Layout, we have to remember these 2 things:

• All the frames of views are calculated by the Auto Layout system. We should not arbitrarily change the frame of some view as what we have done before.
• The constraints of the view of the root controller are managed by the system, we should not take the charge of it.

According to the concerns above, among the user-managed constraints we have created, the bottom spacing constraint is best suitable for this task. So, we create an referencing outlet named “keyboardHeight” to the constraint.

4. Coding for keyboard notification

OK, now let’s code for the keyboard events.

#import "PALViewController.h"
 
@interface PALViewController () 

@property(weak, nonatomic)IBOutlet UITextView *textView;

//The outlet of the bottom spacing constraint

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

- (IBAction)dismissKeyboard:(id)sender;

@end


@implementation PALViewController

 - (void)didReceiveMemoryWarning{

         [didReceiveMemoryWarning]
// Dispose of any resources that can be recreated.
}

- (void)observeKeyboard {

[[NSNotificationCenter addObserver:self selector: @selector(keyboardWillShow:) name:UIKeyboardWillChangeFrameNotification object:nil];

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

}

- (void)viewDidLoad{

[super viewDidLoad];

 // Begin observing the keyboard notifications when the view is loaded.

[self observeKeyboard];

}

// The callback for frame-changing of keyboard

- (void)keyboardWillShow:(NSNotification *)notification {

NSDictionary *info = [notification userInfo];

 NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey];

 NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];

CGRect keyboardFrame = [kbFrame CGRectValue];

CGFloat height = keyboardFrame.size.height;

NSLog(@"Updating constraints.");


// Because the "space" is actually the difference between the bottom lines of the 2 views,

// we need to set a negative constant value here.

self.keyboardHeight.constant = height;

[UIView animateWithDuration:animationDuration animations:^{ 

[self.view layoutIfNeeded];

}];

}

- (void)keyboardWillHide:(NSNotification *)notification {

NSDictionary *info = [notification userInfo];

NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];

self.keyboardHeight.constant = 0;

[UIView animateWithDuration:animationDuration animations:^{

self.view layoutIfNeeded];

}];

}

- (IBAction)dismissKeyboard:(id)sender {

[self.textView resignFirstResponder];

}

@end

First, we should register the observer as before. But, in the callback methods, there are slight changes to the prior code. We used to recalculate and set the frames of some view according to the keyboard’s frame. By adopting Auto Layout, we now turn to code against the constraints instead.
Line 38-46 shows how to obtain the height of keyboard and update the layout when keyboard appears or changes.
Now run the sample app, let’s see if it works.
When you tap the text view, the keyboard appears, and the text view will automatically shrink. When the keyboard dismissed, the button will slide down, and the text view will fill the rest part of the screen again.

Perfect! The Auto Layout just works as magic!

 

Conclusion

In this example, we have learned how to implement a common case in iOS application. With Auto Layout, we are now talking to the constraints instead of directly manipulating view frames.