Curso ios7

Curso de iOS7: Manejo de formularios (II): UISwitch, UISlider, UISegmentedControl, UIStepper y UIDatePicker

29 marzo 2014
pepesan
No comments
Categories: Curso ios7, formularios ios7, uidatepicker ios7, uisegmentedcontrol ios7, uislider ios7, uiswitch ios7

Veamos ahora más vistas que podemos usar en los formularios. Recordemos que todos ellos deberán utilizarse como IBOutlets y para manejar sus eventos deberemos utilizar las IBAction, tal como dijimos en el tema de IBOutlets y UIActions.

UISwitch: la checkbox

Típicamente las checkbox de han utilizados como mecanismos que pueden ser activados o desactivados por parte del usuario, para marcar una opción.
En este caso el UISwitch actua de una manera similar. Por lo que cuando lo incluyamos como un IBOutlet podremos gestionar el objeto que tenemos en la vista y consultar su estado.
Veamos sus atributos en el inspector:
Como se puede ver la parte más importante es el estado que puede estar en On u Off. Si lo dejamos en On aparecerá marcado por defecto, con Off sucederá lo contrario.
También podemos llegar a seleccionar una imagen para el estado On y otra para el Off.

Propiedades: on

La propiedad más importante del UISwitch es la llama on de tipo booleano. Así que si queremos que esté activado por defecto mediante código deberemos realizar lo siguiente:
check.on=YES;
En el ejemplo usaremos el objeto IBOutlet llamado check.

Eventos

El evento más importante para el UISwitch es el Value Changed. Es el que nos permitirá saber cuando haya sido cambiado si estado. Y se disparará tantas veces como el usuario haya cambiado su valor.
Pongamos un ejemplo de IBAction:
– (IBAction)checkPulsada:(id)sender {
    NSLog(@”Check pulsado:%hhd”,[check isOn]);
}
Como puede verse en el ejemplo estamos consultado el método isOn que es el getter de la propiedad on.

UISlider: el selector numérico de rango

 Este tipo de control en el formulario permite seleccionar de un rango de números un valor.

Atributos: value

Veamos sus atributos para que resulte más fácil explicarlo:
Como podemos ver tenemos varios atributos importantes:
  • value: es el valor que ha seleccionado el usuario, de tipo float.
  • value minimum: es el valor mínimo del rango
  • value maximum: es el valor máximo que puede tomar
  • value Current: es el valor del que va a partir
  • Update Events, Continuous: cuando está seleccionado permite que se vaya cambiando el valor según el usuario vaya moviendo el slider. Si no está marcado, sólo se disparará cuando el usuario haya dejado de mover el slider.
En el ejemplo tenemos la típica selección de edad, 18 el mínimo, 65 el máximo y el valor actual es de 35.

Eventos: Value Changed

De cara a ver su funcionamiento en el ejemplo hemos dado de alta un UISlider con esas configuraciones y un TextLabel, ambos con sus respectivos IBOutlet, slider y edad, respectivamente.
También hemos dado de alta un IBAction llamado cambiaSlider: que será llamado cada vez que cambie el valor del slider, es decir relacionado con el Evento Value Changed, veamos la implementación del método:
– (IBAction)cambiaSlider:(id)sender {
    edad.text=[NSString stringWithFormat:@”%.0f”,slider.value];
}
Si nos damos cuenta el valor del slider es de tipo float, por lo que al convertirlo en cadena de caracteres utilizamos el %.0f  que nos permite pasarlo a un número sin decimales.
Luego se lo asignamos al texto del TextLabel de la edad para ver como va cambiando el valor del slider.

UISegmentedControl: los radio button

Como en la mayor parte de los formularios necesitamos presentar varias opciones de las cuales sólo podamos seleccionar una. Los radio button de HTML en iOS se llaman UISegmentedControl.

Atributos

