Moving UIView up when UITextField is selected

Question

I am trying to programatically create some text fields. They appear at the bottom of the screen and when selected the keyboard covers them. I need to move the view up when the textfield is selected.

Here is my code for the View:

Header:

@interface MESLoginViewController : UIViewController <PFLogInViewControllerDelegate, UITextFieldDelegate> {
    IBOutlet UITextField *usernameField;
}

Imp View file:

// Create sub view for Logo
    UIView *logoView =[[UIView alloc] initWithFrame:CGRectMake(0,0,320,280)];
    [logoView setBackgroundColor:[UIColor blueColor]];
    logoView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

    // Create sub view for fields
    UIView *fieldView = [[UIView alloc] initWithFrame:CGRectMake(0, logoView.bounds.size.height, 320, 200)];
    [fieldView setBackgroundColor:[UIColor greenColor]];
    fieldView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;

    // Setting up the text fields
    // Username field
    usernameField = [[UITextField alloc] initWithFrame:CGRectMake(10, 20, 300, 40)];
    usernameField.borderStyle = UITextBorderStyleRoundedRect;
    usernameField.textColor = [UIColor blackColor];
    usernameField.font = [UIFont systemFontOfSize:17.0];
    usernameField.placeholder = @"Username";
    usernameField.backgroundColor = [UIColor whiteColor];
    usernameField.autocorrectionType = UITextAutocorrectionTypeNo;
    usernameField.keyboardType = UIKeyboardTypeDefault;
    usernameField.returnKeyType = UIReturnKeySearch;
    usernameField.clearButtonMode = UITextFieldViewModeWhileEditing;
    usernameField.delegate = self;

    // Password field
    UITextField *passwordField = [[UITextField alloc] initWithFrame:CGRectMake(10, (usernameField.bounds.size.height + 30), 300, 40)];
    passwordField.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;
    passwordField.borderStyle = UITextBorderStyleRoundedRect;
    passwordField.textColor = [UIColor blackColor];
    passwordField.font = [UIFont systemFontOfSize:17.0];
    passwordField.placeholder = @"Password";
    passwordField.backgroundColor = [UIColor whiteColor];
    passwordField.autocorrectionType = UITextAutocorrectionTypeNo;
    passwordField.keyboardType = UIKeyboardTypeDefault;
    passwordField.returnKeyType = UIReturnKeySearch;
    passwordField.clearButtonMode = UITextFieldViewModeWhileEditing;
    passwordField.delegate = self;

    // Add fields/button to fieldView
    [fieldView addSubview:usernameField];
    [fieldView addSubview:passwordField];

    // Add subviews to main view
    [self.view addSubview:logoView];
    [self.view addSubview:fieldView];

I have added this method for moving the view but cannot correctly work out the last part:

- (void)textFieldDidBeginEditing:(UITextField *)textField{
    NSLog(@"textFieldDidBeginEditing");
    //If we begin editing on the text field we need to move it up to make sure we can still
    //see it when the keyboard is visible.
    //I am adding an animation to make this look better
    [UIView beginAnimations:@"Animate Text Field Up" context:nil];
    [UIView setAnimationDuration:.3];
    [UIView setAnimationBeginsFromCurrentState:YES];

    usernameField.frame = CGRectMake(usernameField.frame.origin.x,
                                        -200,
                                        usernameField.frame.size.width,
                                        usernameField.frame.size.height);

    [UIView commitAnimations];

}

What I am actually looking for is to completely shift the view, or possible change it to a scrollable area above. Although I do implement another method after touch to endEditing.

It seems if I move one field I would have to complete code to move all... How can I just move the view (complete view)?

Also what is needed for the view to return to normal state in the method textFieldDidEndEditing|textFieldShouldEndEditing?

Answer 1

You are accessing a local variable usernameField in a method my friend. That is the compiler error.

Answer 2

If my understanding is correct - you actually want to shift the "fieldView" - because the two UITextFields are Subviews of this view.

The reason you're throwing that error is because the variable isn't accessible in that method - you need to declare an instance variable in your header file.

