{"id":3148,"date":"2010-04-23T10:27:20","date_gmt":"2010-04-23T08:27:20","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3148"},"modified":"2013-06-20T10:43:26","modified_gmt":"2013-06-20T08:43:26","slug":"uipickerview-e-uidatepicker-guida-all-uso","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/uipickerview-e-uidatepicker-guida-all-uso\/","title":{"rendered":"UIPickerView e UIDatePicker – Guida all’uso"},"content":{"rendered":"

Nella guida di oggi approfondiremo un componente molto utilizzato all’interno delle applicazioni per iphone, stiamo parlando di UIPickerView<\/strong> (e UIDatePicker).
\nLo studio di questi due oggetti ci permetter\u00e0 di chiarire il concetto di delegate e di vedere all’opera il paradigma mvc (model-view-controller)
\nDiamo un’occhiata alla gerarchia delle classi per capire di cosa ci occupiamo oggi:<\/p>\n

<\/p>\n
\"\"<\/a><\/p>\n

Gerarchia delle classi UIPickerView e UIDatePicker<\/p>\n<\/div>\n

<\/center><\/p>\n

Come nostra consuetudine i nomi bordati in verde si riferiscono a classi gi\u00e0 trattate su questo stesso sito [qui<\/a>], mentre quelli bordati in rosso sono quelle che analizzeremo in questo articolo.<\/p>\n

Concorderete con me che non c’\u00e8 sistema migliore per studiare una classe se non quella di scaricare la class reference<\/strong> dal sito della apple, (ok, ok, a parte leggere il sorgente \ud83d\ude42 ) ecco quindi due link per un facile download:<\/p>\n

UIPickerView Class Reference<\/a>
\nUIDatePicker Class Reference<\/a><\/p>\n

Iniziamo analizzando il pi\u00f9 semplice tra i due, l’ UIDatePicker<\/strong> (che non necessita di delegate)\u00a0trasciniamone uno su una view oppure inserendo questo codice per generarlo a runtime:<\/p>\n

\r\nUIDatePicker *datePicker;\r\ndatePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 150, 0, 0)];\r\n[self.view addSubview:datePicker];\r\n<\/pre>\n
da notare che non importano le dimensioni del frame, il picker ha dimensione fissa.
\nVediamo quali sono le pi\u00f9 comuni propriet\u00e0 e metodi che questo oggetto ci mette a disposizione:<\/p>\n
maximumDate & minimumDate:<\/strong><\/p>\n
\r\n@property(nonatomic, retain) NSDate *maximumDate\r\n@property(nonatomic, retain) NSDate *minimumDate\r\n<\/pre>\n
permettono di limitare il range di variabilit\u00e0 della data impostando la data massima e la data minima selezionabile. Di default vengono impostate entrambe a nil quindi l’utente pu\u00f2 selezionare una data arbitrariamente passata o futura.<\/p>\n
esempio: (questo esempio \u00e8 complicato dall’utilizzo della classe nsdate<\/em> che vedremo un’altra volta.)<\/p>\n
\r\nNSString *min = @\"20042010\";\r\nNSString *max = @\"22042010\";\r\nNSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];\r\n[dateFormat setDateFormat:@\"ddMMyyyy\"];\r\nNSDate *datemin = [dateFormat dateFromString:min];\r\nNSDate *datemax = [dateFormat dateFromString:max];\r\n[self.view addSubview:datePicker];\r\ndatePicker.maximumDate = datemax;\r\ndatePicker.minimumDate = datemin;\r\n<\/pre>\n
minuteInterval:<\/strong><\/p>\n
\r\n@property(nonatomic) NSInteger minuteInterval\r\n<\/pre>\n
Indica l’intervallo di selezione dei minuti, di default viene posto a 1 ma possiamo modificarlo, purch\u00e9 ci limitiamo ad inserire divisori di 60 (per esempio 2, 5, 30 ma non 23 oppure 45)<\/p>\n
\r\ndatePicker.minuteInterval = 30;\r\n<\/pre>\n
setDate:animated:<\/strong><\/p>\n
questo metodo permette di impostare una data nell’ UIDatePicker a runtime, se animated \u00e8 impostato a YES verr\u00e0 visualizzata l’animazione delle rotelle che girano.<\/p>\n
datePickerMode<\/strong>:<\/p>\n
\r\n@property(nonatomic) UIDatePickerMode datePickerMode<\/strong>\r\n<\/pre>\n
Questa propriet\u00e0 determina l’aspetto delll’UIDatePicker, se permette la selezione di una data, di un orario, di entrambi o un conto alla rovescia. Il valore di default \u00e8 UIDatePickerModeDateAndTime<\/em>.<\/p>\n
Gli altri possibili valori sono:<\/p>\n
\r\nUIDatePickerModeTime\r\nUIDatePickerModeDate\r\nUIDatePickerModeDateAndTime\r\nUIDatePickerModeCountDownTimer\r\n<\/pre>\n
<\/p>\n\n\n\n\n
\n\n
\n\n
\"\"<\/a><\/p>\n
…ModeCountDownTimer<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/center><\/p>\n
Veniamo ora al secondo argomento di questa guida, parliamo di UIPickerView<\/strong>.<\/p>\n
Proviamo come poc’anzi a creare un pickerview e visualizzarlo nella nostra applicazione:<\/p>\n
\r\nUIPickerView *Picker;\r\nPicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 150, 0, 0)];\r\n[self.view addSubview:Picker];\r\n<\/pre>\n
Purtroppo il codice sembra non funzionare, il picker non si vede ed al suo posto otteniamo soltato un rettangolo nero, come mai? Ci viene in aiuto la class reference che dice:<\/p>\n
 “A UIPickerView object requires the cooperation of a delegate for constructing its components and a data source for providing the numbers of components and rows.<\/em>”<\/p>\n
