Udostępnij za pośrednictwem

Praca z alertami systemu tvOS na platformie Xamarin

  • Artykuł

W tym artykule opisano pracę z interfejsem UIAlertController w celu wyświetlenia komunikatu alertu dla użytkownika w systemie Xamarin.tvOS.

Jeśli musisz zwrócić uwagę użytkownika systemu tvOS lub poprosić o uprawnienie do wykonania destrukcyjnej akcji (takiej jak usunięcie pliku), możesz przedstawić komunikat alertu przy użyciu polecenia UIAlertViewController:

Przykładowy element UIAlertViewController

Jeśli oprócz wyświetlania komunikatu, możesz dodawać przyciski i pola tekstowe do alertu, aby umożliwić użytkownikowi reagowanie na akcje i przekazywanie opinii.

Alerty — informacje

Jak wspomniano powyżej, alerty są używane do zwracania uwagi użytkownika i informowania ich o stanie aplikacji lub żądaniu opinii. Alerty muszą przedstawiać tytuł. Opcjonalnie mogą mieć komunikat i co najmniej jeden przycisk lub pola tekstowe.

Przykładowy alert

Firma Apple ma następujące sugestie dotyczące pracy z alertami:

  • Używaj alertów oszczędnie — alerty zakłócają przepływ użytkownika za pomocą aplikacji i przerywają działanie użytkownika i w związku z tym powinny być używane tylko w ważnych sytuacjach, takich jak powiadomienia o błędach, zakupy w aplikacji i akcje destrukcyjne.
  • Udostępnia przydatne opcje — jeśli alert przedstawia użytkownikowi opcje, należy upewnić się, że każda opcja oferuje informacje krytyczne i udostępnia przydatne akcje dla użytkownika.

Tytuły i komunikaty alertów

Firma Apple ma następujące sugestie dotyczące prezentowania tytułu i opcjonalnego komunikatu alertu:

  • Użyj tytułów wielowordowych — tytuł alertu powinien mieć punkt w całej sytuacji, a jednocześnie nadal pozostaje prosty. Pojedynczy tytuł wyrazu rzadko udostępnia wystarczającą ilość informacji.
  • Użyj tytułów opisowych, które nie wymagają komunikatu — wszędzie tam, gdzie to możliwe, rozważ opisowy tytuł alertu, aby opcjonalny tekst wiadomości nie był wymagany.
  • Ustaw komunikat jako krótki, pełne zdanie — jeśli opcjonalny komunikat jest wymagany do uzyskania punktu alertu, zachowaj je tak proste, jak to możliwe i zapewnij pełne zdanie z odpowiednią literą i znakiem interpunkcyjnym.

Przyciski alertów

Firma Apple ma następującą sugestię dotyczącą dodawania przycisków do alertu:

  • Ogranicz do dwóch przycisków — jeśli to możliwe, ogranicz alert do maksymalnie dwóch przycisków. Alerty z jednym przyciskiem zawierają informacje, ale nie są dostępne żadne akcje. Dwa alerty przycisku zapewniają prostą akcję tak/bez wyboru.
  • Użyj zwięzłych tytułów przycisków logicznych — proste jeden do dwóch tytułów przycisków, które wyraźnie opisują akcję Przycisku najlepiej. Aby uzyskać więcej informacji, zobacz dokumentację Dotyczącą pracy z przyciskami .
  • Wyraźnie oznacz przyciski destruktywne — w przypadku przycisków wykonujących destrukcyjną akcję (np. usuwanie pliku) wyraźnie oznacz je stylem UIAlertActionStyle.Destructive .

Wyświetlanie alertu

Aby wyświetlić alert, należy utworzyć wystąpienie UIAlertViewController obiektu i skonfigurować je, dodając akcje (przyciski) i wybierając styl alertu. Na przykład poniższy kod wyświetla alert OK/Anuluj:

const string title = "A Short Title is Best";
const string message = "A message should be a short, complete sentence.";
const string acceptButtonTitle = "OK";
const string cancelButtonTitle = "Cancel";
const string deleteButtonTitle = "Delete";
...

var alertController = UIAlertController.Create (title, message, UIAlertControllerStyle.Alert);

// Create the action.
var acceptAction = UIAlertAction.Create (acceptButtonTitle, UIAlertActionStyle.Default, _ =>
    Console.WriteLine ("The \"OK/Cancel\" alert's other action occurred.")
);

var cancelAction = UIAlertAction.Create (cancelButtonTitle, UIAlertActionStyle.Cancel, _ =>
    Console.WriteLine ("The \"OK/Cancel\" alert's other action occurred.")
);

// Add the actions.
alertController.AddAction (acceptAction);
alertController.AddAction (cancelAction);
PresentViewController (alertController, true, null);

Przyjrzyjmy się szczegółowo temu kodowi. Najpierw utworzymy nowy alert z podanym tytułem i komunikatem:

UIAlertController.Create (title, message, UIAlertControllerStyle.Alert)

Następnie dla każdego przycisku, który chcemy wyświetlić w alercie, utworzymy akcję definiującą tytuł przycisku, jego styl i akcję, którą chcemy wykonać w przypadku naciśnięcia przycisku:

UIAlertAction.Create ("Button Title", UIAlertActionStyle.Default, _ =>
    // Do something when the button is pressed
    ...
);

Wyliczenie UIAlertActionStyle umożliwia ustawienie stylu przycisku jako jednego z następujących elementów:

  • Ustawienie domyślne — przycisk będzie domyślnym przyciskiem wybranym po wyświetleniu alertu.
  • Anuluj — przycisk to przycisk anuluj dla alertu.
  • Destruktywny — wyróżnia przycisk jako akcję destrukcyjną, taką jak usunięcie pliku. Obecnie system tvOS renderuje przycisk Destruktywny z czerwonym tłem.

Metoda AddAction dodaje daną akcję do UIAlertViewController elementu , a na koniec PresentViewController (alertController, true, null) metoda wyświetla dany alert użytkownikowi.

Dodawanie pól tekstowych

Oprócz dodawania akcji (przycisków) do alertu możesz dodać pola tekstowe do alertu, aby umożliwić użytkownikowi wypełnianie informacji, takich jak identyfikatory użytkowników i hasła:

Pole tekstowe w alercie

Jeśli użytkownik wybierze pole tekstowe, zostanie wyświetlona standardowa klawiatura tvOS umożliwiająca im wprowadzenie wartości pola:

Wprowadzanie tekstu

Poniższy kod wyświetla alert OK/Cancel z pojedynczym polem tekstowym umożliwiającym wprowadzenie wartości:

UIAlertController alert = UIAlertController.Create(title, description, UIAlertControllerStyle.Alert);
UITextField field = null;

// Add and configure text field
alert.AddTextField ((textField) => {
    // Save the field
    field = textField;

    // Initialize field
    field.Placeholder = placeholder;
    field.Text = text;
    field.AutocorrectionType = UITextAutocorrectionType.No;
    field.KeyboardType = UIKeyboardType.Default;
    field.ReturnKeyType = UIReturnKeyType.Done;
    field.ClearButtonMode = UITextFieldViewMode.WhileEditing;

});

// Add cancel button
alert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel,(actionCancel) => {
    // User canceled, do something
    ...
}));

// Add ok button
alert.AddAction(UIAlertAction.Create("OK",UIAlertActionStyle.Default,(actionOK) => {
    // User selected ok, do something
    ...
}));

// Display the alert
controller.PresentViewController(alert,true,null);

Metoda AddTextField dodaje nowe pole tekstowe do alertu, które można następnie skonfigurować, ustawiając właściwości, takie jak tekst zastępczy (tekst wyświetlany, gdy pole jest puste), domyślna wartość tekstowa i typ klawiatury. Na przykład:

// Initialize field
field.Placeholder = placeholder;
field.Text = text;
field.AutocorrectionType = UITextAutocorrectionType.No;
field.KeyboardType = UIKeyboardType.Default;
field.ReturnKeyType = UIReturnKeyType.Done;
field.ClearButtonMode = UITextFieldViewMode.WhileEditing;

Abyśmy mogli później podjąć działania na wartość pola tekstowego, zapisujemy również kopię przy użyciu następującego kodu:

UITextField field = null;
...

// Add and configure text field
alert.AddTextField ((textField) => {
    // Save the field
    field = textField;
    ...
});

Gdy użytkownik wprowadzi wartość w polu tekstowym, możemy użyć zmiennej field , aby uzyskać dostęp do tej wartości.

Klasa pomocnika kontrolera widoku alertów

Ponieważ wyświetlanie prostych, typowych typów alertów może UIAlertViewController spowodować sporo zduplikowanego kodu, możesz użyć klasy pomocniczej, aby zmniejszyć ilość powtarzalnego kodu. Na przykład:

using System;
using Foundation;
using UIKit;
using System.CodeDom.Compiler;

namespace UIKit
{
    /// <summary>
    /// Alert view controller is a reusable helper class that makes working with <c>UIAlertViewController</c> alerts
    /// easier in a tvOS app.
    /// </summary>
    public class AlertViewController
    {
        #region Static Methods
        public static UIAlertController PresentOKAlert(string title, string description, UIViewController controller) {
            // No, inform the user that they must create a home first
            UIAlertController alert = UIAlertController.Create(title, description, UIAlertControllerStyle.Alert);

            // Configure the alert
            alert.AddAction(UIAlertAction.Create("OK",UIAlertActionStyle.Default,(action) => {}));

            // Display the alert
            controller.PresentViewController(alert,true,null);

            // Return created controller
            return alert;
        }

