user5228393
user5228393

Reputation:

Moving textfield up with keyboard

I have this layout shown in the picture below:

enter image description here

I have this code to move the Email Address textfield up when the keyboard pops up:

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
    textfield1.frame = CGRectMake(textfield1.frame.origin.x, (textfield1.frame.origin.y - 100.0), textfield1.frame.size.width, textfield1.frame.size.height);
            [UIView commitAnimations];
}

The only problem is when I move the textfield up like this it covers the Email Login / Sign Up Label right above it. Is there any way I can move the Email Address textfield up without covering that label? Or do I have to move every single view (such as the label) that is above that Email Address textfield up as well?

Upvotes: 0

Views: 180

Answers (4)

Max von Hippel
Max von Hippel

Reputation: 2970

As an alternative to the above answers, have you considered using a UIAlertController instead? These auto-format to be where you'd want them to be so that the user can always type without stuff being ugly (well, not always, but most of the time). You can read more about implementation here, but the general gist would be something like this:

UIAlertController* passAlert = [UIAlertController alertControllerWithTitle:@"Email Login/Sign Up" message:@"" preferredStyle:UIAlertControllerStyleAlert];

[passAlert addTextFieldWithConfigurationHandler:^(UITextField* textField) {
        textField.placeholder = NSLocalizedString(@"username", @"username");
    }];
[passAlert addTextFieldWithConfigurationHandler:^(UITextField* textField) {
        textField.placeholder = NSLocalizedString(@"password", @"password");
    }];
UIAlertAction* doneAction = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction* action) {
        // do whatever you need to do to process the login and password
    }];

[passAlert addAction:doneAction];

In the interest of transparency, my deep wisdom and arcane knowledge of textfields in alerts comes from here.

Very likely the other answers given are more useful for your case - you have a nice looking UI, a dope kind of Google Cards type thing, and I bet you don't want to give that sick look up. But if you'd like a cool alternative, here's one that should work more consistently than most peoples' ad-hoc solutions :).

Upvotes: 0

Jayprakash Dubey
Jayprakash Dubey

Reputation: 36447

Add scrollview as subview to existing View and then place all controls on this subview.

Use below code for smooth keyboard push while text editing.

//Declare in implementation file

static const CGFloat KEYBOARD_ANIMATION_DURATION = 0.3;
static const CGFloat MINIMUM_SCROLL_FRACTION = 0.2;
static const CGFloat MAXIMUM_SCROLL_FRACTION = 0.8;
static const CGFloat PORTRAIT_KEYBOARD_HEIGHT = 216;

//static const CGFloat LANDSCAPE_KEYBOARD_HEIGHT = 162;


#pragma - UITextField Delegates
- (void)textFieldDidBeginEditing:(UITextField *)textField {

    //Perform Animation during Keyboard show and Hide
    CGRect textFieldRect = [self.view.window convertRect:textField.bounds fromView:textField];
    CGRect viewRect = [self.view.window convertRect:self.view.bounds fromView:self.view];

    CGFloat midline = textFieldRect.origin.y + 0.5 * textFieldRect.size.height;
    CGFloat numerator = midline - viewRect.origin.y - MINIMUM_SCROLL_FRACTION * viewRect.size.height;

    CGFloat denominator = (MAXIMUM_SCROLL_FRACTION - MINIMUM_SCROLL_FRACTION) * viewRect.size.height;
    CGFloat heightFraction = numerator / denominator;

    if (heightFraction < 0.0) {
        heightFraction = 0.0;
    }
    else if (heightFraction > 1.0) {
        heightFraction = 1.0;
    }

    animatedDistance = floor(PORTRAIT_KEYBOARD_HEIGHT * heightFraction);

    CGRect viewFrame = self.view.frame;
    viewFrame.origin.y -= animatedDistance;

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];

    [self.view setFrame:viewFrame];

    [UIView commitAnimations];
}

- (BOOL)textFieldShouldEndEditing:(UITextField *)textField {

    return YES;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField {

    [textField resignFirstResponder];
    return YES;
}

- (void)textFieldDidEndEditing:(UITextField *)textField {

    CGRect viewFrame = self.view.frame;
    viewFrame.origin.y += animatedDistance;

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];

    [self.view setFrame:viewFrame];

    [UIView commitAnimations];
} 

Refer this link.

Upvotes: 0

ship
ship

Reputation: 13

First You have to add keyboard notification observer "UIKeyboardWillShowNotification" in your viewDidLoad or any other initialiser method as:

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

Then define the method "keyboardWillShow:" in your view controller class as:

- (void)keyboardWillShow:(NSNotification*)notification
{
    NSDictionary *info = [notification userInfo];
    CGSize kbSize = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
   CGFloat _currentKeyboardHeight = kbSize.height;
}

Now you will get Keyboard height value. Based on this value You can adjust your textfield's 'y' position.

Upvotes: 0

Fujia
Fujia

Reputation: 1242

Consider observing the system notifications:

  • UIKeyboardWillShowNotification
  • UIKeyboardDidShowNotification
  • UIKeyboardWillHideNotification
  • UIKeyboardDidHideNotification

And check the documentation

You should move the view that wraps all the UITextFields (if no such view, just create a "form view" containing those fields). The userInfo property of the notification object contains the size of the keyboard. You can use that information and position the form view with a distance from the keyboard frame.

Upvotes: 1

Related Questions