Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make the view controller scroll to text field when keyboard appears

I want to make my uiviewcontroller.xib scroll. My view controller has like 8 textfields. So my problem is when I want to write something in the 5th textfield and so on my keyboard covers the textfields. How can I get rid of this problem, and make my viewcontroller scroll?

Please guide in detail because am new to iPhone development.

Thanks in advance.

like image 826
Exception Avatar asked Jan 03 '14 17:01

Exception


People also ask

How do I scroll up when keyboard appears in iOS?

Handling the Keyboard Appearing Notification There are two things to do in keyboardWasShown to scroll the text view. First, set the text view's content inset so the bottom edge is the keyboard's height. Second, set the scroll indicator insets to the text view's content inset.

Which component is used to move UI up when keyboard appears?

Scrolling up scrollview when keyboard is shown We can add bottom padding into the scrollview using its contentInset property, so the content inside will be moved up when a keyboard is shown.

How do you dismiss a keyboard in Swift?

Via Tap Gesture This is the quickest way to implement keyboard dismissal. Just set a Tap gesture on the main View and hook that gesture with a function which calls view. endEditing . Causes the view (or one of its embedded text fields) to resign the first responder status.


2 Answers

You can use a ScrollView.

Adding the scroll view

Drag an drop a scrollView onto your view controller, the same way you would with a text field and adjust the dimensions to suit your needs (it seems like you'd want it to fill the view controller.)

enter image description here

Then place the text fields into the scroll view. I think it's easiest to do using the document outline on the left. Drag the text fields onto the scroll view here, like in the picture.

enter image description here

Making the scroll view scroll when keyboard appears

Add this code to your view controller in viewDidLoad

//register for keyboard notifications
[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWasShown:)
                                             name:UIKeyboardDidShowNotification object:nil];

And add these methods to your view controller

// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
    NSDictionary* info = [aNotification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
    [self.scrollView setContentOffset:CGPointMake(0, kbSize.height) animated:YES];
}
//called when the text field is being edited
- (IBAction)textFieldDidBeginEditing:(UITextField *)sender {
    sender.delegate = self;
}

The first two of these methods is called when the keyboard is shown. The second is called when you start to edit a text field.

Now go to your storyboard and attach actions of the text fields to the method that was just added. You can right click on the text field, select the appropriate action and drag it to the method.

Your should see something like this when you right click on your textfields.

enter image description here

Add this property to your view controller and right click drag from your scroll view to it. It allows your view controller to control the scroll view.

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

Like this:

enter image description here

Closing the keyboard

When the return button is pressed we want the keyboard to close.

In your view controller header make your view controller a UITextFieldDelegate Like this:

@interface ViewController : UIViewController <UITextFieldDelegate>

Add this code to your view controller in viewDidLoad

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

And add these methods to your view controller

// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
    [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    return [textField resignFirstResponder];
}

The first method is called when the keyboard is closed. It returns the scroll view to its original position. The second method is called when you have finished editing a text field. It allows the keyboard to be dismissed when this happens.

More info

Here is more information on managing the keyboard.

And for reference here is my ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITextFieldDelegate>

@end

and ViewController.m

#import "ViewController.h"

@interface ViewController () 
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //register for keyboard notifications
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWasShown:)
                                                 name:UIKeyboardDidShowNotification object:nil];

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillBeHidden:)
                                                 name:UIKeyboardWillHideNotification object:nil];
}
// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
    NSDictionary* info = [aNotification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
    [self.scrollView setContentOffset:CGPointMake(0, kbSize.height) animated:YES];
}
// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
    [self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
}
- (IBAction)textFieldDidBeginEditing:(UITextField *)sender {
    sender.delegate = self;
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    return [textField resignFirstResponder];
}

@end
like image 172
Connor Avatar answered Nov 04 '22 03:11

Connor


All the previous answers are great, but if you don't want to confuse yourself with code, use a control.

One that I love is: https://github.com/michaeltyson/TPKeyboardAvoiding (Cocoapods: pod 'TPKeyboardAvoiding')

All you have to do is embed your text fields into a UIScrollView (Editor/Embed In. Select your UITextFields first) then set that UIScrollView's class to TPKeyboardAvoidingScrollView.

Yes you should learn how to do it manually first, but after just use this if you'd like.

like image 42
Nate Lee Avatar answered Nov 04 '22 01:11

Nate Lee