Displaying alerts_iOS Development with Xamarin Cookbook-QQ阅读中文都市网

上QQ阅读APP看书，第一时间看更新

Displaying alerts

The UIAlertView class provides us with the ability to display alert messages to the user. In this recipe, we will discuss how to use this class and respond to user input.

Getting ready

For this recipe, create an iPhone Single View Application project in Xamarin Studio and name it AlertViewApp. Open the AlertViewAppViewController.xib file in Xcode and add a button on its view. Don't forget to connect it to an outlet.

How to do it…

Perform the following steps to implement the UIAlertView in the app:

In Xamarin Studio, open the AlertViewAppViewController.cs file and add the following method:

private void ShowAlert(string title, string message)
{
  // Create the alert
  UIAlertView alertView = new UIAlertView();
  alertView.Title = title;
  alertView.Message = message;
  // Add buttons
  alertView.AddButton("OK");
  alertView.AddButton("Cancel");
  // Add event handler
  alertView.Dismissed += (sender, e) => {
    if (e.ButtonIndex == 0)
    {
      this.btnShowAlert.SetTitle("OK!", UIControlState.Normal);
    }  else
    {  
      this.btnShowAlert.SetTitle("Cancelled!", UIControlState.Normal);
    }//end if else
  };
  // Display it
  alertView.Show();
}//end void ShowAlert

In the ViewDidLoad method, add the following line of code:

this.btnShowAlert.TouchUpInside += (sender, e) => this.ShowAlert("Alert Message", "Tap OK or Cancel");

Compile and run the app in the simulator.
Tap the button on the view. The alert should be displayed, as shown in the following screenshot:
Tap either OK or Cancel. The Show alert button's title will change according to the alert button that was tapped.

How it works...

The UIAlertView is a modal control. This means that once it is presented, the user is required to take an action for it to disappear. After creating the instance, we assign the title and the message that will be displayed through the Title and Message properties, respectively, as shown in the following code:

alertView.Title = title;
alertView.Message = message;

We then add the buttons we want to display through the AddButton method, which accepts a string parameter for the button's title, as shown in the following code:

// Add buttons
alertView.AddButton("OK");
alertView.AddButton("Cancel");

We can practically add as many buttons as we want; however, it would be good to avoid adding more than three or four buttons. If there is a need for more options, it would be best to show a new view to the user with these options, instead of using an alert view.

After adding the buttons, we need an event handler (as shown in the following code) that will inform us of the user's action on the alert view:

// Add event handler
alertView.Dismissed += (sender, e) => {
  if (e.ButtonIndex == 0)
  {
    this.btnShowAlert.SetTitle("OK!", UIControlState.Normal);
  }  else
  {  
    this.btnShowAlert.SetTitle("Cancelled!", UIControlState.Normal);
  }
};

For this functionality, we use the Dismissed event that is triggered whenever the alert view is hidden. This occurs when any of its buttons are tapped. In the event handler, we can determine which button was tapped through the passed ButtonIndex property of UIButtonEventArgs. It is pretty clear which index corresponds to which button. The first button we added will have an index of 0, the second button will have an index of 1, and so on.

Finally, to display the alert view, we call its Show method using the following code:

// Display it
alertView.Show();

There's more...

UIAlertView also supports text input. We can implement it by setting its AlertViewStyle property before displaying it. The AlertViewStyle property accepts the following values:

UIAlertViewStyle.Default: This alert view will not contain text input
UIAlertViewStyle.SecureTextInput: This alert view will contain a text field for password input, which obscures the typed text
UIAlertViewStyle.PlainTextInput: In this, only one simple text field will be included
UIAlertViewStyle.LoginAndPasswordInput: Using this property, two text fields will be displayed, one plain and one secure, for entering the login credentials

To access any of the mentioned text fields, we call the GetTextField method, passing the appropriate index, as shown in the following code:

// Get the text that was entered in the second text field
string password = alertView.GetTextField(1).Text;

Of course, we can also modify the text fields themselves. For example, if we want to disable obscuring the characters of the password text field, we can add the following line of code:

alertView.GetTextField(1).SecureTextEntry = false;