Answer 3

When you animate after the keyboard becomes selected - animate the entire view instead.

First declare the UIView variable to make it accessible:

@interface MESLoginViewController : UIViewController <PFLogInViewControllerDelegate, UITextFieldDelegate> 
{ 
IBOutlet UITextField *usernameField; 
UIView *fieldView; 
}

Then create this view in your implementation

 // Create sub view for Logo
UIView *logoView =[[UIView alloc] initWithFrame:CGRectMake(0,0,320,280)];
[logoView setBackgroundColor:[UIColor blueColor]];
logoView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

// Create sub view for fields
fieldView = [[UIView alloc] initWithFrame:CGRectMake(0, logoView.bounds.size.height, 320, 200)];
[fieldView setBackgroundColor:[UIColor greenColor]];
fieldView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;

// Setting up the text fields
// Username field
usernameField = [[UITextField alloc] initWithFrame:CGRectMake(10, 20, 300, 40)];
usernameField.borderStyle = UITextBorderStyleRoundedRect;
usernameField.textColor = [UIColor blackColor];
usernameField.font = [UIFont systemFontOfSize:17.0];
usernameField.placeholder = @"Username";
usernameField.backgroundColor = [UIColor whiteColor];
usernameField.autocorrectionType = UITextAutocorrectionTypeNo;
usernameField.keyboardType = UIKeyboardTypeDefault;
usernameField.returnKeyType = UIReturnKeySearch;
usernameField.clearButtonMode = UITextFieldViewModeWhileEditing;
usernameField.delegate = self;

// Password field
UITextField *passwordField = [[UITextField alloc] initWithFrame:CGRectMake(10, (usernameField.bounds.size.height + 30), 300, 40)];
passwordField.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;
passwordField.borderStyle = UITextBorderStyleRoundedRect;
passwordField.textColor = [UIColor blackColor];
passwordField.font = [UIFont systemFontOfSize:17.0];
passwordField.placeholder = @"Password";
passwordField.backgroundColor = [UIColor whiteColor];
passwordField.autocorrectionType = UITextAutocorrectionTypeNo;
passwordField.keyboardType = UIKeyboardTypeDefault;
passwordField.returnKeyType = UIReturnKeySearch;
passwordField.clearButtonMode = UITextFieldViewModeWhileEditing;
passwordField.delegate = self;

// Add fields/button to fieldView
[fieldView addSubview:usernameField];
[fieldView addSubview:passwordField];

// Add subviews to main view
[self.view addSubview:logoView];
[self.view addSubview:fieldView];

Then animate the fieldView instead:

- (void)textFieldDidBeginEditing:(UITextField *)textField{
NSLog(@"textFieldDidBeginEditing");
//If we begin editing on the text field we need to move it up to make sure we can still
//see it when the keyboard is visible.
//I am adding an animation to make this look better
[UIView beginAnimations:@"Animate Text Field Up" context:nil];
[UIView setAnimationDuration:.3];
[UIView setAnimationBeginsFromCurrentState:YES];

fieldView.frame = CGRectMake(fieldView.frame.origin.x,
                                    -200,
                                    fieldView.frame.size.width,
                                    fieldView.frame.size.height);

[UIView commitAnimations];

}

As all the text fields are subviews of fieldView - they will animate with it. That should sort it!

Answer 4

Simply use the following code in your .h and .m files it works fine for me.

-------.h-----

CGFloat animatedDistance;

--------.m----------

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;

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

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

    UIInterfaceOrientation orientation =
    [[UIApplication sharedApplication] statusBarOrientation];

    if (orientation == UIInterfaceOrientationPortrait ||
        orientation == UIInterfaceOrientationPortraitUpsideDown)
    {
        animatedDistance = floor(PORTRAIT_KEYBOARD_HEIGHT * heightFraction);
    }
    else
    {
        //animatedDistance = floor(LANDSCAPE_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];
}

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

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [textField resignFirstResponder];
    return YES;
}

- (IBAction) textFieldReturn:(id)textField
{
    [textField resignFirstResponder];
}

I've got the solution here