        public static UIAlertController PresentOKCancelAlert(string title, string description, UIViewController controller, AlertOKCancelDelegate action) {
            // No, inform the user that they must create a home first
            UIAlertController alert = UIAlertController.Create(title, description, UIAlertControllerStyle.Alert);

            // Add cancel button
            alert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel,(actionCancel) => {
                // Any action?
                if (action!=null) {
                    action(false);
                }
            }));

            // Add ok button
            alert.AddAction(UIAlertAction.Create("OK",UIAlertActionStyle.Default,(actionOK) => {
                // Any action?
                if (action!=null) {
                    action(true);
                }
            }));

            // Display the alert
            controller.PresentViewController(alert,true,null);

            // Return created controller
            return alert;
        }

        public static UIAlertController PresentDestructiveAlert(string title, string description, string destructiveAction, UIViewController controller, AlertOKCancelDelegate action) {
            // No, inform the user that they must create a home first
            UIAlertController alert = UIAlertController.Create(title, description, UIAlertControllerStyle.Alert);

            // Add cancel button
            alert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel,(actionCancel) => {
                // Any action?
                if (action!=null) {
                    action(false);
                }
            }));

            // Add ok button
            alert.AddAction(UIAlertAction.Create(destructiveAction,UIAlertActionStyle.Destructive,(actionOK) => {
                // Any action?
                if (action!=null) {
                    action(true);
                }
            }));

            // Display the alert
            controller.PresentViewController(alert,true,null);

            // Return created controller
            return alert;
        }

        public static UIAlertController PresentTextInputAlert(string title, string description, string placeholder, string text, UIViewController controller, AlertTextInputDelegate action) {
            // No, inform the user that they must create a home first
            UIAlertController alert = UIAlertController.Create(title, description, UIAlertControllerStyle.Alert);
            UITextField field = null;

            // Add and configure text field
            alert.AddTextField ((textField) => {
                // Save the field
                field = textField;

                // Initialize field
                field.Placeholder = placeholder;
                field.Text = text;
                field.AutocorrectionType = UITextAutocorrectionType.No;
                field.KeyboardType = UIKeyboardType.Default;
                field.ReturnKeyType = UIReturnKeyType.Done;
                field.ClearButtonMode = UITextFieldViewMode.WhileEditing;

            });

            // Add cancel button
            alert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel,(actionCancel) => {
                // Any action?
                if (action!=null) {
                    action(false,"");
                }
            }));

            // Add ok button
            alert.AddAction(UIAlertAction.Create("OK",UIAlertActionStyle.Default,(actionOK) => {
                // Any action?
                if (action!=null && field !=null) {
                    action(true, field.Text);
                }
            }));

            // Display the alert
            controller.PresentViewController(alert,true,null);

            // Return created controller
            return alert;
        }
        #endregion

        #region Delegates
        public delegate void AlertOKCancelDelegate(bool OK);
        public delegate void AlertTextInputDelegate(bool OK, string text);
        #endregion
    }
}

Przy użyciu tej klasy wyświetlanie i reagowanie na proste alerty można wykonywać w następujący sposób:

#region Custom Actions
partial void DisplayDestructiveAlert (Foundation.NSObject sender) {
    // User helper class to present alert
    AlertViewController.PresentDestructiveAlert("A Short Title is Best","The message should be a short, complete sentence.","Delete",this, (ok) => {
        Console.WriteLine("Destructive Alert: The user selected {0}",ok);
    });
}

partial void DisplayOkCancelAlert (Foundation.NSObject sender) {
    // User helper class to present alert
    AlertViewController.PresentOKCancelAlert("A Short Title is Best","The message should be a short, complete sentence.",this, (ok) => {
        Console.WriteLine("OK/Cancel Alert: The user selected {0}",ok);
    });
}

partial void DisplaySimpleAlert (Foundation.NSObject sender) {
    // User helper class to present alert
    AlertViewController.PresentOKAlert("A Short Title is Best","The message should be a short, complete sentence.",this);
}

partial void DisplayTextInputAlert (Foundation.NSObject sender) {
    // User helper class to present alert
    AlertViewController.PresentTextInputAlert("A Short Title is Best","The message should be a short, complete sentence.","placeholder", "", this, (ok, text) => {
        Console.WriteLine("Text Input Alert: The user selected {0} and entered `{1}`",ok,text);
    });
}
#endregion

Podsumowanie

W tym artykule opisano pracę z programem UIAlertController , aby wyświetlić użytkownikowi komunikat alertu w systemie Xamarin.tvOS. Najpierw pokazano, jak wyświetlić prosty alert i dodać przyciski. Następnie pokazano, jak dodać pola tekstowe do alertu. Na koniec pokazano, jak używać klasy pomocniczej, aby zmniejszyć ilość powtarzalnego kodu wymaganego do wyświetlenia alertu.