Scritto da Lucio Brucio Il marzo - 2 - 2011 1 Commento
Nel seguente articolo andremo a spiegare come personalizzare le celle di una vista a tabella, quindi di una UITableView, vista molto utilizzata nelle applicazioni per IOS.
In particolare per personalizzare una cella si sono due metodi principalmente, crearla con interfaccia grafica tramite Interface Builder oppure crearla attraverso il codice. Ovviamente crearla con IB è più semplice e si vede subito il risultato, ma il metodo risulta essere più lento, quindi per una cella va bene, ma se dobbiamo personalizzare l’intera lista conviene farlo attraverso il codice. Noi ovviamente andremo a scrivere un esempietto che ci permettere di customizzare una cella attraverso il codice, mettiamoci all’opera.

Creiamo il progetto

Apriamo XCode e creiamo un nuovo progetto dalla schermata iniziale, come template sceglieremo Navigation-based Application presente nel menu Application di IOS e chiamiamola “CustomCell:

Navigation based application

Navigation based application

A questo punto esplorando il progetto all’interno della cartella Classes ci troveremo due classi, l’application Delegate, cioè la classe principale dell’applicazione e una classe RootViewController. La classe RootViewContorller come si può notare estende la classe UITableViewController, quindi controlla tutto il comporta mento della vista caricate inizialmente. Se si lancia subito il progetto si visualizza una schermata con una UITableView è qua che noi andremo ad agire.

Ora dobbiamo dire alla UITableView che nella tabella è presente almeno una sezione e almeno una riga, altrimenti non visualizziamo nulla!!! Procediamo come segue:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return1;

}

 

Il nome dei due metodi è autoesplicativo. Come abbiamo detto andremo a personalizzare la cella attraverso il codice. Per fare questo andremo a modificare il metodo “cellForRowAtIndexPath” che restituisce una cella per ogni riga di ogni sezione. Andiamo ad inserire gli elementi di personalizzazione all’interno della nostra cella:

 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

   static NSString *CellIdentifier = @”Cell”;

   UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:CellIdentifier];

   if (cell == nil) {

      cell = [[[UITableViewCellalloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier] autorelease];

}

//creiamo il contenitore della cella

cell.contentView.frame = CGRectMake(0, 0, 320, 60);

//Aggiungiamo una label alla cella nella posizione x=10, y=10 con height=25 e width= 120

UILabel* text = [[UILabelalloc] initWithFrame:CGRectMake(10, 10,120, 25)];
//con background trasparente

text.backgroundColor = [UIColorclearColor];
//font size = 18 e allineamento a sinistra

text.font = [UIFontsystemFontOfSize:18];

text.textAlignment = UITextAlignmentLeft;
//aggiungiamo la label alla cella

[cell.contentView addSubview:text];

[text release];

//aggiungiamo un immagine di sfondo (image.png deve essere aggiunta al progetto)

UIImage* cellBackground = [UIImageimageNamed:@"image.png"];

UIImageView* background = [[UIImageView alloc] initWithImage:cellBackground];

background.frame = CGRectMake(0, 0, 320, 60);

[cell.contentView addSubview:background];

[background release];

return cell;

}

Il codice è opportunamente commentato e ovviamente nella cella è possibile aggiungere qualsiasi elemento in questo caso abbiamo aggiunto solo una label e un immagine di sfondo, provare per credere!

Credo che dovrebbe essere tutto… Ciao! :cool:

Rating 3.00 out of 5

Un commento.


Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.