Como podemos ver tenemos varios elementos interesantes. Para empezar el número de segmentos. Este nos permitirá meter más elementos en el siguiente desplegable.
Una vez seleccionad un segmento en el desplegable podemos configurar un título, una imagen y si está habilitado o seleccionado de primeras.
En el ejemplo tenemos dos segmentos para hombre y mujer y el primer segmento, el segmento 0, nos aparecerá seleccionado.
De esta manera si queremos saber que segmento ha sido seleccionado por el usuario deberemos usar el método   selectedSegmentIndex:
[sexo selectedSegmentIndex]
Este método nos devolverá un número del segmento que ha sido seleccionado por parte del usuario, empezando por 0.En el ejemplo, tenemos dos segmentos: 0 corresponde a Hombre y 1 a Mujer.
Si quisiéramos averiguar el título asignado a un segmento deberemos utilizar el método titleForSegmentAtIndex:
[sexo titleForSegmentAtIndex:@0]
En este caso nos devolverá la cadena de caracteres Hombre.

Eventos: Value Changed

Como en otros casos disponemos de un evento Value Changed que nos permite ejecutar un IBAction cada vez que cambie el segmento seleccionado, veamos un ejemplo:
– (IBAction)cambiaSegmented:(id)sender {
    NSLog(@”Sexo seleccionado:%ld”,(long)[sexo selectedSegmentIndex]);
}
En este caso mostrará por consola el valor 0 o 1 dependiendo de lo que haya seleccionado el usuario.

UIStepper: pasito a pasito

En muchos formularios queremos que el usuario vaya cambiando un valor pulsando botones para evitar que tenga que introducir manualmente un número.

Atributos: value

Como podemos ver es muy similar al UISlider, en su funcionamiento básico. El atributo principal será value. Minimum, Maximum y Current funcionan como con el UISlider.
Sin embargo Step nos permitirá cambiar el incremento y del decremento del valor almacenado.
Así si colocamos un Step de 2, sumará o restará 2 al valor cuando pulsemos el más o el menos respectivamente.
Continuous funcionará de una manera parecida al Slider también.
Y el Autorepeat permitirá dejar pulsado un botón y que se repita la acción pasado un tiempo.

UIDatePicker: El selector de fecha y hora

Este tipo de selector permitirá darle a escoger al usuario una fecha y una hora.

Atributos

Como podemos ver tenemos:
  • date: nombre del atributo de tipo NSDate que almacena la fecha
  • Mode: permite escoger el tipo de dato a recoger
  • Interval: el intervalo de tiempo
  • Date: fecha que queremos coger por defecto
  • Minimum y Maximum Date: fecha mínima y máximo
  • Timer: tiempo que queremos dar para escoger la fecha

Eventos: Value Changed

Como en el resto de elementos de formulario podemos escoger eventos para realizar un IBAction, el típico es Value Changed. Veamos un ejemplo:

– (IBAction)cambiaPicker:(id)sender {
    NSLog(@”%@”,datepicker.date);
}
Licencia Creative Commons

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos:

Cursos Gratuitos

También disponemos de algunos cursos de pago por si son de tu interés:

https://cursosdedesarrollo.com/tienda/

Curso de Angular:

Angular

Curso de iOS7: Manejo de Formularios(I): Introducción y UITextLabel

29 marzo 2014
pepesan
No comments
Categories: campo de texto iOS, Curso ios7, formularios iOS, uitextfield
Una de las cuestiones principales en la creación de aplicaciones en iOS es la introducción de datos por parte del usuario. Para ello los formularios son un punto fundamental. En este tema veremos como crear los formularios, manejar el teclado, gestionar los eventos principales y validarlos.

Vistas-Campos de Formulario

Empecemos enumerando los principales campos presentes en un formulario:
  • UITextField: campo de texto.
  • UILabel: Etiquetas de texto, típico para poner los títulos en el formulario.
  • UISwitch: Substituye a la típica checkbox. Puede estar Activado o Desactivado.
  • UISlider: Selector numérico de tipo float. Parecido al type range de HTML5.
  • UISegmentedControl: Similar a los botones de Radio en HTML.
  • UIStepper:  Selector numérico con + y -.
  • UIDatePicker: Permite seleccionar una fecha y/o una hora.
