Aprendiendo Objetive-C para IOS (Dia 8) – David Fraj Blesa´s Blog

Guion del blog de curso de Objetive-C para IOS – DIA 8

nota: Esto es no es curso propiamente dicho, es un diario de autoaprendizaje de objetive-c, que me sirve para afianzar conocimientos, y de paso, tener un diario de referencia, con ejemplos propios de uso del lenguaje.

————-

Vamos a ver como podemos crear un UIPickerView, cogiendo los datos de un vector, y haciendolo de tal manera que podamos interactuar con el picare, para poder recoger los datos, y mostrarlos o añadirlos a un cuadro de texto.

En primer lugar, creamos un interface con el Builder, con un TextView, un PickerView y 4 Botones.

Creamos los diferentes outlets de los botones, textview y picare, así como las acciones al pulsar en cada uno de los botones.

También creamos un objeto NSMutableArray llamado colores, que contendrá los nombre de los colores que queramos

Los archivos ViewController.h y ViewController.m quedaran así:

// ViewController.h

// Diario008

// Created by david fraj blesa on 14/06/12.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {

NSMutableArray *colores;

}

@property (retain, nonatomic) IBOutlet UITextView *txtTexto;

@property (retain, nonatomic) IBOutlet UIPickerView *pvOpciones;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton1;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton2;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton3;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton4;

– (IBAction)btnBoton1_touchUpInside:(id)sender;

– (IBAction)btnBoton2_touchUpInside:(id)sender;

– (IBAction)btnBoton3_touchUpInside:(id)sender;

– (IBAction)btnBoton4_touchUpInside:(id)sender;

@end

// ViewController.m

// Diario008

// Created by david fraj blesa on 14/06/12.

#import «ViewController.h»

@implementation ViewController

@synthesize txtTexto;

@synthesize pvOpciones;

@synthesize btnBoton1;

@synthesize btnBoton2;

@synthesize btnBoton3;

@synthesize btnBoton4;

————————-

Hasta ahora nada poco habitual. Ahora queremos que nuestro pickerview funcione, con lo que tenemos que seguir una serie de pautas.

Un UIPickerView, es un componente que NO PUEDE FUNCIONAR sino le establecemos quien es el delegado de sus acciones, y de donde provienen sus datos. De manera que es un componente que esta ligado a una cosa que se llama protocolos. De manera que para que este funcione, debemos implementar 2 protocolos fundamentales, UIPickerViewDelegate y UIPickerViewDataSource.

Pero que quiere decir esto? Basicamente, estamos firmando un contrato, como que nos comprometemos a implementar los métodos necesarios, para que estos dos protocolos funcionen, de manera que, tendremos obligatoriamente, que implementar una serie de métodos.

En primer lugar, en el archivo ViewController.h, debemos sustituir esto:

@interface ViewController : UIViewController {

NSMutableArray *colores;

}

por esto otro

@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> {

NSMutableArray *colores;

}

De esta forma de decimos, que nos comprometemos a implementar esos dos protocolos

Asi que el archivo ViewController.h quedara de forma definitiva así:

————————-

// ViewController.h

// Diario008

// Created by david fraj blesa on 14/06/12.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> {

NSMutableArray *colores;

}

@property (retain, nonatomic) IBOutlet UITextView *txtTexto;

@property (retain, nonatomic) IBOutlet UIPickerView *pvOpciones;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton1;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton2;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton3;

@property (retain, nonatomic) IBOutlet UIButton *btnBoton4;

– (IBAction)btnBoton1_touchUpInside:(id)sender;

– (IBAction)btnBoton2_touchUpInside:(id)sender;

– (IBAction)btnBoton3_touchUpInside:(id)sender;

– (IBAction)btnBoton4_touchUpInside:(id)sender;

@end

————————-

Los métodos que tenemos que implementar obligatoriamente, los escribiremos en el fichero ViewController.m, y serán estos métodos:

nota: pvOpciones es el nombre de mi pickerView

//———————–

//OBLIGATORIO: Le decimos el numero de componentes en el Picker view. En nuestro caso, solo 1

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pvOpciones{

}

//OBLIGATORIO:Le decimos el numero de filas del componentes. En nuestro caso, es el umero de elementos del array colores

– (NSInteger)pickerView:(UIPickerView *)pvOpciones numberOfRowsInComponent:(NSInteger)component{

}

//OBLIGATORIO:Le decimos, que el lo que se tiene que mostrar en cada una de las filas. Le decimos, que el elemento de

//vector colores

– (NSString *)pickerView:(UIPickerView *)pvOpciones titleForRow:(NSInteger)row forComponent:(NSInteger)component{

}

//OPCIONAL: Para ver que hacer si se elige un elemento

– (void)pickerView:(UIPickerView *)pvOpciones didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

}

//———————–

El archivo ViewController.m, quedara de forma definitiva así:

// ViewController.m

// Diario008

// Created by david fraj blesa on 14/06/12.

#import «ViewController.h»

@implementation ViewController

@synthesize txtTexto;

@synthesize pvOpciones;

@synthesize btnBoton1;

@synthesize btnBoton2;

@synthesize btnBoton3;

@synthesize btnBoton4;

– (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren’t in use.

}

#pragma mark – View lifecycle

– (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

//Establecemos el texto originalmente en vacio

[txtTexto setText:@» «];

//Vamos a agregar elementos al picker

//Primero creamos un array con lo que queremos añadir

colores = [[NSMutableArray alloc] init];

[colores addObject:@»rojo»];

[colores addObject:@»verde»];

[colores addObject:@»Azul»];

[colores addObject:@»Amarillo»];

[colores addObject:@»Rosado»];

[colores addObject:@»Blanco»];

}

– (void)viewDidUnload

{

[self setTxtTexto:nil];

[self setPvOpciones:nil];

[self setBtnBoton1:nil];

[self setBtnBoton2:nil];

[self setBtnBoton3:nil];

[self setBtnBoton4:nil];

[super viewDidUnload];

// Release any retained subviews of the main view.

// e.g. self.myOutlet = nil;

}

– (void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

}

– (void)viewDidAppear:(BOOL)animated

{

[super viewDidAppear:animated];

}

– (void)viewWillDisappear:(BOOL)animated

{

[super viewWillDisappear:animated];

}

– (void)viewDidDisappear:(BOOL)animated

{

[super viewDidDisappear:animated];

}

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

// Return YES for supported orientations

return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);

}

– (void)dealloc {

[txtTexto release];

[pvOpciones release];

[btnBoton1 release];

[btnBoton2 release];

[btnBoton3 release];

[btnBoton4 release];

[super dealloc];

}

– (IBAction)btnBoton1_touchUpInside:(id)sender {

//Con esto estableceriamos el texto en el boton que pongamos

[txtTexto setText:@»Hola que tal»];

}

– (IBAction)btnBoton2_touchUpInside:(id)sender {

//Con esto vamos añadiendo texto al existente

[txtTexto insertText:@»Otro texto»];

}

– (IBAction)btnBoton3_touchUpInside:(id)sender {

//Con esto añadimos al texto, el indice del elemento seleccionado en el pickerview

[txtTexto insertText:[NSString stringWithFormat:@»%i», [pvOpciones selectedRowInComponent:0]]];

}

– (IBAction)btnBoton4_touchUpInside:(id)sender {

//Con esto añadimos al texto, el nombre del elemento, accediendo al vector de colores

[txtTexto insertText:[NSString stringWithFormat:@»%@», [colores objectAtIndex:[pvOpciones selectedRowInComponent:0]]]];

}

//———————–

//Estamos oblligados a establecer estos metodos, ya que nos hemos comprometido a hacerlo al

//decirle que usamos los protocolos <UIPickerViewDelegate, UIPickerViewDataSource>, en el ViewController.h

//OBLIGATORIO: Le decimos el numero de componentes en el Picker view. En nuestro caso, solo 1

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pvOpciones{

return 1;

}

//OBLIGATORIO:Le decimos el numero de filas del componentes. En nuestro caso, es el umero de elementos del array colores

– (NSInteger)pickerView:(UIPickerView *)pvOpciones numberOfRowsInComponent:(NSInteger)component{

return [colores count];

}

//OBLIGATORIO:Le decimos, que el lo que se tiene que mostrar en cada una de las filas. Le decimos, que el elemento de

//vector colores

– (NSString *)pickerView:(UIPickerView *)pvOpciones titleForRow:(NSInteger)row forComponent:(NSInteger)component{

return [colores objectAtIndex:row];

}

//OPCIONAL: Para ver que hacer si se elige un elemento

– (void)pickerView:(UIPickerView *)pvOpciones didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

[txtTexto insertText:[NSString stringWithFormat:@»%@», [colores objectAtIndex:row]]];

}

//———————–

@end

——————-
——————-

SUPER IMPORTANTE:
Debemos conectar tanto el delegate del componente PickerView, como el datasoure, con el FileOwner.
Para esto, nos vamos al archivo xib, elegimos el PickerView, y en el inspector de conections, arrastramos sus dos outlets (primero uno, y luego el otro), ahacia filesowner.

Ver imagen: