Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS 10

Crea un controlador de alertas personalizado en iOS 10

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Andrea J (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Introducción

Un UIAlertController se usa para mostrar un mensaje de alerta en una aplicación. Por ejemplo, si se produce un error, la alerta puede mostrar una descripción y botones para realizar más acciones. Puedes usar alertas para que los usuarios inicien sesión o se registren, mostrar los resultados de una acción que realizaron u ofrecer algunas opciones de configuración más, por ejemplo, cuando no tienes espacio para botones adicionales en una pantalla pero necesitas que los usuarios puedan realizar algunas acciones más en un objeto específico de la aplicación.

Desde iOS 9, Apple reemplazó UIAlertView con UIAlertController. Ya no tienes que agregarle UIAlertViewDelegate a la clase y ahora puedes aplicarle el estilo a la alerta como quieras. Puedes personalizar el título y las fuentes del mensaje, cambiar el color de fondo y agregar campos de texto. Por el bien de este tutorial, creamos una aplicación de demostración con tres botones, y cada uno disparará una alerta personalizada diferente. Puedes descargarlo desde el repositorio de origen del tutorial en GitHub. ¡Ahora veamos lo fácil que es crear estas alertas personalizadas!

Alerta con un campo de texto

La primera alerta que crearemos tiene un TextField adjunto donde puedes ingresar lo que quieras desde el teclado de iOS. Para inicializar un UIAlertController, tienes que comenzar con estas tres líneas:

En la primera línea, configuramos una cadena simple como título de la alerta. En la segunda línea está la cadena del mensaje que se mostrará justo debajo del título. En la tercera línea, el tipo de alerta se configura en .alert. (Otra opción es .actionSheet, pero no puedes personalizar una hoja de acciones como puedes hacerlo con una alerta).

En un controlador de alerta, los botones se definen como elementos UIAlertAction. Así que crearemos una acción UIAlertAction, que será el primer botón en la parte inferior izquierda de nuestra alerta.

Llamamos a esta acción submitAction, configuramos su título en "Submit", le dimos el estilo predeterminado y, para su controlador, imprimimos el contenido de un campo de texto. Dado que los campos de texto de la alerta tienen un índice, seleccionamos el primero en la posición 0. Más adelante veremos cómo agregarle varios campos de texto a una alerta.

Una vez que hayas presionado el botón Enviar en tu alerta, la consola de Xcode imprimirá el texto que ingresaste y descartará la alerta.

Creemos un botón para ocultar nuestra alerta:

Como puedes ver, esta acción no tiene ningún controlador. Esto se debe a que queremos descartar la alerta y no realizar ninguna otra acción. Este botón mostrará un título Cancelar en rojo porque configuramos su estilo como .destructive, que la API de Apple entenderá.

Antes de añadir estas dos acciones a la Alerta, tenemos que inicializar nuestro campo de texto:

Si estás familiarizado con UITextFields, los reconocerás como atributos estándar que configuran propiedades como la apariencia y el tipo del teclado, el tipo de autocorrección, el mensaje de marcador de posición y el botón de borrar. (Configuramos el botón de borrar para que aparezca cuando empieces a escribir algo).

Ahora, terminemos nuestra alerta.

El UIAlertController no controla matrices de acciones, por lo que debemos agregarlas una por una. Por último, presentamos la alerta como lo haríamos con cualquier otro controlador, con la función present().

En nuestra aplicación de demostración, incrustamos todo el código anterior en un Botón, por lo que si ejecutas la aplicación y la tocas, deberías ver algo así:

Alert controller with 1 text fieldAlert controller with 1 text fieldAlert controller with 1 text field

Si escribes algo en el campo de texto vacío y presionas Enviar, tu consola Xcode lo imprimirá.

Alerta con tres campos de texto

Ahora creemos una nueva alerta con varios Campos de texto para crear una solicitud de inicio de sesión. Comenzaremos de nuevo con las tres líneas que inicializan nuestra alerta:

Todavía tenemos dos Botones, uno para realizar una acción de inicio de sesión y el botón de cancelación:

Como puedes ver, nuestra alerta tiene tres campos de texto. Estos están indexados por su posición. Trataremos el primero como el nombre de usuario, el segundo como la contraseña y el último como un número de teléfono.

Ahora agrega un botón Cancelar:

Después, crearemos y personalizaremos el Campo de texto del nombre de usuario:

El código anterior se parece bastante a nuestro primer ejemplo, con la adición de la instancia textColor.

Del mismo modo para el segundo campo de texto:

Dado que las contraseñas normalmente deben estar ocultas, configuramos el atributo isSecureTextEntry en nuestro Campo de texto. Este comando reemplazará los caracteres que escribas con puntos, como lo hacen los campos de contraseña en un sitio web. También configuramos el color del texto en rojo.

Y el tercer elemento de texto, para el campo del número de teléfono:

El atributo keyboardType se configura como .numberPad aquí, por lo que la aplicación solo mostrará el teclado numérico. También puedes observar que cambiamos la fuente de este campo de texto a American Typewriter en la última línea de código.

Casi terminamos, solo tenemos que agregar nuestras acciones y presentar el AlertController de nuevo:

Ahora, si ejecutas la aplicación y activas esta alerta, verás algo así:

Alert controller with 3 text fieldsAlert controller with 3 text fieldsAlert controller with 3 text fields

Si intentas escribir algo en los campos de texto, verás el estilo personalizado que aplicamos.

Customized text fields in the AlertCustomized text fields in the AlertCustomized text fields in the Alert

Alerta con cuatro botones

Para un ejemplo final, te mostraré una alerta con cuatro acciones y algunos estilos diferentes.

Dado que personalizaremos los atributos de título y mensaje de esta alerta más adelante, nuestro código de inicialización tendrá cadenas vacías por ahora:

Así es como configuraremos la fuente y el tamaño de los campos de título y mensaje:

En las dos primeras líneas configuramos el nombre y el tamaño de la fuente como un Diccionario de NSFontAttributeName. Ten en cuenta que tendrás que escribir el nombre PostScript correcto de la fuente que quieres usar, de lo contrario Xcode no la reconocerá y mostrará la fuente predeterminada. El sitio de fuentes de iOS es una referencia a los nombres de fuente correctos.

Aquí también configuraremos las cadenas de título y mensaje con una instancia de NSMutableAttributedString.

Creemos cuatro acciones, incluida la predeterminada Cancelar:

Antes de adjuntar estas acciones a nuestra alerta, modifiquemos un poco el estilo.

Aunque la API UIAlertController es limitada, por lo que los desarrolladores no pueden cambiar completamente su estructura predeterminada, podemos editar su estilo como lo hicimos con el código anterior.

Finalmente podemos añadir todas las acciones y presentar nuestra alerta:

Ahora, si ejecutas el código, obtendrás así:

Alert Controller with 4 buttonsAlert Controller with 4 buttonsAlert Controller with 4 buttons

Conclusión

En este tutorial, creamos una serie de UIAlertViews personalizados con campos de texto y estilos personalizados. Espero que puedas poner en práctica este conocimiento para tu próxima aplicación de iOS.

Mientras tanto, consulta algunos de nuestros otros tutoriales sobre el desarrollo de aplicaciones Swift y iOS.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.