Como todo elemento visual para poder utilizarlo necesitamos arrastrar la vista a la escena, darle la forma que queremos y si queremos utilizarla desde una clase necesitamos crear un IBOutlet tal como se comentó en el tema sobre los IBOutlet.  También si queremos asignarle una acción debemos hacerlo como comentamos anteriormente, sería un IBAction.

 

Campos de Texto: UITextField

Parte fundamental de cualquier formulario los campos de texto permiten introducir información alfanumérica a las aplicaciones. Los campos de texto en iOS se representan mediante la clase UITextField.  Veamos como queda dentro de una escena:

Ahora veamos cuestiones fundamentales del manejo de sus atributos en el inspector:

 

Como puede verse en la captura con el campo seleccionado podemos ver sus atributos. Destaquemos los principales atributos.
  • text: es el valor introducido por parte del usuario en en campo.
  • placeholder: valor predeterminado que se presenta cuando el campo está vacío. Esto permite ayudar al usuario a rellenarlo.
  • delegate: clase responsable de manejar los eventos del campo.
  • Keyboard: nos permite seleccionar el tipo de teclado que queremos presentar al usuario. Esto facilita al usuario la introducción de información, así si es un número de teléfono, un número o un email, el teclado se ajusta para adaptarse a ese tipo de contenido.
  • Return Key: Permite seleccionar el texto que debe aparecer abajo a la derecha en el teclado. Cuando expliquemos los eventos del campo lo veremos más claro.
  • Secure: dejarlo marcado permite que no se vea lo que teclea el usuario, típico para campos de contraseña.
  • Enabled: permite utilizar el campo
Como todo campo que va a contener texto, permite modificar: el tipo de letra, su tamaño, color, alineamiento etc…

Formulario de Login

Veamoslo con un ejemplo:
En el ejemplo tenemos el típico formulario de login para autenticarse con la aplicación. Tenemos dos TextField uno para el nombre de usuario y otro para la contraseña, ambos son IBOutlet de la clase View Controller, user y pass respectivamente. Además hemos incorporado un botón para validar el formulario con el texto login en la escena, y hemos creado un IBAction llamado login: que se ejecuta cuando hacemos un Touch Up Inside (Click) en el botón.

 

Manejo del teclado en iOS

En iOS no existe la tecla Back-Atrás por lo tanto el teclado puede llegar a resultar molesto cuando intentemos rellenar los campos del formulario. Por lo que debemos aprender a hacer desaparecer y aparecer el teclado a nuestra conveniencia. Todo versa sobre el manejo del FirstResponder de la escena. En cualquiera de los casos será necesario que todos los campos sean IBOutlets de nuestra clase.
También es muy importante el uso del Return Key, como veremos más adelante.

Hacer aparecer el teclado en iOS

En el ejemplo nos interesa que el usuario pueda empezar a introducir directamente su nombre de usuario según se entra en la escena por lo que modificamos el viewDidLoad para que ejecute el siguiente código:
– (void)viewDidLoad
{
    [super viewDidLoad];
[user becomeFirstResponder];
}

 

Como pude verse ejecutamos el método becomeFirstResponder del primer campo para que se vea el teclado según se entra en la escena:

 

 

Como puede verse como no hemos rellenado nada del campo todavía, nos aparece el texto definido en el Placeholder y aparece el teclado. También nos aparece abajo a la derecha la Return Key que hemos seleccionado Next:

 

Explicaremos su funcionamiento más adelante.

Cómo hacer desaparecer el teclado

Para hacer desaparecer el teclado lo primero que tenemos que tener claro es quien es el FirstResponder en ese momento. En el ejemplo que nos ocupa de momento al no haber cambiado de campo el FisrtResponder es el campo del nombre de usuario user.
Si quisiéramos ocultar el teclado deberíamos ejecutar:
[user resignFirstResponder];

 

Manejo de la Return Key

En el caso del ejemplo es normal que queramos primero rellenar el nombre de usuario y luego la contraseña. Para luego intentar validar y enviar el formulario.
Para emular este comportamiento debemos realizar una serie de cambios.
Primero deberemos hacer que los dos delegate de los campos apunten a la clase View Controller que maneja el formulario. Para ello tendremos que seguir unos breves pasos que tendremos que repetir para cada campo.
En la escena pulsar el botón derecho sobre la vista del campo, nos debería salir un menú contextual similar a este:

 

