Curso de iOS7: UITabBarController, combinado con la Navigation Controller

Otro de los componentes principales de la navegación es el Tab Bar Controller. Este componente nos va a permitir manejar una serie de pestañas debajo de la escena que será relacionadas con otras escenas. Al pulsar cada una de las pestañas abrirán en la parte superior la escena que hayamos seleccionado. Para poder explicar cómo funciona crearemos un proyecto de Single View Application.

Al entrar al storyboard deberíamos ver lo un View Controller. Borramos el View Controller, seleccionándolo y dandole a la tecla de borrar. Esto nos debería dejar un storyboard limpio.

Incluyendo un Tab Bar Controller

Para incluir el Tab bar controller lo buscamos en la Biblioteca de Objetos:
Al arrastrarlo sobre el Storyboard deberíamos ver lo siguiente:
Como podemos ver se nos ha colocado el Tab Bar Controller como escena principal, y se nos han agregado dos View Controller más. Cada uno de ellos nos aparece enlazado con el Tab Bar Controller mediante un segue de tipo Root View Controller. De una manera muy parecida a como vimos en el caso del Navigation Controller.
Fijemonos en detalle como se ve el Tab Bar en el Storyboard:
Como podemos ver tenemos dos nuevas pestañas en la barra. Cada una de ellas representa a otra escena. La Item 1 representa a la primera escena:
Y el Item 2 representa a la segunda escena:

Propiedades del Bar Item

En ambos casos podemos modificar el Item de la pestaña seleccionándolo, desde su escena asignada, a través de sus propiedades:

Como podemos ver tenemos lo siguiente:

  • Title: el texto que sale en la pestaña
  • Image: imagen asignada
  • Tag: identificativo del item
  • Enabled: posibilidad de habilitar o deshabilitar el elemento
Vemos que al modificar el título en las pestañas de los elementos nos aparecen modificadas las pestañas en el tab bar controller:
Si asignamos un color de fondo a cada Escena secundaria, veremos, cuando vayamos a ejecutarla, el funcionamiento de la barra de pestañas. Para ello seleccionamos el view Principal de la escena secundaria:
Aquí podemos ver también El Tab Bar Item que hemos modificado anteriormente.
Ahora con la vista seleccionada, en sus propiedades:
Cambiamos el atributo Background y le ponemos el color que queramos, aquí por ejemplo hemos puesto Azul y Verde, respectivamente.
Al ejecutar la aplicación se verá lo siguiente:
Com podemos ver cuando está la primera pestaña seleccionada nos aparece la escena azul. Y cuando pulsamos sobre la segunda pestaña:
nos aparece la escena verde.

Eliminando una escena del Tab Bar Controller

Para eliminar una escena del tab bar controller basta con seleccionar el segue que se une a ella:
Y eliminarlo. En el storyboard:
O al intentar volver a ejecutar la aplicación ya no aparecerá esa pestaña:

Añadir una escena a la Tab Bar

Para añadir una escena a la Tab Bar es necesario establecer de nuevo el segue en el storyboard, partiendo del tab bar controller y con el control pulsado llevándolo a la escena que queremos incluir y soltarlo allí:
Al soltarlo debería aparecer un menú contextual:
Selecionamos dentro de Relationship Segue, view controllers y debería volver a aparecer el segue en su lugar:
y al ejecutarlo debería aparecer la pestaña nueva:
Así dentro del Tab Bar Controller podemos incluir varias pestañas. Esto se suele denominar navegación en Anchura. En comparación al Navigation Controller que se suele llamar navegación en Profundidad.
Prueba a Añadir una nueva vista Roja al Tab Bar Controller.

Combinando el Tab Bar Controller con el Navigation Controller

Ahora sobre el proyecto que ya hemos creado vamos a incluir el Navigation Controller, para ver cómo trabajan las dos juntas. Arrastramos al Storyboard un nuevo Navigation Controller:
Com ya vimos en el apartado de Navigation Controller. Al arrastrarlo nos aparece el Navigation Controller enlazado por un segue con un Table View Controller. De momento lo dejaremos para explicar las posibles combinaciones entre estos dos sistemas de navegación.

Dejando el Tab Bar Controller delante

Ahora veamos como funciona cuando enlazamos el Tab Bar Controller con un Navigation Controller. Para ello como vimos anteriormente, arrastramos con el control pulsado desde el Tab Bar Controller hasta el navigation controller y decimos que el segue es de tipo view controllers:
Nos aparecerá el segue conectando el tab bar controller con el navigation controller y debajo de la escena del navigation controller aparece su respectiva pestaña editable. Por supuesto en el tab bar controller aparecerá esa nueva pestaña:
Al ejecutar la aplicación podemos ver que al pulsar en la pestaña de la navegación:
nos sigue saliendo la barra de navegación arriba y la barra de pestañas abajo.
Repitamos el mismo proceso, pero esta vez colocando el navigation controller entre la tabbar y la vista roja:
  • Incluimos otro Navigation Controller
  • Eliminamos el segundo Table View Controller que está asociado a ese nuevo Navigation Controller
  • Eliminamos el segue que conecta el tab bar controller con la escena roja
  • Conectamos el tabbar controller con el nuevo navigation controller
  • Le damos un título a la pestaña del nuevo navigation controller
  • Y le decimos que la escena roja es la roto view controller del nuevo navigation controller

Debería quedar algo parecido a esto:

Ahora vamos a incluir un nuevo view controller en el storyboard y lo enlazaremos con la escena roja mediante un segue de tipo push:

  • Incluimos un nuevo View Controller
  • Le colocamos un color Cyan al view principal de ese nuevo view controller
  • Incluimos un botón en la barra de navegación en la escena roja
  • Arrastramos desde el botón, con el control pulsado hasta la escena Cyan
  • Seleccionamos el tipo push
Debería quedar de una manera similar a esto:
Al ejecutar la aplicación y entrar a la pestaña de la segunda navegación veremos lo siguiente:
como podemos ver nos visualiza la escena roja y se ve el botón que hemos incluido, si lo pulsamos:

nos sigue saliendo la barra de navegación arriba que nos permite volver a la vista roja y sigue saliendo la barra de pestañas en la parte inferior.

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 básico de Objective C: Categorías

Una de las cosas más interesantes de Javascript es la posibilidad de ir agregando propiedades y funcionalidades a las clases ya existentes. En Objective C se puede realizar algo similar utilizando las Categorías. Esto nos da la posibilidad de realizar la implementación de una clase mediante varias personas a la vez. Cada uno sería responsable de un fichero y se podría realizar una gestión de versiones muy sencilla.

Creación de una Categoría

Para crear la categoría en un proyecto abierto es necesario crear un nuevo fichero mediante el uso del menú File->New->File o pulsando Comando + N. Aparecerá el Asistente de creación de nuevo fichero:
Seleccionamos Objective-C category y pulsamos en Next. Aparecerá la pantalla de nombres:
Aquí es donde debemos escribir el nombre de la categoría y el nombre de la clase de la cual queremos ampliar funcionalidades en el campo Category on. Cuando terminemos pulsamos en Next. Y nos saldrá la pantalla de guardado:
Dejaremos que lo guarde en la misma carpeta del proyecto. Recordad dejar seleccionado en Targets el nombre del proyecto. Pulsamos en Create. Ahora nos debería aparecer el fichero de implementación de la nueva categoría, con un contenido similar a este:
#import “NSString+DVString.h”
@implementation NSString (DVString)
@end
Por otra parte deberíamos tener el fichero de cabecera .h:
#import <Foundation/Foundation.h>
@interface NSString (DVString)
@end
Como podemos ver el nombre de los ficheros debería ser primero el nombre de la clase que queremos ampliar un + y luego el nombre que le hemos dado a nosotros ala categoría. Por otra parte tanto en el fichero de cabecera como en el de implementación, se parecen mucho a los de una clase normal con sus @implementation y @end en el fichero de implementación. Y en el de cabecera con el @interface y @end .
En ambos casos después del primer @ se coloca el nombre de la clase que queremos ampliar funcionalidad y entre () el nombre de la categoría que estamos escribiendo.
Obviamente en el fichero de cabecera importamos las clases fundacionales y en el de implementación el fichero de cabecera de la categoría.

Incluyendo métodos y propiedades

La inclusión de métodos y propiedades sería de una manera similar a como se realiza en una clase normal. Tal como indicamos en el tema sobre Clases y Objetos.
Por ejemplo vamos a incluir un método que permita imprimir la cadena de caracteres por consola, el fichero de cabecera quedaría así:
#import <Foundation/Foundation.h>
@interface NSString (DVString)
– (void) imprime;
@end
y el fichero de implementación sería este:
#import “NSString+DVString.h”
@implementation NSString (DVString)
– (void) imprime{
    NSLog(@”%@”,self);
}
@end
Com puede verse hemos declarado e implementado un método llamado imprime que permite sacar por consola el valor de la cadena almacenada en el objeto.

Utilizando un Objeto de la categoría

Para ello en el fichero main.m deberemos importar el fichero de cabecera de la categoría:

#import “NSString+DVString.h”

    

La declaración del Objeto sería como se hace normalmente con un objeto NSString:
NSString *cadena=@”valor”;
Después sólo restaría utilizar el método declarado en la categoría:
[cadena imprime];

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

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

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