Use Your Loaf

[[brain engage] write]

UIAlertView Changes in iOS 5

The UIAlertView class has been available since iOS 2. It is similar to the UIActionSheet class but generally the UIAlertView is used to display an alert message to the user whereas UIActionSheet is useful when you want the user to confirm or choose between a set of options. This post will look at some useful additions to UIAlertView in iOS 5 however that also permit the user to enter some text into the alert view.

The Default Style

Before we look at what has changed in iOS 5 it is probably worth a quick recap of how UIAlertView worked in iOS 4. In all of these examples I will use an alert view with two buttons, a cancel button and an OK button. The code to create and show a basic UIAlertView is as follows:

UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"DefaultStyle"
                           message:@"the default alert view style"
                           delegate:self
                           cancelButtonTitle:@"Cancel"
                           otherButtonTitles:@"OK", nil]; 
[alertView show];

The initialiser is fairly self-explanatory, it takes a title and a longer description text message which is displayed in the body of the alert view. The delegate is optional and for simple alerts can be set to nil. As I will show in a moment the delegate is required if you want to interact with the alert view for example to find out which button the user pressed.

The cancelButtonTitle may be nil if you do not want a cancel button otherwise it is set to the text to display in the cancel button. Finally there is a nil-terminated list of titles for additional buttons to show in the alert. In this case we just add an OK button. The appearance of the alert view is shown below:

The view is dismissed by pressing either the Cancel or OK buttons. If you want to know which button the user pressed you need to implement some methods from the UIAlertViewDelegate. First we make our view controller adopt the delegate protocol:

@interface UYLViewController : UIViewController <UIAlertViewDelegate>

Then in the view controller we implement alertView:didDismissWithButtonIndex as follows:

- (void)alertView:(UIAlertView *)alertView
        didDismissWithButtonIndex:(NSInteger)buttonIndex
{
  NSLog(@"Alert View dismissed with button at index %d",buttonIndex);
}

The buttonIndex tells us which button was pressed to dismiss the view. The index starts at 0 so in our example with two buttons the Cancel button will give a value of 0 and the OK button will give 1. Of course you will probably want to do something more useful than log the result in a real application.

Plain Text Input

With iOS 5 the UIKit framework has added UIAlertView styles that allow for user input directly into the alert view. This is useful when you need to get a small amount of text input from the user such as a username or password before performing a task. The most simple style is to allow plain text input. The code to create and show a plain text input style alert view is as follows:

UIAlertView *alertView = [[UIAlertView alloc]
                           initWithTitle:@"PlainTextStyle"
                           message:@"Enter plain text"
                           delegate:self
                           cancelButtonTitle:@"Cancel"
                           otherButtonTitles:@"OK", nil];

alertView.alertViewStyle = UIAlertViewStylePlainTextInput;
[alertView show];

This is similar to creating the default alert view with the exception that we are setting the alertViewStyle property. This property is new in iOS 5 and takes a UIAlertViewStyle to set the style of the alert view. In this case we use UIAlertViewStylePlainTextInput which results in an alert view that looks like this:

The display and dismissal of the keyboard is handled for you to allow the user to enter text into the text field. You can access the text that the user has entered from the delegate we previously used to determine which button was pressed:

UITextField *textField = [alertView textFieldAtIndex:0];
NSLog(@"Plain text input: %@",textField.text);

Note that the text field is accessed via an instance method, textFieldAtIndex, which as the name suggests takes the index of the text field we want. The UIAlertViewStylePlainTextInput alert style contains a single text field at index 0.

Secure Text Input

The plain text input style is obviously not great if the input you want from the user is a password. Typically when entering a password iOS masks characters as they are typed. To get that style of user input we can use the UIAlertViewStyleSecureTextInput:

alertView.alertViewStyle = UIAlertViewStyleSecureTextInput;

The resulting UIAlertView looks the same as the plain text version with the exception that characters are masked a few seconds after they are entered:

Login and Password Input

The final style covers the situation where you want to get both a username and a password in a single alert view. The UIAlertViewStyleLoginAndPasswordInput style gives us an alert view that looks as follows:

The login name field is a plain text field and the password field is a secure text field. In this case we have two text fields that we need to retrieve in the delegate method:

UITextField *loginField = [alertView textFieldAtIndex:0];
NSLog(@"Login input: %@",loginField.text);

UITextField *passwordField = [alertView textFieldAtIndex:1];
NSLog(@"Password input: %@",passwordField.text);

Dynamically enabling/disabling the OK button

One minor refinement we can make when expecting input from the user is to only enable the OK button when the user has actually entered some text. To perform this validation we need to implement an extra delegate method:

- (BOOL)alertViewShouldEnableFirstOtherButton:(UIAlertView *)alertView
{
  UITextField *textField = [alertView textFieldAtIndex:0];
  if ([textField.text length] == 0)
  {
    return NO;
  }
  return YES;
}

The alertViewShouldEnableFirstOtherButton delegate method is called each time the user modifies a text input field in the alert view. It return a BOOL which indicates if the first other button (the OK button in our example) should be enabled or not.

Of course you could do some more sophisticated validation if required but in this case we just check if the user has entered some text into the first text input field. If the text field is empty we return NO which disables the OK button. As soon as the user enters at least one character it is enabled. The Cancel button remains enabled at all times.

Wrapping Up

With iOS 5 the UIAlertView class provides a quick and easy way to get a username or password from the user. There is not much code required to implement these additional alert view styles but if you want to play around with the example app I used to generate the screenshots for this post you can find it here or on my github Code Examples page.

Comments