Como se ve en la captura luego debemos conectar el delegate con el View Controller de la escena arrastrando y soltando sobre el icono del View Controller al soltar debería estar conectado correctamente, con el campo seleccionado,al ir al inspector de conexiones veríamos lo siguiente:

 

De esta manera nos aseguramos que el delegado está conectado correctamente.
Repetiremos el mismo proceso a la hora de asignar el delegado del campo de la contraseña.
Cambiamos el Return Key del campo user, para que ponga Next y en el campo pass le ponemos en el Return Key Done. Esto permitirá darle la idea al usuario del funcionamiento de la Return Key para este formulario.
También cambiamos el atributo tag del campo user, para que tenga el valor 1. Con el campo pass haremos lo mismo pero le pondremos el valor 2. De esta manera podremos distinguir
Después de esto es cuando tenemos que empezar a codificar el comportamiento.  Para ello es muy recomendable, implementar el protocolo UITextFielsDelegate en la clase del View Controller que maneje la escena. Esto nos ayudará a no equivocarnos con la creación me los métodos.
Por lo que el fichero de cabecera de la clase quedará similar a esto:
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UITextFieldDelegate>
@property (weak, nonatomic) IBOutlet UITextField *user;
@property (weak, nonatomic) IBOutlet UITextField *pass;
@property (weak, nonatomic) IBOutlet UIButton *login;

 

@end

 

Como puede verse en este caso hemos asignado también un IBOutlet al botón de login.
Con estos cambios hechos ya podemos ponernos a codificar el método textFieldShouldReturn :
– (BOOL)textFieldShouldReturn:(UITextField *)campo {
    if (campo.tag==1) {
        [pass becomeFirstResponder];
    } else {
        [pass resignFirstResponder];
        [self login:[self login]];
    }
    return YES;

 

}

 

Como puede verse en el ejemplo de codificación nos pasan un parámetro, el campo de texto que ha generado el evento. Verificamos si el tag del campo es 1. Sería el caso de que estuviésemos rellenando el campo user. En ese caso hacemos que el campo de la contraseña sea el FirstResponder. Por lo que el teclado seguiría mostrándose pero estaría enfocado en escribir en el campo de la contraseña.
En el segundo caso del if quitamos el teclado de la pantalla ya que estamos editando el campo pass e intentamos ejecutar el método login que habíamos asignado al Touch Up Inside del botón del login. Y de paso le pasamos como parámetro el IBOutlet del botón.
Nota: Hay que distinguir cada vez que se llama a un método luego se coloca un : y cuando se llama al getter de una propiedad no lleva :   .
Como en ambos casos no queremos modificar nada más del comportamiento del campo devolvemos YES.

Validación y recogida de parámetros

Veamos la función login que hemos codificado para el ejemplo:
– (IBAction)login:(id)sender{
    [user resignFirstResponder];
    [pass resignFirstResponder];
    NSLog(@”%@, %@”,user.text, pass.text);
    if ([user.text isEqualToString:@”admin”] &&
        [pass.text isEqualToString:@”admin”]) {
        NSLog(@”Login correcto”);
    }else{
         NSLog(@”Login incorrecto”);
    }
}
Como puede verse realizamos un paso previo a la validación que es intentar quitar el teclado de la pantalla, para asegurarnos que el teclado no está visible en ningún caso, llamamos desde los dos campos al método resignFirstResponder .
Como puede verse en el if estamos accediendo a la propiedad text, para recoger lo que el usuario nos ha introducido y lo comparamos con una literal de cadena.
Es una validación simple, pero creo que sirve de ejemplo claro.

Eventos

Especial interés tienen los eventos didFinishEditing y valueChanged. Ambos eventos se dispararán cuando se haya terminado de crear el texto y cuando el valor del campo haya cambiado, respectivamente.

 

Licencia Creative Commons

Curso de iOS7: Navigation Controller , Segues (II)

28 marzo 2014
pepesan
No comments
Categories: Curso ios7, navigation controller, segue iOS, uinavigationcontroller

