PickerView: la scelta multipla e i delegate

Apple fornisce che un controllo girevole conosciuto come il UIPickerView, con la quale un utente può selezionare un elemento da un elenco. In questo tutorial ti spiegherò come creare una semplice pickerView a 2 colonne.

La visualizzazione del selettore consente all’utente di selezionare un elemento da un elenco. In questo tutorial, imparerai come è facile configurare una visualizzazione del selettore e rispondere agli eventi. Questo è il risultato finale:meteo pickerview

Ora creiamo un nuovo progetto di tipo Single-View Application e come nome mettiamo “Meteo” o qualcosa a nostro piacere.

Per prima cosa creiamo l’interfaccia grafica andiamo sul file xib e inseriamo 2 label e un PickerView in modo da coincidere con l’immagine sopra citata, l’interfaccia non è delle migliori ma sta a te colorarla e renderla carina.

Andiamo nel file ViewController.h e inseriamo questo codice :


#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIPickerViewDelegate,UIPickerViewDataSource>{

NSArray *array1;
 NSArray *array2;
}
@property (retain, nonatomic) IBOutlet UILabel *oggiLabel;
@property (retain, nonatomic) IBOutlet UILabel *voglioAndare;

@end

non facciamo altro che inserire i delegati del picker, dichiarare due array ed inserire le proprietà delle due label che andranno collegate al file xib e sintetizzate. Oppure come ho fatto io possiamo usare la tecnica del ctrl+click per collegare direttamente nel file ViewController.h tutti gli elementi creati nel file xib. La tecnica viene descritta nei minimi particolari qui: Apprendista sviluppatore 4 durante il tutorial per usare il MapKit. Inoltre non dimentichiamoci di collegare le proprietà dataSource e delegate al File’s Owner.

datasource delegate Ora andiamo nel file  ViewController.m  e inseriamo quest’altro codice:


- (void)viewDidLoad{

[super viewDidLoad];

array1=[[NSArray alloc]initWithObjects:@\"piove\",@\"nuvoloso\",@\"sole\", nil];

array2=[[NSArray alloc]initWithObjects:@\"il mare\",@\"la montagna\",@\"dormire\", nil];

}

Ora passiamo all’implementazione dei delegate:

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
 return 2; //numero delle colonne
}

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
 //il component indica la colonna su cui si agisce
 if (component==0) {
 return [array1 count];
 }
 else{
 return [array2 count];
 }

}

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

 switch (component) {
 case 0:
 return [array1 objectAtIndex:row];
 case 1:
 return [array2 objectAtIndex:row];
 }
 return nil;
}

Ed infine dobbiamo implementare il delegate della selezione che aggiornerà anche le label:

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

 switch (component) {
 case 0:
 NSLog(@\"Selezionato:%@ riga: %i\",[array1 objectAtIndex:row],row);
 oggiLabel.text =[NSString stringWithFormat:@\"Oggi:%@\",[array1 objectAtIndex:row]];
 break;
 case 1:
 NSLog(@\"Selezionato:%@ riga: %i\",[array2 objectAtIndex:row],row);
 voglioAndare.text = [NSString stringWithFormat:@\"voglio andare:%@\",[array2 objectAtIndex:row]];
 default:
 break;
 }
}

Non facciamo altro che controllare quale colonna si è mossa e quindi agiamo di conseguenza aggiornando le label con il nuovo valore ricevuto dalla riga del pickerView.

Ecco il risultato finale:

È tutto. Vi lascio con il progetto di esempio che abbiamo costruito insieme. Dubbi e domande, lasciate un commento.

download codice sorgente