Create FaceBook App Like Login UI Animation in iPhone

On October 5, 2012, in iPhone iPad Object-C, by James Liu

Facebook iPhone app login UI looks like to be the standard login UI for iPhone application. No matter how big the screen resolution is, the iPhone screen is small. Especially when we start to type in our user name and password, the screen keyboard will occupy half of the screen. The Facebook app login UI gives a very good solution for small screen.

Facebook Login UI

Facebook Login UI



Once we type in user name or password, there is an animation to push the logo, username UITextField, password UITextField and Login button to the up half screen.
Facebook Login UI with Screen Keyboard

Facebook Login UI with Screen Keyboard

IOS Push Up Animations

The animation is triggered by UITextField. To listen this UITextFiled event, we need to implement the UITextFieldDelegate and realize the function (void) textFieldDidBeginEditing:(UITextField *)textField . In this function, we will create and run the animation to push all UI up. Here is the source code example,

//push up the all UI
-(void) textFieldDidBeginEditing:(UITextField *)textField
{
    [UIView animateWithDuration:0.2 animations:^{
        CGRect frame;
        frame = loginIDTextField.frame;
        frame.origin.y = 108;
        loginIDTextField.frame = frame;
        
        frame = passwordTextField.frame;
        frame.origin.y = 149;
        passwordTextField.frame = frame;
        
        frame = loginButton.frame;
        frame.origin.y = 197;
        loginButton.frame = frame;
        
        frame = bgImage.frame;
        frame.origin.y = 5;
        bgImage.frame = frame;
    }];
}

//push down the UI, restore all UI
-(void) hideKeyboardAnimation
{
    [UIView animateWithDuration:0.2 animations:^{
        CGRect frame;
        frame = loginIDTextField.frame;
        frame.origin.y = 168;
        loginIDTextField.frame = frame;
        
        frame = passwordTextField.frame;
        frame.origin.y = 209;
        passwordTextField.frame = frame;
        
        frame = loginButton.frame;
        frame.origin.y = 257;
        loginButton.frame = frame;
        
        frame = bgImage.frame;
        frame.origin.y = 44;
        bgImage.frame = frame;
    }];
}

Set the Screen Keyboard to Next

If you are working on storyboard, it is very easy to configuration screen keyboard for different UITextField. To set the keyboard return key to “Next”, you can:

  1. select the UITextField in your storyboard
  2. go to Utilities window, Attribute Inspector section
  3. selet “Next” option for Return Key.
Configure UITextField Screen Keyboard Return Key to Next

Configure UITextField Screen Keyboard Return Key to Next

Move Focus From One Text Field to Another Text Field

After you config your return key to next, you can programe the action after user clicks the next button. In this example, we will move the focus from user name text field to password text field. To implement this feature, we need to customize the UITextFieldDelegate function -(BOOL) textFieldShouldReturn:(UITextField *)textField function. It will look like:

-(BOOL) textFieldShouldReturn:(UITextField *)textField
{
    if(textField == self.loginIDTextField)
    {
        //if the current focused textfield is username text field, move focus to password text field
        [self.passwordTextField becomeFirstResponder];
    }
    else if(textField == self.passwordTextField)
    {
        //unfocused the password text field to hide the keyboard
        [textField resignFirstResponder];
        [self hideKeyboardAnimation];
    }
    
    return NO;
}
Tagged with:  

4 Responses to “Create FaceBook App Like Login UI Animation in iPhone”

  1. Roger says:

    Hi !

    Good article ! But could you tell me , how did you do that from the beginning please ?

    Thank you

  2. Roger says:

    Hi !

    Good article ! But could you tell me , how did you do that from the beginning please ?

  3. James says:

    This is a simple animation which is triggered by textField delegate

  4. mike says:

    Get it. Going. Facebook is not. Come. In. O
    On my. Image. Book

Leave a Reply

WordPress主题

Free WordPress Theme