Esta es la segunda parte del tema de Navigation Controller.  Una vez que tenemos la pantalla de Añadir y la de Listado es necesario añadir una nueva escena de detalle. Realizamos el mismo proceso que hicimos con la escena de añadir.
Agregamos un nuevo botón a la barra de navegación pero esta vez lo colocamos a la izquierda del título:

Colocamos un nuevo view controller en el storyboard:
Y conectamos el botón de detalle con el nuevo View Controller mediante un segue de tipo push:
Y como vemos en la captura ya tenemos enlazado el detalle.
Repetimos el mismo proceso con la escena de Editar, pero esta vez la enlazamos desde un botón colocado en la escena de Detalle. Por lo que el storyboard debería quedar más o menos así.
Como podemos ver tenemos prácticamente todas las pantallas referentes a la aplicación.

Forzar la vuelta en la Navegación

Ahora tendríamos que gestionar los formularios correspondientes al Añadir y al Editar. Por la simplificación de la explicación nos centraremos en la gestión de la información correspondientes a los segues.
En las pantallas de los formularios es normal que al pulsar el botón de guardar volvamos a la anterior pantalla. Intentaremos realizar que mediante código, o programáticamente,  realizar esa vuelta a la anterior pantalla.
Vemos cómo se haría en el ejemplo
En la pantalla del Añadir colocamos un botón que nos permita guardar:
Relacionamos la acción del Touch Up Inside del botón con un método IBAction, tal como vimos anteriormente:
  • Creamos una nueva clase que herede de UIViewController, llamada por ejemplo, AnadirViewController
  • Asignamos esa clase como Custom Class de la escena del Añadir
  • Dividimos el Editor, dejando a la derecha el fichero de cabecera de la clase
  • Arrastramos con el control pulsado desde el botón al código
  • Seleccionamos Action
  • Escribimos el nombre del método, por ejemplo, guardar
  • y Pulsamos en Connect
Por lo que tendremos un método similar a este en la implementación:
– (IBAction)guardar:(id)sender {
}
Ahora tenemos dos opciones:
  • Volver a la anterior escena
  • Volver a la escena principal (Root View Controller)
En el primer caso deberemos hacer uso del método popViewControllerAnimated , el método quedaría de la siguiente manera:
– (IBAction)guardar:(id)sender {
        //volver a la anterior escena
        [self.navigationController popViewControllerAnimated:YES];
}
En el segundo caso utilizaremos el método popToRootViewControllerAnimated y el método quedaría así:
– (IBAction)guardar:(id)sender {
    //volver a la primera escena después del Navigation Controller o el Root View Controller
    [self.navigationController popToRootViewControllerAnimated:YES];
}

Pasar datos entre Escenas mediante Segues

Ahora es Cuando debemos pasar información entre escenas. Imaginemos la aplicación que estamos haciendo. En la escena de detalle debemos presentar datos que deben de ser pasados desde la vista del listado. El salto entre escenas lo estamos haciendo mediante un segue de tipo push.
Veamos un detalle del inspector de atributos del segue en cuestión:

Como se puede ver en la captura le hemos colocado un identificador al Segue, de esta manera desde la programación podemos realizar acciones antes de que se realice el salto a la nueva escena, mediante el método prepareForSegue.

Antes de colocar el método debemos asegurarnos que tanto la escena del listado como la del detalle tienen asignada una clase, mediante el Custom Class.

Ahora debemos asegurarnos que la clase del detalle dispone de una propiedad que nos permita pasar el dato que necesitamos, por simplicidad incluiremos un NSString, que luego utilizaremos para presentarlo en una Label.

Por lo que incluiremos en la escena del detalle una Label, y la enlazaremos con una propiedad IBOutlet en la cabecera de la clase de detalle.

También incluiremos la propiedad NSString, por lo que el fichero de cabecera de la clase de Detalle quedará de la siguiente manera:

@property (strong, nonatomic) IBOutlet UILabel *etiqueta;

@property (nonatomic, strong) NSString *cadena;

Ahora ya podemos incluir el método en la implementación en la clase del listado. como necesitamos hacer uso de la clase del Detalle deberemos importar la clase:

#import “DVDetalleViewController.h”

y ahora podemos implementar el método:

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    NSLog(@”prepareForSegue: %@”, segue.identifier);
    if([segue.identifier isEqualToString:@”Detalle”])
    {
        DVDetalleViewController *detalleVC = segue.destinationViewController;
        detalleVC.cadena = @”Datos traspadados”;
    }

 

}

Como podemos ver en los parámetros nos pasan tanto el segue como el elemento que ha disparado el salto, en este caso el botón que pulsamos para realizar el salto.
Fijémonos en la primera linea:
NSLog(@”prepareForSegue: %@”, segue.identifier);
El identificador del segue está disponible como una propiedad de la clase, llamado identifier de esta manera podemos distinguir unos segues de otros dentro de una misma escena. Así si realizamos más de un salto desde una misma escena podemos filtrar entre ellos. Después tenemos el if donde nos aseguramos que estamos trabajando con el segue correcto que nos lleva a la escena del detalle. Y acto seguido recuperamos un objeto de la vista de detalle mediante el método destinationViewController . Con esto tenemos la instancia del objeto de la escena de destino y luego podemos modificar la propiedad cadena, que utilizaremos para almacenar el valor que necesitamos traspasar de una escena a otra.

Por otra parte en el DetalleViewController necesitaremos modificar el método viewDidLoad para hacer que según se cargue la vista ponga el dato en la etiqueta que añadimos anteriormente:

– (void)viewDidLoad
{
    [super viewDidLoad];
    etiqueta.text=cadena;

 

}

De esta manera al ejecutar la aplicación y pulsar en el botón del listado tendremos la escena de detalle pero en la etiqueta tendrá el texto traspasado:

 

Forzar un salto en la Navegación programáticamente

Una de las necesidades en la programación es que dependiendo de determinadas condiciones debemos realizar un salto entre escenas desde código.  Para ello deberemos utilizar el método  pushViewController del atributo navigationController del View Controller que estemos manejando con la navegación.
Vemos un ejemplo de código:
DVDetalleViewController *detalleVC = [self.storyboard instantiateViewControllerWithIdentifier:@”Detalle”];
    [self.navigationController pushViewController:vc animated:YES];
Como podemos ver en el ejemplo podemos inicializar nosotros el View Controller de destino utilizando el identificador de la escena del storyboard como parámetro y forzamos el salto push.

 

Licencia Creative Commons

Curso de iOS7: Navigation Controller, Segues (I)

26 marzo 2014
pepesan
No comments
Categories: Curso ios7, navigation controller, uinavigationcontroller

La mayor parte de las aplicaciones iOS disponen de varias escenas. Por lo que necesitamos mecanismos que nos permitan navegar entre esas escenas. Una de las maneras de realizar estos cambios entre escenas es el Navigation Controller (UINavigationController):

Para poder hacer uso de este componente, vamos a tener en mente una aplicación CRUD. Es decir una aplicación que sea capaz de realizar las típicas acciones de la gestión de datos. Es decir:

  • Listar: En este caso por simplificar el ejemplo utilizaremos una sola label que pretenderá ser el listado de datos y par de botones que nos lleven a otras escenas.
  • Añadir: la escena que permite añadir nuevos elementos, por lo tanto un formulario con un botón de guardar.
  • Detalle: escena que permite la visualización de la información de un elemento.
  • Editar: Escena que permite editar un elemento, un formulario con los datos.
  • Borrar: esta acción deberá borrar un elemento, en este ejemplo estará localizada en el detalle.
Para poder seguir el ejemplo crearemos un nuevo proyecto de single view application.
Donde en el storyboard veremos esa escena:

Seleccionamos el view controller de la escena y lo borramos pulsando el botón de Borrar atrás. Por lo que nos quedará una storyboard vacío.

A continuación arrastramos el Navigation Controller al Storyboard, nos deberíamos encontrar con algo parecido a esto:

Como podemos ver tenemos dos nuevas escenas en el storyboard. La primera es la correspondiente al Navigation Controller y está así seleccionada con la flecha inicial.
Si seleccionamos sólo el Navigation Controller podemos ver en la vista de Atributos lo siguiente:

