iOS SDK Trabajar con UIAlertView y UIAlertViewDelegate

En este tutorial se le presentará una de las clases Cocoa-Touch más utilizadas: UIAlertView. Con esta clase, puede notificar rápidamente a los usuarios información importante o urgente de la aplicación. También puede forzar la retroalimentación de los usuarios al combinar la clase UIAlertView con el protocolo UIAlertViewDelegate. Sigue leyendo para aprender!

Paso 1: Configuración del proyecto

Cree un nuevo proyecto de Xcode utilizando la plantilla "Aplicación de vista única".

Nombre la aplicación "AlertDemo" e inserte su propio identificador de compañía o use "com.mobiletuts.alertdemo" si todavía no tiene uno. Establezca "iPhone" para la familia de dispositivos y mantenga las comprobaciones predeterminadas. Cuando esté listo, haga clic en Siguiente.

Seleccione una ubicación en su disco duro para almacenar el proyecto y luego haga clic en "Guardar".

Después de crear su proyecto, expanda la carpeta Archivos de soporte en el panel de Project Navigator a la izquierda de la ventana de Xcode. CTRL + Clic (o clic derecho) en la carpeta Archivos de soporte y seleccione Añadir> Nuevo grupo. Nombre el nuevo grupo de "imágenes" ya que aquí es donde almacenaremos los gráficos para nuestra aplicación.

Descargue el archivo de recursos del proyecto adjunto a este tutorial y abra la carpeta "imágenes". Arrastre y suelte todas las imágenes en el grupo de "imágenes" que acaba de crear. Asegúrate de revisar "Copiar elementos en la carpeta del grupo de destino (si es necesario)" ya que esto asegurará que los recursos se copien realmente en su proyecto y no simplemente se vinculen como referencias. Su configuración en Xcode ahora debería verse similar a esto:

Paso 2: Configurar la interfaz

Encuentra el MainStoryboard.storyboard Archivo en el Project Navigator y selecciónelo. Acaba de abrir el guión gráfico para el proyecto, que debe constar de una sola escena, o View Controller, que podemos modificar para crear la interfaz para la aplicación..

Con el Storyboard abierto, la interfaz de Xcode ahora debería mostrar la biblioteca de objetos en la esquina inferior derecha. Utilice el cuadro de búsqueda de la biblioteca de objetos para encontrar un UIImageView objeto. Coloque el objeto de imagen en el centro de la pantalla y cambie su tamaño manualmente para llenar la vista. A continuación, encuentra el imagen campo en el inspector de atributos (el inspector de atributos debe estar en la parte superior derecha de Xcode). Establezca el valor del campo de imagen en "background.png". Ahora debería tener una textura agradable de acero que llena el controlador de vista..

Usando la biblioteca de objetos de nuevo, encuentra un UIButton objeto y luego arrastre ese botón en la escena. El inspector de atributos ahora debería mostrar información para el objeto de botón. Selecciona el tipo campo desplegable a "personalizado". A continuación, establezca la imagen campo a "button.png". Ahora debería ver la imagen del botón en el controlador de vista de escena, pero probablemente no se vea bien. Con el botón objeto seleccionado, deberás seleccionar Editor> Tamaño para ajustar el contenido para cambiar automáticamente el tamaño de los límites de los botones al tamaño del contenido de la imagen. A continuación, centre el botón en la pantalla arrastrándolo hacia la mitad.

Ahora debería tener el botón configurado correctamente para el estado predeterminado, pero queremos mostrar una imagen diferente cuando el botón se está presionando realmente. Cambiar el configuración del estado desplegar valor a "resaltado". Los cambios que realice en el inspector de atributos ahora se aplicarán solo al estado resaltado. Selecciona el imagen atributo para el estado del botón resaltado a botón presionado.png. Tu guión gráfico ahora debería verse así:

Este es un buen momento para probar su progreso, así que guarde su trabajo ( Archivo> Guardar) y luego ejecute el proyecto en el simulador de iPhone (Producto> Ejecutar). Ahora debería poder tocar el botón y ver el cambio de imagen en el simulador..

Paso 3: Crea el método de alerta

Con el guión gráfico del proyecto aún abierto, haga clic en el botón "Mostrar el Editor Asistente" cerca de la esquina superior derecha de la ventana de Xcode para mostrar el listado del código fuente de ViewController.h. Desde esta perspectiva, mantenga presionado el botón de Control (CTRL) y el botón del mouse (el botón izquierdo del mouse si su mouse tiene dos) sobre el objeto del botón en la escena del Storyboard, y luego arrastre hacia la lista del código fuente, justo arriba del @fin línea.

Se abrirá un nuevo cuadro de diálogo que creará automáticamente una conexión entre el elemento de interfaz y su clase de controlador de vista. Desde esta ventana emergente puedes crear salidas o acciones. Las salidas se utilizan para crear propiedades que hacen referencia a los objetos de Interface Builder, y las acciones se utilizan para conectar métodos a acciones de objetos IB.

Seleccione "Acción" de la conexión en el menú desplegable, ingrese "showMessage" como el nombre de la conexión y luego haga clic en Conectar. Interface Builder debería haber agregado la siguiente línea a su ViewController.h expediente:

- (IBAction) showMessage: (id) sender;

Adicionalmente, ViewController.m Ahora debería tener esta definición de método:

- (IBAction) showMessage: (id) sender 

Cuando el usuario toca el botón, se ejecutará el código en este método. Eso significa que finalmente estamos listos para profundizar en el código para mostrar una UIAlertView y respondiendo a sus métodos de delegado.!

Paso 4: Crear un mensaje de alerta básico

Ahora que tiene la configuración de la plantilla de su proyecto, está listo para usar UIAlertView para activar su mensaje cuando se presiona el botón personalizado. Abre el ViewController.m archivo, y escriba lo siguiente en el Mostrar mensaje método que creaste anteriormente:

- (IBAction) showMessage: (id) sender UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "¡Hola mundo!" mensaje: @ "Este es su primer mensaje de UIAlertview". delegate: nil cancelButtonTitle: @ "OK" otherButtonTitles: nil]; [mostrar mensaje]; 

Arriba está creando e inicializando su instancia de la clase UIAlertView. los Título de inicio: y mensaje: los parámetros se explican por sí mismos y se entienden fácilmente después de ver una alerta mostrada. los delegar: parámetro se refiere a qué clase debe recibir mensajes de notificación de delegado para el UIAlertViewDelegate (demostrado más adelante). los cancelButton: parámetro es el botón predeterminado que se muestra junto con la alerta, y el otros titulos de titulo: Este parámetro se usa para mostrar una o varias opciones adicionales que el usuario puede seleccionar.

Después de crear un objeto de alerta, el [mostrar mensaje] en realidad, la llamada muestra nuestro mensaje al mostrar nuestro nuevo UIAlertView en la pantalla.

Si crea y depura la aplicación ahora, verá que al tocar el botón se muestra nuestro mensaje.!

NOTA: Si no sucede nada cuando toca el botón en el simulador, asegúrese de haber guardado los cambios que realizó en el archivo del Guión gráfico y de que la acción "Retocar el interior" está conectada a la Mostrar mensaje: método.

Paso 5: Agregar botones a la alerta

Se puede agregar botones adicionales a un UIAlertView al inicializar su objeto o en cualquier momento posterior. Para agregar botones en el momento de la inicialización en el código anterior, simplemente modificaría Mostrar mensaje: método como tal:

 UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" mensaje: @ "Este es su primer mensaje de UIAlertview". delegate: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nil]; [mostrar mensaje];

Para agregar botones después de haber inicializado su alerta, usaría las siguientes líneas de código:

 UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" mensaje: @ "Este es su primer mensaje de UIAlertview". delegate: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: nil]; [mensaje addButtonWithTitle: @ "Button 2"]; [mensaje addButtonWithTitle: @ "Button 3"]; [mostrar mensaje];

Ambos de estos fragmentos de código son equivalentes, pero usando el addButtonWithTitle: Este método facilita la adición condicional de botones a sus alertas, tal vez envolviéndolos Si declaraciones.

Paso 6: responder a la selección del botón de alerta

Cambie de nuevo a ViewController.h y modifique su línea de declaración de clase para que lea como sigue:

@interface ViewController: UIViewController  

Esto le permite a su clase responder a la UIAlertViewDelegate Métodos de protocolo. Para responder a las pulsaciones de botones en nuestra UIAlertView, vamos a utilizar el - alertView: clickedButtonAtIndex: método de protocolo. De nuevo en ViewController.m, añade esto a tu clase:

- alertView (void): (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex 

Como puede ver en el nombre del método, este método aceptará un puntero a la UIAlertView El objeto que creamos anteriormente y el índice de botones que seleccionó el usuario. Puede tener la tentación de simplemente cambiar condicionalmente en la variable buttonIndex para determinar qué botón fue seleccionado por el usuario, pero ¿qué pasaría si agregara condicionalmente botones a la alerta? En ese escenario, el botón con el índice 1 no siempre es el que desea. Una forma mucho mejor es probar contra el título del botón y luego actuar en consecuencia, así:

- alertView (void): (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex NSString * title = [alertView buttonTitleAtIndex: buttonIndex]; if ([title isEqualToString: @ "Button 1"]) NSLog (@ "Button 1 fue seleccionado.");  else if ([title isEqualToString: @ "Button 2"]) NSLog (@ "Button 2 fue seleccionado.");  else if ([title isEqualToString: @ "Button 3"]) NSLog (@ "Button 3 fue seleccionado."); 

Hay una modificación más que debemos hacer antes de que esto funcione. Regrese a la declaración de inicialización de UIAlertView y actualice la delegar: parámetro para aceptar el yo palabra clave en lugar de nulo. Después de hacerlo, el bloque de código debería verse así:

 UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hello World!" mensaje: @ "Este es su primer mensaje de UIAlertview". delegate: self cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nil]; [mostrar mensaje];

Si compila y depura la aplicación ahora, debería poder seleccionar varios botones y ver una impresión de la declaración en la consola cuando se selecciona un botón (¿necesita ayuda para encontrar la consola? Seleccione Ver> Área de depuración> Activar consola desde el menú Xcode).

Así es como debería verse la vista de alerta final en el simulador:

Conclusión

Con esto concluye nuestro tutorial introductorio sobre UIAlertView. Además de lo que cubrimos hoy, hay muchas otras opciones proporcionadas por el UIAlertViewDelegate protocolo y, con el lanzamiento de iOS 5, algunas formas adicionales de uso UIAlertView. Si desea ver un tutorial adicional sobre estos temas de vista de alerta avanzada, avíseme en la sección de comentarios a continuación. También puede enviar preguntas o comentarios a través de mi cuenta personal de Twitter @markhammonds o la cuenta oficial de Mobiletuts + Twitter @envatomobile.