Che per chi non mastica l’inglese vuol dire:<\/p>\n
“Un oggetto UIPickerView richiede la cooperazione di un degate per costruire i suoi componenti e di un data source che proveda a fornire il numero dei componenti e delle righe.”<\/p>\n
Quindi poich\u00e8 al nostro pickerview non abbiamo specificato n\u00e8 delegate<\/strong> n\u00e8 datasource<\/strong>, non \u00e8 in grado di visualizzare nulla, ecco quindi spiegato il rettangolo nero.<\/p>\n
Concettualmente delegate<\/em> e dataprovider<\/em> potrebbero essere due classi separate e create appositamente per tale scopo, ma spesso viene dato il compito di assolvere a questi ruoli allo stesso File’s Owner dell’uipickerview. Per fare questo quindi scriviamo:<\/p>\n
\r\n[Picker setDelegate:self];\r\n[Picker setDataSource:self];\r\n<\/pre>\n
Se provassimo adesso ad eseguire il codice vedremmo crashare inesorabilmente la nostra applicazione, ma anche a questo c’\u00e8 una spiegazione… abbiamo detto al pickerview di interpellare il suo File’s Owner (self) per ricevere tutte le informazioni necessarie per la sua visualizzazione, ma non abbiamo detto al File’s Owner cosa rispondere, quindi in questo empasse l’applicazione va in crash.<\/p>\n
Diamo quindi un’occhiata alla reference apple per UIPickerViewDelegate<\/strong> (qui<\/a>)<\/p>\n
scopriamo che la classe che vuol fare da delegare ad un uipickerview deve implementare almeno uno tra questi due metodi:<\/p>\n
\r\n\u2013 pickerView:titleForRow:forComponent:\r\n\u2013 pickerView:viewForRow:forComponent:reusingView:\r\n<\/pre>\n
Il secondo \u00e8 meno utilizzato perch\u00e9 si usa per visualizzare immagini all’interno del picker piuttosto che una descrizione testuale;<\/p>\n
Aggiungiamo quindi alla nostra classe questo metodo:<\/p>\n
\r\n- (NSString *)pickerView:(UIPickerView *)pickerView\r\n\t\t\t titleForRow:(NSInteger)row\r\n\t\t\tforComponent:(NSInteger)component\r\n{\r\n\treturn [NSString stringWithFormat:@\"VALORE NUM:%d\",row];\r\n}\r\n<\/pre>\n
non abbiamo ancora terminato, abbiamo implementato il delegate, resta da implementare il datasource.<\/p>\n
Leggiamo quindi sempre dalla reference apple (qui<\/a>) che i metodi da implementare sono tutti e due, e sono:<\/p>\n
\r\n- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView\r\n- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component\r\n<\/pre>\n
Il primo specifica quante “rotelle” devono essere disegnate nel picker, mentre il secondo specifica, per ogni “rotella” quanti devono essere i valori presenti. Nel nostro caso possiamo quindi aggiungere:<\/p>\n
\r\n- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView\r\n{\r\n\treturn 1;\r\n}\r\n- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component\r\n{\r\n\treturn 20;\r\n}\r\n<\/pre>\n
eseguiamo quindi il nostro codice e godiamoci finalmente il nostro UIpickerView!<\/p>\n
<\/p>\n
\"\"<\/a><\/p>\n
PickerView<\/p>\n<\/div>\n
<\/center><\/p>\n
La trattazione di questi oggetti \u00e8 stata particolarmente lunga e non \u00e8 affatto esaustiva, invito per tanto tutti a leggere le reference apple per riuscire a sfruttare al massimo questi oggetti.<\/p>\n
Un ultimo consiglio per gli amanti di interface builder, potete trascinare i picker come trascinereste qualsiasi altro oggetto, ricordatevi per\u00f2 di impostare nella finestra “connection” il corretto delegate e datasource (ctrl e trascina)<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Nella guida di oggi approfondiremo un componente molto utilizzato all’interno delle applicazioni per iphone, stiamo parlando di…<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[42,198,43,164],"class_list":["post-3148","post","type-post","status-publish","format-standard","hentry","category-framework","tag-framework","tag-uidatepicker","tag-uikit","tag-uipickerview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3148"}],"version-history":[{"count":17,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3148\/revisions"}],"predecessor-version":[{"id":10588,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3148\/revisions\/10588"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}