{"id":3289,"date":"2010-05-07T14:11:53","date_gmt":"2010-05-07T12:11:53","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3289"},"modified":"2010-05-11T14:26:53","modified_gmt":"2010-05-11T12:26:53","slug":"t039-usiamo-le-uitableview-parte-1-creiamo-e-popoliamo-le-nostre-tabelle","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t039-usiamo-le-uitableview-parte-1-creiamo-e-popoliamo-le-nostre-tabelle\/","title":{"rendered":"T#039 – Usiamo le UITableView (parte 1): creiamo e popoliamo le nostre tabelle"},"content":{"rendered":"

\"\" Quella di oggi \u00e8 la prima parte di una serie di tutorial che riguardano la creazione e la gestione delle UITableView<\/strong>, ovvero le tabelle (per intenderci, come quella che contiene i vostri contatti). Vedremo come crearne una, come gestire la sua configurazione di base e come popolarla di dati. Nei successivi tutorial, invece, vedremo qualche funzionalit\u00e0 in pi\u00f9, fino ad implementare la ricerca all’interno della tabella stessa. Tornate quindi spesso a trovarci e imparerete a sfruttare anche voi questo componente fondamentale della programmazione per iPhone.<\/p>\n

1. Creiamo un nuovo progetto<\/h4>\n

Apriamo Xcode e selezioniamo “File -> New Project”. Nel men\u00f9 che ci appare selezioniamo “Navigation-based Application”, clicchiamo su “Choose\u2026”, immettiamo come nome “tableViewTutorial” e facciamo clic su “Save”. Abbiamo cos\u00ec creato il nostro nuovo progetto.<\/p>\n


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

Questo template di Xcode ci fornisce gi\u00e0 una tabella con una barra di navigazione, semplificandoci notevolmente il lavoro!<\/p>\n

Nota:<\/strong> questo tutorial funziona con SDK 3.0 e superiori.<\/em><\/p>\n

Aprendo il file “RootViewController.xib” con Interface Builder possiamo notare la struttura gi\u00e0 pronta, non dovremo toccare niente!<\/p>\n


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

2. Inseriamo gli elementi della tabella<\/h4>\n

A differenza di tutti i passaggi che dovevano essere eseguiti fino al SDK 2.x, dovremo solamente inserire poche righe di codice per avere la nostra tabella gi\u00e0 pronta e funzionante!<\/p>\n

Apriamo il file “RootViewController.h” e inseriamo la dichiarazione del seguente componente:<\/p>\n

\r\n@interface RootViewController : UITableViewController {\r\n\tNSMutableArray *lista;\r\n}\r\n\r\n@property (nonatomic, retain) NSMutableArray *lista;\r\n\r\n@end\r\n<\/pre>\n
Abbiamo de\ufb01nito un array (riga 2) in cui inseriamo tutti gli elementi che devono poi essere visualizzati nella tabella. Notate che abbiamo utilizzato un NSMutableArray, questo perch\u00e8 dovremo avere la possibilit\u00e0 di poter modi\ufb01care gli elementi che lo compongono (analizzeremo meglio questo aspetto quando sar\u00e0 necessario).<\/p>\n
Spostiamoci ora nel \ufb01le “RootViewController.m” e inseriamo queste istruzioni:<\/p>\n
\r\n#import \"RootViewController.h\"\r\n\r\n@implementation RootViewController\r\n\r\n@synthesize lista;\r\n\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n\r\n\tself.title = @\"Prodotti Apple\";\r\n\r\n\t\/\/elementi da visualizzare nella tabella\r\n\tlista = [[NSMutableArray alloc] initWithObjects:@\"iPhone\", @\"iPod\",\r\n\t\t\t @\"iPod Touch\", @\"iMac\", @\"iBook\", @\"MacBook\", @\"MacBook Pro\", @\"Mac Pro\",\r\n\t\t\t @\"PowerBook\", nil]; \r\n\r\n    \/\/ Uncomment the following line to display an Edit button in the navigation bar for this view controller.\r\n    \/\/ self.navigationItem.rightBarButtonItem = self.editButtonItem;\r\n}\r\n<\/pre>\n
Analizziamo quello che abbiamo appena scritto. Chi ha gi\u00e0 un minimo di esperienza con la programmazione per iPhone conoscer\u00e0 certamente il metodo “viewDidLoad<\/strong>“: questo viene eseguito subito dopo il caricamento della vista, e ci permette di settare tutte le variabili e tutti i parametri all’avvio. Per prima cosa abbiamo impostato il titolo alla nostra tabella (riga 10), che apparir\u00e0 nella UINavigationBar presente nella vista. Dopodich\u00e8 viene inizializzata la lista (che \u00e8 un oggetto NSMutableArray), inserendoci i vari elementi (riga 13).<\/p>\n
Ora dobbiamo definire i metodi che si occupano di popolare la tabella. Scorrendo il file “RootViewController.m” li troverete gi\u00e0 (Xcode li inserisce sempre di default), dovete solo completarli. Iniziamo definendo i seguenti due:<\/p>\n
\r\n- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {\r\n    return 1;\r\n}\r\n\r\n\/\/ Setta il numero di righe della tabella .\r\n- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {\r\n    return [lista count];\r\n}\r\n<\/pre>\n
Il primo metodo che incontriamo \u00e8 “numberOfSectionsInTableView:<\/strong>“. Il codice da usare \u00e8 sempre questo, in tutte le tabelle che creerete per cui vi interessa avere un’unica sezione. Se provate a modificare questo valore, infatti, vedrete che (quando eseguirete l’applicazione) la lista degli oggetti sar\u00e0 ripetuta pi\u00f9 volte. Ovviamente non \u00e8 questa l’utilit\u00e0 di tale metodo, che, come accennato, permette di creare una tabella con pi\u00f9 sezioni (come l’applicazione contatti, che \u00e8 suddivisa in sezioni a seconda delle lettere alfabetiche).<\/p>\n
Il secondo \u00e8 “tableView: numberOfRowInSection:<\/strong>“, che usiamo per settare il numero di celle in ogni sezione (nel nostro esempio avremo una sola sezione). Questo valore deve corrispondere al numero di elementi che vogliamo inserire nella tabella, quindi quelli contenuti nell’oggetto “lista”.<\/p>\n
Ci resta solamente da inserire un metodo, quello che si occupa di inserire gli elementi nelle celle della tabella. Ecco il metodo in questione:<\/p>\n
\r\n\/\/ Setta il contenuto delle varie celle\r\n- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{\r\n\r\n\tUITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@\"cellID\"]; \r\n\r\n\tif (cell == nil){\r\n\t\tcell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@\"cellID\"] autorelease];\r\n\t\t\/\/setta lo stile con cui vengono selezionate le righe\r\n\t\tcell.selectionStyle = UITableViewCellSelectionStyleNone;\r\n\t}\r\n\t\/\/inseriamo nella cello l'elemento della lista corrispondente\r\n\tcell.textLabel.text = [lista objectAtIndex:indexPath.row];\r\n\treturn cell;\r\n}\r\n<\/pre>\n
Questo \u00e8 il metodo (fondamentale ed obbligatorio) che si occupa di settare in maniera corretta le celle della tabella. Alla riga 4 troviamo la dichiarazione di una cella, che viene poi allocata alla riga 7. Con l’istruzione presente alla riga 9 definiamo come deve essere l’aspetto delle righe quando vengono selezionate dall’utente. Con questa istruzione l’utente non potr\u00e0 selezionare nessuna riga, se invece la togliamo avremo la classica selezione con sfondo blu.
\nAlla riga 12, infine, settiamo il valore contenuto nella cella: esso deve essere letto dall’array, nella posizione uguale a quella della riga (ricordatevi che la numerazione dell’array e delle celle partono sempre da zero).<\/p>\n
Cliccate ora su “Build and Go!”: la nostra tabella inizia a prendere forma!<\/p>\n

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

\n\"Icona<\/a> Se avete problemi con il tutorial, questo \u00e8 il\u00a0nostro file di progetto<\/a>.
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Quella di oggi \u00e8 la prima parte di una serie di tutorial che riguardano la creazione e…<\/p>\n","protected":false},"author":254,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[216,88,217,27],"class_list":["post-3289","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-andrea-busi","tag-programmazione-iphone","tag-tabelle-iphone","tag-uitableview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3289","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\/254"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3289"}],"version-history":[{"count":14,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3289\/revisions"}],"predecessor-version":[{"id":3389,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3289\/revisions\/3389"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}