Especialmente importantes son las dos secciones de esta captura. Primero vemos el apartado del Navigation Controller, que nos permitirá configurar si es visible o no la Barra de Navegación. Y por otro lado el Initial Scene, que está marcado, por lo que el la escena del Navigation Controller será la primera escena de la App.

Por otro lado vemos también que tenemos una segunda escena con un Table View Controller ya incorporado:

Como podemos ver en la captura nos indica que es el Root View Controller. Esto significa que será la escena principal tras pasar a través del Navigation Controller. Por lo que dispondrá de la barra de navegación y será mostrada en primer lugar, una vez haya pasado por el Navigation Controller.
Y ahora tenemos el Segue:

Los Segues son las conexiones con la navegación, son los elementos visuales dentro del storyboard que nos permitirán realizar cambios entre escenas.
Este tipo de segue es especial ya que permite establecer la escena principal o Root View Controller para el Navigation Controller.
Si queremos hacer que otra escena sea la Root View Controller debemos arrastrar con el control pulsado desde el Navigation Controller hasta otro View Controller y al soltar nos aparecerá un diálogo similar al siguiente:

Como podemos ver nos aparecen todos los tipos de Segue:

  • push: para la navegación
  • modal: saltos entre escenas sin navegación
  • custos: saltos personalizados
  • root view: para establecer root view controller con los Navigation Controller y Tab View Controller (como veremos más adelante).
Elegimos el root view y la nueva escena será la nueva Root View Controller.

Si ejecutamos la aplicación vemos lo siguiente:

Como puede verse disponemos del tableview y además de la barra de navegación arriba. Por lo que ya tenemos disponible la escena del Listar.

Para cambiar el título de la barra de navegación deberemos hacerlo desde la escena del Root View Controller, haciendo doble click en el título. A efectos prácticos funciona como una Label:

Lo cambiamos y ponemos Listado. Si lo volvemos a ejecutar veremos que ya está cambiado el título:

 

Añadir

Ahora coloquemos una nuevo View Controller para el Añadir. Arrastrando el View Controller al storyboard. Ahora para crear el salto entre escenas necesitamos incluir un nuevo botón que permita que al pulsarlo nos lleve a la nueva escena. En este caso vamos a escoger un nuevo tipo de botón que se utiliza para las barras de navegación, el Bar Button Item:

Este tipo especial de botón lo podemos colocar en la barra de navegación, y al ser más sencillo dispone de menos eventos asociados. Al arrastrarlo a la barra de navegación del Listado y cambiar el título quedará mas o menos así:

Ahora es cuando debemos colocar un nuevo segue para enlazar el botón de añadir con la nueva escena. Para ello debemos con el control pulsado tirar una línea desde el botón hasta la nueva escena:

Al soltar el botón del ratón nos aparecerá un nuevo diálogo contextual a la operación:

Para que funcione apropiadamente el segue y nos mantenga la navegación seleccionamos push y eso hará que aparezca el segue de tipo push entre las dos escenas:

Si pulsamos sobre él podemos ver que en el inspector de atributos aparece lo siguiente:

Lo importante de esta captura es que podemos elegir el Style, que son los distintos tipos de segue que hemos visto anteriormente y el Identificador del segue. Este identificador nos permitirá modificar por programación aquellas cosas que queramos modificar del View Controller que arranquemos. De momento nos sirve desde el diseño del Storyboard sin necesidad de programar nada hacer el salto entre escenas.

Por supuesto en la escena de Añadir aparecerá la barra de navegación y podemos modificar su título:

Si ejecutamos la aplicación veremos que efectivamente al arrancar la aplicación y pulsar el botón de añadir nos lleva a la siguiente escena:

Como puede verse en la captura al entrar en la escena de Añadir, aparece la barra de navegación y el botón que permite Volver a la anterior escena, como el título de la anterior escena es el de Listado esto es lo que aparece en el botón que nos permite volver.

En el siguiente tema veremos como ir añadiendo nuevas pantallas a nuestro CRUD.

Licencia Creative Commons

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies