Curs de programació d’iOSNovembre de 2011

Organitza

8 Llistes (UITableView i UITableViewController)

• Les llistes interactives permeten als usuaris seleccionar, eliminar i reordenar elements.

• S’empren en la gran majoria d’aplicacions.

• Els elements es desplacen verticalment tal i com ho farien amb un UIScrollView

Llistes

• Hi ha diferents tipus de llistes

Llistes• Taules planes (plain table view)

• Taula agrupada (grouped table view)

Llistes

• Taula plana indexada (plain with section index)

Llistes

Llistes

• Per treballar amb una llista cal implementar un controlador i la seva vista:

• Un controlador UITableViewController

• Una vista UITableView

Llistes

• Un UITableView és una subclasse de UIScrollView, de la qual n’hereta la capacitat de fer scroll i l’efecte motlla “bouncy”.

• La vista UITableView representa gràficament una llista.

• Cada filera de la llista s’anomena cel·la.

• Les cel·les són vistes del tipus UITableViewCell

Llistes

• Les llistes es poden agrupar. Com a mínim tenen un grup.• Cada grup (section) consta d’un conjunt de cel·les.• Els grups tenen una capçalera.

UITableView

• Un UITableView és una vista; per tant, d’acord amb el patró Model-Vista-Controlador, només te representació visual però no es capaç de gestionar ni la lògica ni les dades.

• UITableView necessita un delegate que implementi el protocol UITableViewDelegate per notificar de qualsevol acció sobre la vista.

• UITableView necessita un delegate que implementi el protocol UITableViewDataSource que actui com a origen de dades.

UITableViewController

• Un UITableViewController és una classe que pot dur a terme totes les funcions mencionades:

• Controlador de la vista UITableView• Delegate de UITableViewDelegate• Delegate de UITableViewDataSource

UITableViewDataSource UITableViewDelegate

s’ajusta as’ajusta a

UITableViewController delegate

tableView

dataSource

UITableView

Exemple 8 – Catàleg simple de cotxes

#import <UIKit/UIKit.h>

@interface CatalegTableViewController : UItableViewController {

NSMutableArray *cotxes_familiars;}

- (void)inicialitzarDades;

@end

• CatalegTableViewController.h

Exemple 8 – Catàleg simple de cotxes

#import “CatalegTableViewController.h”#import “Cotxe.h”

@implementation CatalegTableViewController

- (void)inicialitzarDades{

cotxes_familiars = [[Cotxe obtenirCotxesFamiliars] retain];}

- (void)dealloc{

[cotxes_familiars release];[super dealloc];

}

@end

• CatalegTableViewController.m

Exemple 8 – Catàleg simple de cotxes

Exemple 8 – Catàleg simple de cotxes

Exemple 8 – Catàleg simple de cotxes

Protocol UITableViewDataSource

• Ara CatalegTableViewController emmagatzema objectes de tipus Cotxe.

• Mitjançant el protocol UITableViewDataSource el UITableView solicitarà aquestes dates a mostrar.

• http://developer.apple.com/library/IOs/#documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html

Protocol UITableViewDataSource

• Aquest protocol defineix un conjunt de mètodes que hem d’implementar. De tots els mètodes n’hi ha dos que s’han d’implementar obligatòriament:

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

Retornem el número de cel·les de les seccions (grups)

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

Retornem la cel·la que cal mostrar a una determinada filera

Protocol UITableViewDataSource

• Defineix altres mètodes no menys importants.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

Retornem el número de seccions (grups)

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

Retornem el títol de la secció especificada

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section

Retornem el peu de la secció especificada

Exemple 8 – Catàleg simple de cotxes

#import “CatalegTableViewController.h”#import “Cotxe.h”

@implementation CatalegTableViewController

- (void)inicialitzarDades{

cotxes_familiars = [[Cotxe obtenirCotxesFamiliars] retain];}

- (void)dealloc{

[cotxes_familiars release];[super dealloc];

}

• CatalegTableViewController.m

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

return [cotxes_familiars count];}

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

UITableViewCell *cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@”UITableViewCell”] autorelease];

Cotxe *cotxe = [cotxes_familiars objectAtIndex:[indexPath row]];[[cell textLabel] setText:[cotxe marca]];[[cell detailTextLabel] setText:[cotxe model]];[[cell imageView] setImage:[UIImage imageNamed:[cotxe foto]]];

