Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
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:
1 |
let alert = UIAlertController(title: "AlertController Tutorial", |
2 |
message: "Submit something", |
3 |
preferredStyle: .alert) |
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.
1 |
// Submit button
|
2 |
let submitAction = UIAlertAction(title: "Submit", style: .default, handler: { (action) -> Void in |
3 |
// Get 1st TextField's text
|
4 |
let textField = alert.textFields![0] |
5 |
print(textField.text!) |
6 |
})
|
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:
1 |
// Cancel button
|
2 |
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in }) |
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:
1 |
// Add 1 textField and customize it
|
2 |
alert.addTextField { (textField: UITextField) in |
3 |
textField.keyboardAppearance = .dark |
4 |
textField.keyboardType = .default |
5 |
textField.autocorrectionType = .default |
6 |
textField.placeholder = "Type something here" |
7 |
textField.clearButtonMode = .whileEditing |
8 |
}
|
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.
1 |
// Add action buttons and present the Alert
|
2 |
alert.addAction(submitAction) |
3 |
alert.addAction(cancel) |
4 |
present(alert, animated: true, completion: nil) |
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í:
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:
1 |
let alert = UIAlertController(title: "Login example", |
2 |
message: "Insert username, password & phone No.", |
3 |
preferredStyle: .alert) |
Todavía tenemos dos Botones, uno para realizar una acción de inicio de sesión y el botón de cancelación:
1 |
// Login button
|
2 |
let loginAction = UIAlertAction(title: "Login", style: .default, handler: { (action) -> Void in |
3 |
// Get TextFields text
|
4 |
let usernameTxt = alert.textFields![0] |
5 |
let passwordTxt = alert.textFields![1] |
6 |
let phoneTxt = alert.textFields![2] |
7 |
|
8 |
print("USERNAME: \(usernameTxt.text!)\nPASSWORD: \(passwordTxt.text!)\nPHONE NO.: \(phoneTxt.text!)") |
9 |
})
|
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:
1 |
// Cancel button
|
2 |
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in }) |
3 |
Después, crearemos y personalizaremos el Campo de texto del nombre de usuario:
1 |
// Add 1 textField (for username)
|
2 |
alert.addTextField { (textField: UITextField) in |
3 |
textField.keyboardAppearance = .dark |
4 |
textField.keyboardType = .default |
5 |
textField.autocorrectionType = .default |
6 |
textField.placeholder = "Type your username" |
7 |
textField.textColor = UIColor.green |
8 |
}
|
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:
1 |
// Add 2nd textField (for password)
|
2 |
alert.addTextField { (textField: UITextField) in |
3 |
textField.keyboardAppearance = .dark |
4 |
textField.keyboardType = .default |
5 |
textField.placeholder = "Type your password" |
6 |
textField.isSecureTextEntry = true |
7 |
textField.textColor = UIColor.red |
8 |
}
|
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:
1 |
// Add 3rd textField (for phone no.)
|
2 |
alert.addTextField { (textField: UITextField) in |
3 |
textField.keyboardAppearance = .dark |
4 |
textField.keyboardType = .numberPad |
5 |
textField.placeholder = "Type your phone no." |
6 |
textField.textColor = UIColor.blue |
7 |
textField.font = UIFont(name: "AmericanTypewriter", size: 14) |
8 |
}
|
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:
1 |
// Add action buttons and present the Alert
|
2 |
alert.addAction(loginAction) |
3 |
alert.addAction(cancel) |
4 |
present(alert, animated: true, completion: nil) |
Ahora, si ejecutas la aplicación y activas esta alerta, verás algo así:
Si intentas escribir algo en los campos de texto, verás el estilo personalizado que aplicamos.
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:
1 |
let alert = UIAlertController(title: "", |
2 |
message: "", |
3 |
preferredStyle: .alert) |
Así es como configuraremos la fuente y el tamaño de los campos de título y mensaje:
1 |
// Change font of the title and message
|
2 |
let titleFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "AmericanTypewriter", size: 18)! ] |
3 |
let messageFont:[String : AnyObject] = [ NSFontAttributeName : UIFont(name: "HelveticaNeue-Thin", size: 14)! ] |
4 |
let attributedTitle = NSMutableAttributedString(string: "Multiple buttons", attributes: titleFont) |
5 |
let attributedMessage = NSMutableAttributedString(string: "Select an Action", attributes: messageFont) |
6 |
alert.setValue(attributedTitle, forKey: "attributedTitle") |
7 |
alert.setValue(attributedMessage, forKey: "attributedMessage") |
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:
1 |
let action1 = UIAlertAction(title: "Action 1", style: .default, handler: { (action) -> Void in |
2 |
print("ACTION 1 selected!") |
3 |
})
|
4 |
|
5 |
let action2 = UIAlertAction(title: "Action 2", style: .default, handler: { (action) -> Void in |
6 |
print("ACTION 2 selected!") |
7 |
})
|
8 |
|
9 |
let action3 = UIAlertAction(title: "Action 3", style: .default, handler: { (action) -> Void in |
10 |
print("ACTION 3 selected!") |
11 |
})
|
12 |
|
13 |
// Cancel button
|
14 |
let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in }) |
15 |
Antes de adjuntar estas acciones a nuestra alerta, modifiquemos un poco el estilo.
1 |
// Restyle the view of the Alert
|
2 |
alert.view.tintColor = UIColor.brown // change text color of the buttons |
3 |
alert.view.backgroundColor = UIColor.cyan // change background color |
4 |
alert.view.layer.cornerRadius = 25 // change corner radius |
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:
1 |
// Add action buttons and present the Alert
|
2 |
alert.addAction(action1) |
3 |
alert.addAction(action2) |
4 |
alert.addAction(action3) |
5 |
alert.addAction(cancel) |
6 |
present(alert, animated: true, completion: nil) |
Ahora, si ejecutas el código, obtendrás así:
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.
