11 DecUsername and Password UITextFields in UIAlertView prompt

Today I will show how to transform an UIAlertView to a prompt of username and password textfields. Actually it’s quite easy for expert of adding subviews or creating own custom controls. So current code snippet is destined for begginers.

I propose to do it in next succession:

  1. Initilize standard UIAlertView. There is a trick here. We need to set a message body to @”nnn”, it makes a shift and create a place for the text fields.
  2. Create two UITextField and initialize them with specific frames. Then add them as subviews to the UIAlertView. Don’t forget to customize a background color, placeholders, securityText property. 
  3. Lastly show UIAlertView with a little shift to top and set first UITextField as a FirstResponder if necessary.
The source code:

UITextField *textField; UITextField *textField2;

 UIAlertView *prompt = [[UIAlertView alloc] initWithTitle:@"Username and password"               message:@"nnn" // IMPORTANT             delegate:nil              cancelButtonTitle:@"Cancel"              otherButtonTitles:@"Enter", nil];

 textField = [[UITextField alloc] initWithFrame:CGRectMake(12.0, 50.0, 260.0, 25.0)];  [textField setBackgroundColor:[UIColor whiteColor]]; [textField setPlaceholder:@"username"]; [prompt addSubview:textField];

 textField2 = [[UITextField alloc] initWithFrame:CGRectMake(12.0, 85.0, 260.0, 25.0)];  [textField2 setBackgroundColor:[UIColor whiteColor]]; [textField2 setPlaceholder:@"password"]; [textField2 setSecureTextEntry:YES]; [prompt addSubview:textField2];

 // set place [prompt setTransform:CGAffineTransformMakeTranslation(0.0, 110.0)]; [prompt show];    [prompt release];

 // set cursor and show keyboard [textField becomeFirstResponder];

  • http://www.blogger.com/profile/16887883746970761444 Haresh Vavdiya

    Thanks for this amazing help. It works fine.

  • http://www.blogger.com/profile/02371726519432388101 Deyaa

    thanks, but in os4 the code will have two problems:
    1. the transformation is not needed since apple says: “On iOS 4.0, applications that add a text field to a UIAlertView will need to stop moving the UIAlertView by hand to avoid layout issues. “

    2. the height of the alert view does not extend to contain the text fields any more, so the text fields appear above the buttons despite using: message:@”nnn”. For this problem, I still do not have a solution :-( any help?

  • http://www.blogger.com/profile/14452178487512486536 skatou

    Is there any solution to do this without using magic numbers?

  • http://www.blogger.com/profile/10133512638902067812 vibhor goyal

    Thanks for the code buddy, but for iOS 4.0:

    [prompt setTransform:CGAffineTransformMakeTranslation(0.0, 110.0)];

    is not needed. :)

  • http://www.blogger.com/profile/10136059479406321000 Slava

    Thanks to all.
    I've just configured comments notification, so will answer more faster. Sorry for silence, i just didn't know.

    have a nice day!

  • http://myuserid.myopenid.com/ Alice

    > the height of the alert view does not extend to contain the text fields

    So if you added 3-6 n chars… the alertView height never changes????

    > any more, so the text fields appear above the buttons despite

    I thought we WANTED the textfields to be above the buttons. No?
    (Or do you mean ON TOP OF the buttons?)

  • http://www.blogger.com/profile/18329610427645854427 firestoke

    Thanks!!!
    I am just looking for this. :)

  • http://openid.aol.com/beavis15 beavis15

    you still monitoring this?

  • http://haveacafe.wordpress.com/ haveacafe

    This patch doesn't work if you have more than 2 buttons. not a clever solution if you want something really robust (i.e. ios4 AND 3 proof + compatibility with future iOS popups and support of all methods of the alert view)

  • http://www.blogger.com/profile/10136059479406321000 Slava

    I guess if you want more buttons just add more and more “n”. It's simple, but surely not general solution.

    PS. There is always a place to improve.

  • http://www.blogger.com/profile/11911574583828307092 Joan Lluch-Zorrilla

    I suppose everybody is aware that this code leaks both UITextFields. Just wanted to point this out just in case.

  • http://www.blogger.com/profile/10136059479406321000 Slava

    Yes, that's more like a sample code.

  • http://www.blogger.com/profile/00908174437893824065 Laurent Daudelin

    Plus, it now breaks with iOS 4.3 both in the simulator and on a device.

  • http://www.blogger.com/profile/11935115953888778341 parvind

    really help me out..thx

  • Pingback: Implement a UIAlertView with a UITextField « yimingcheung

  • http://www.manuelescrig.com Manuel

    Good tutorial!