return cell;}

@end

tableView:numberOfRowsInSections

UITableView NSMutableArray

CatalegTableViewController

dataSource

cotxes_familiars

count

tableView:cellForRowAtIndexPath:

UITableView NSMutableArray

CatalegTableViewController

dataSource

cotxes_familiars

objectAtIndex:

Cotxe

Cotxe

Cotxe

0

1

2

UITableViewCell

UITableViewCell

UITableViewCell

0

1

2

UITableViewCell

• Un UITableViewCell és una subclasse de UIView, i cada fila d’una vista UITableView està representada per una instància de UITableViewCell

• Un UITableViewCell està compost per dos vistes:

• contentView: S’hi mostren les dades.

• accessoryView: S’hi mostra l’accessori.

UITableViewCell

UITableViewCell contentView(Vista de continguts)

accessoryView(Vista accessori)

Vista dels continguts de la cel·la

UITableViewCell

• Tipus de cel·les estàndar de l’SDK:

UITableViewCell

• Tipus d’accessoris estàndar de l’SDK:

• UITableViewCellAccessoryDisclosureIndicator

• UITableViewCellAccessoryDetailDisclosureButton

• UITableViewCellAccessoryCheckmark

• UITableViewCellAccessoryNone

cell.accessoryView = [[ UIImageView alloc ] initWithImage:[UIImage imageNamed:@“imatge.png" ]];

• Accessori customitzat:

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

Reutilització de cel·les

• L’iPhone te una quantitat limitada de memòria. No és recomanable carregar en memòria moltes cel·les.

• Només és necessari carregar en memòria les cel·les que l’usuari veu. Les que estan fora de l’àrea de visió no cal tenir-les en memòria i s’alliberen.

• Reutilitzant dinàmicament les cel·les evitarem colapsar la memòria del dispositiu.

Reutilització de cel·les

• Quan l’usuari es mou per la llista, algunes cel·les surten de la pantalla i van a parar a un dipòsit (caché) de cel·les disponibles per a la seva reutilització.

• Enlloc de crear una nova cel·la cada vegada, l’origen de dades comprova en primer lloc si hi ha cel·les disponibles al dipòsit.

Reutilització de cel·les

UITableViewCell 2

UITableViewCell 3

UITableViewCell 4

UITableViewCell 1

UITableViewCell 1La cel·la Cell 1

surt de la pantalla...

L’usuari mou la llistaen aquesta direcció

...i és reintroduïdanovament

Porció visiblede l’UITableView

Reutilització de cel·les

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

UITableViewCell *cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@”UITableViewCell”] autorelease];

Cotxe *cotxe = [cotxes_familiars objectAtIndex:[indexPath row]];[[cell textLabel] setText:[cotxe marca]];[[cell detailTextLabel] setText:[cotxe model]];

return cell;}

Subclasses de UITableViewCell• Podem implementar subclasses de UITableViewCell per

dissenyar les nostres propies cel·les totalment a mida.

Exemple 9 – Catàleg de cotxes

#import <UIKit/UIKit.h>#import “Cotxe.h"

@interface CotxeTableViewCell : UITableViewCell{

UIImageView *marc_thumbnail;UIImageView *thumbnail;UIImageView *background_cella;UIImageView *puntuació;UILabel *etiqueta_marca;UILabel *etiqueta_model;Cotxe *cotxe;

}

@property (nonatomic, retain) Cotxe*cotxe;

- (void)esPaginador:(bool)p;

@end

• CotxeTableViewCell.h

Exemple 9 – Catàleg de cotxes

#import “CotxeTableViewCell.h"

@implementation CotxeTableViewCell

- (void)layoutSubviews {

if (self.editing) return;

[super layoutSubviews];CGRect contentRect = self.contentView.bounds;

CGRect frame = CGRectMake(90, 5, 200, 17);self.categoria.backgroundColor = [UIColor clearColor];self.categoria.frame = frame;

//Mostrar el titular de l'articleframe = CGRectMake(90, 23, 200, 44);self.titular.backgroundColor = [UIColor clearColor];self.titular.frame = frame;

//Es fa rotar l'indicador[self startRotate];

self.editing = true;}

@end

• CotxeTableViewCell.m