Textboxes and scrolling

One of the most basic and useful tasks is understanding how to respond to textboxes. Of course, it’s nice to be able to show a textbox, but to be able to also move it up the screen when the keyboard is displayed.

Here’s one way you could accomplish it.

As a simple example, let’s say you have a Sign Up screen on your app with two textboxes, one for an email address and another for a password. As an example, this should probably give you everything you need to know in implementing something quickly because self is the delegate, etc etc.

The one other thing to quickly point out is that you’re putting SignUpScrollView in place, a scroll view that will contain both textboxes. You will use that to move the textboxes around, if you will.

1. You have two textboxes, let’s say

//in your header
@property (weak, nonatomic) IBOutlet UITextField *SignUpEmailTextbox;
@property (weak, nonatomic) IBOutlet UITextField *SignUpPasswordTextbox;
@property (weak, nonatomic) IBOutlet UIScrollView *SignUpScrollView;

//in your implementation
@synthesize SignUpEmailTextbox = _signUpEmailTextbox;
@synthesize SignUpPasswordTextbox = _signUpPasswordTextbox;
@synthesize SignUpScrollView = _signUpScrollView;

//also in your implementation, just hold onto the textfield in a local variable for this example
//please remember, I made a point of using strong and weak here just to remind myself to remind you to set these objects to nil as appropriate, say in your viewDidUnload
@property (strong, nonatomic) UITextField *activeTextField;
@synthesize activeTextField = _activeTextField;

2. Let’s say you have a UIViewController, add on UITextFieldDelegate protocol on the end. You’re going to make yourself, self, the delegate that’s going to listen to textbox events for this simple example.

@interface SignUpViewController : UIViewController <UITextFieldDelegate>

3. In your viewDidLoad or wherever, perform the delegation setup and also trigger the email box as the focus.

    _signUpEmailTextbox.delegate = self;
    _signUpPasswordTextbox.delegate = self;
    [self registerForKeyboardNotifications];
    [_signUpEmailTextbox becomeFirstResponder];

4. And finally, here are your handlers, very straight forward again, you get the idea.

- (void)registerForKeyboardNotifications
    NSLog(@"registerForKeyboardNotifications called");
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWasShown:) name:UIKeyboardDidShowNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillBeHidden:) name:UIKeyboardWillHideNotification object:nil];

- (void)keyboardWasShown:(NSNotification *)aNotification
    NSLog(@"keyboardWasShown called");
    NSDictionary* info = [aNotification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
    UIEdgeInsets contentInsets = UIEdgeInsetsMake(0.0,0.0,kbSize.height,0.0);
    _signUpScrollView.contentInset = contentInsets;
    _signUpScrollView.scrollIndicatorInsets = contentInsets;
    CGRect aRect = self.view.frame;
    aRect.size.height -= kbSize.height;
    if (!CGRectContainsPoint(aRect, _activeTextField.frame.origin)) 
        CGPoint scrollPoint = CGPointMake(0.0, _activeTextField.frame.origin.y-kbSize.height+10);
        [_signUpScrollView setContentOffset:scrollPoint animated:YES];

- (void)keyboardWillBeHidden:(NSNotification *)aNotification
    NSLog(@"keyboardWillBeHidden called");
    UIEdgeInsets contentInsets = UIEdgeInsetsZero;
    _signUpScrollView.contentInset = contentInsets;
    _signUpScrollView.scrollIndicatorInsets = contentInsets;

- (void)textFieldDidBeginEditing:(UITextField *)textField
    NSLog(@"textFieldDidBeginEditing called");
    _activeTextField = textField;

- (void)textFieldDidEndEditing:(UITextField *)textField
    NSLog(@"textFieldDidEndEditing called");
    _activeTextField = nil;

- (BOOL)textFieldShouldReturn:(UITextField *)textField
    NSLog(@"textFieldShouldReturn called");
    [_activeTextField resignFirstResponder];
    return NO;  
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: