Vistas y controles en ios

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Vistas y controles en ios"

María Teresa Ayala Castellanos
hace 6 años
Vistas:

1 1 Vistas y controles en ios 2 TRABAJANDO CON TEXTO, TECLADOS Y BOTONES. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 1

2 Ocultar el teclado 3 Ya vimos que podemos ocultar el teclado llamando al método resignfirstresponder del componente que lo ha mostrado. Para ocultar el teclado cuando el usuario hace tap sobre el fondo de la aplicación: 1. Escribe un método en el controlador que haga que los objetos que activan el teclado, lo liberen. 2. Sobrescribe el método touchesbegan. Componentes para manejar texto 4 TextView. Permite capturar/mostrar texto en múltiples renglones. Hace Scroll automáticamente. TextField. Permite capturar texto en una sola línea. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 2

n Oprime la tecla de "Return". (Evento Did End On Exit) n Hace tap sobre el botón de Agregar.

3 Ejercicio 1 5 Escribe una aplicación que muestra la siguiente GUI y permite que el usuario agregue al directorio los datos que va capturando de nombre y correo. Ejercicio 1 (cont.) 6 Considera lo siguiente: El teclado se oculta cuando el usuario: n Hace tap sobre el fondo. n Oprime la tecla de "Return". (Evento Did End On Exit) n Hace tap sobre el botón de Agregar. Al editar el campo de correo debe aparecer un teclado adecuado. Debe haber una forma rápida de limpiar el campo para introducir nueva información. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 3

4 7 Manejando imágenes, animaciones, sliders y otros controles. Imágenes 8 Para mostrar imágenes, usamos un objeto de tipo UIImageView, el cual es un contenedor de un objeto de tipo UIImage. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 4

Imágenes (2) 9 Al igual que otras propiedades, la imagen de un UIImageView se asigna en

en sus atributos. La sintaxis es muy sencilla: UIView.animateWithDuration(2.

5 Imágenes (2) 9 Al igual que otras propiedades, la imagen de un UIImageView se asigna en tiempo de diseño, pero también puede ser en tiempo de ejecución: let foto = UIImage(named: "cedetec.jpg") imgfoto.image = foto Animaciones 10 Se pueden hacer animaciones de los cambios que sufre un UIView en sus atributos. La sintaxis es muy sencilla: UIView.animateWithDuration(2.7, animations: { () - > Void in // Instrucción que cambia atributos en el UIView // Por ejemplo: posición, nivel de alpha, tamaño }); Ing. Roberto Mar.nez Román - rmroman@itesm.mx 5

cache: true) self.imgfoto.image = UIImage(named: "cedetec.jpg") UIView.

6 Animaciones (2) 11 Si se desea animar el cambio de la imagen misma, usamos esta estructura: UIView.beginAnimations("girar", context: nil) UIView.setAnimationDuration(1) UIView.setAnimationCurve(.EaseInOut) UIView.setAnimationTransition(.FlipFromRight, forview: self.imgfoto, cache: true) self.imgfoto.image = UIImage(named: "cedetec.jpg") UIView.commitAnimations() Ejercicio 2 12 Construye la siguiente GUI y añade funcionalidad de manera incremental como se describe más adelante. No olvides crear todos los Outlets de los componentes que necesitan ser accedidos desde el controlador. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 6

7 Ejercicio 2 (cont.) 13 El botón "Desaparece" hace que la imagen se oculte con animación. 1 segundo de duración. El botón "Aparece" hace que la imagen se muestre con animación. 1 segundo de duración. El botón "Cambiar" hace que la imagen se cambie por otra con los efectos anteriores combinados. El botón "Animación con efecto" hace que la imagen cambie pero con los efectos de girar o pase de página. Ejercicio 2 (cont.) 14 Finalmente, usa el valor del slider para seleccionar el tiempo de duración de las imágenes en el siguiente rango [ ] Ing. Roberto Mar.nez Román - rmroman@itesm.mx 7

8 15 LLAMANDO LA ATENCIÓN DEL USUARIO. Alertas 16 let alertavc = UIAlertController(title: "Aviso", message: "Cambio exitoso", preferredstyle:.alert); let accion = UIAlertAction(title: "Aceptar", style:.default, handler: { action in // Código ) } alertavc.addaction(accion) presentviewcontroller(alertavc, animated: true, completion: nil) Ing. Roberto Mar.nez Román - rmroman@itesm.mx 8

default, handler: { action in } ) let cancelar = UIAlertAction(title: "Borrar", style:.destructive, handler: { action in } ) alertavc.

9 UIActionSheet 17 let alertavc = UIAlertController(title: "aviso", message: "Cambio exitoso", preferredstyle:.actionsheet); let accion = UIAlertAction(title: "Cancelar", style:.default, handler: { action in } ) let cancelar = UIAlertAction(title: "Borrar", style:.destructive, handler: { action in } ) alertavc.addaction(accion) alertavc.addaction(cancelar) presentviewcontroller(alertavc, animated: true, completion: nil) Ejercicio 3 18 Construye una aplicación como se muestra a continuación. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 9

10 Ejercicio 19 El usuario puede capturar su nombre en el campo de texto. Si oprime el botón "Convertir a mayúsculas", mostrar una alerta para que el usuario confirme la acción. Si oprime el botón "Borrar nombre", mostrar un menú para que el usuario confirme la acción. 20 PRESENTANDO OPCIONES CON TOOLBARS Y PICKERS. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 10

11 Pickers 21 El componente PickerView muestra una serie de datos para que el usuario pueda seleccionar alguno. 22 Primero el fácil, Date Picker Este componente muestra fechas que el usuario puede seleccionar. No es necesario configurarlo. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 11

Ejercicio 23 Crea un proyecto nuevo (Single View Application) Agrega un Date

Configura las propiedades del Date Picker para que muestre fechas desde el inicio

Cuando el usuario hace tap sobre el botón, la fecha seleccionada se muestra en la

12 Ejercicio 23 Crea un proyecto nuevo (Single View Application) Agrega un Date Picker en la vista, un Text Field y un Button. Configura las propiedades del Date Picker para que muestre fechas desde el inicio del semestre hasta su fin. Cuando el usuario hace tap sobre el botón, la fecha seleccionada se muestra en la caja de texto (no editable) Ejercicio 24 Crea outlets para poder acceder al Text Field y el Date Picker desde el código. Muestra en un Text Field la fecha seleccionada. RETO. En el Text Field sólo muestra la fecha, la hora no. n Busca algunos de métodos de NSString que te faciliten esta tarea. Ing. Roberto Mar.nez Román - rmroman@itesm.mx 12

13 25 Picker View Este componente requiere de un Delegado y un DataSource para poder construirse. Delegado. Genera la información que se pretende desplegar en cada renglón. DataSource. Proporciona información sobre el número de renglones y el número de componentes que tendrá el picker view. Crea un proyecto nuevo y en la vista agrega un UIPickerView 26 Delegado y DataSource En nuestro ejemplo, el controlador será el delegado y datasource. Implementa los protocolos class Segundo: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate { } Ing. Roberto Mar.nez Román - rmroman@itesm.mx 13

14 Implementando los métodos 27 func numberofcomponentsinpickerview(pickerview: UIPickerView) - > Int { } return 3 func pickerview(pickerview: UIPickerView, numberofrowsincomponent component: Int) - > Int { } return 5 func pickerview(pickerview: UIPickerView, titleforrow row: Int, forcomponent component: Int) - > String! { } return "Hola" Ing. Roberto Mar.nez Román - rmroman@itesm.mx 14

Documentos relacionados

PERIODO 3 HOJA DE CÁLCULO CONCEPTOS INTERMEDIOS OPERACIONES CON CELDAS, FILAS Y COLUMNAS EN EXCEL SELECCIONAR COPIAR MOVER BORRAR

PERIODO 3 HOJA DE CÁLCULO CONCEPTOS INTERMEDIOS CONTENIDOS OPERACIONES CON LIBROS DE TRABAJO EN EXCEL GUARDAR UN LIBRO CERRAR UN LIBRO. CREAR UN NUEVO LIBRO. ABRIR UN LIBRO OPERACIONES CON CELDAS, FILAS