1 / 33

Curs de programació d ’ iOS

Curs de programació d ’ iOS. Novembre 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 .

lane-pope
Download Presentation

Curs de programació d ’ iOS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Curs de programació d’iOS Novembre de 2011 Organitza

  2. 8Llistes(UITableView i UITableViewController) • Les llistesinteractivespermetenalsusuaris seleccionar, eliminar i reordenar elements. • S’empren en la gran majoriad’aplicacions. • Elselements es desplacen verticalment tal i comhofarienamb un UIScrollView

  3. Llistes • Hi ha diferentstipus de llistes

  4. Llistes • Taules planes (plaintableview)

  5. Llistes • Taula agrupada (groupedtableview)

  6. Llistes • Taula plana indexada (plainwithsectionindex)

  7. Llistes • Per treballaramb una llista cal implementar un controlador i la seva vista: • Un controlador UITableViewController • Una vista UITableView

  8. Llistes • Un UITableViewés una subclasse de UIScrollView, de la qualn’hereta la capacitat de ferscroll i l’efectemotlla“bouncy”. • La vista UITableViewrepresenta gràficament una llista. • Cada filera de la llistas’anomenacel·la. • Les cel·lessón vistes del tipusUITableViewCell

  9. Llistes • Les llistes es poden agrupar. Com a mínimtenen un grup. • Cada grup (section) consta d’unconjunt de cel·les. • Elsgrupstenen una capçalera.

  10. UITableView • Un UITableViewés una vista; per tant, d’acordamb el patróModel-Vista-Controlador, només te representació visual però no es capaç de gestionar ni la lògica ni les dades. • UITableViewnecessita un delegate que implementi el protocolUITableViewDelegate per notificar de qualsevolacció sobre la vista. • UITableViewnecessita un delegate que implementi el protocolUITableViewDataSource que actuicom a origen de dades.

  11. UITableViewController • Un UITableViewControllerés una classe que potdur a terme totes les funcionsmencionades: • Controlador de la vista UITableView • Delegate de UITableViewDelegate • Delegate de UITableViewDataSource UITableViewDataSource UITableViewDelegate s’ajusta a s’ajusta a delegate UITableViewController UITableView tableView dataSource

  12. Exemple 8 – Catàleg simple de cotxes • CatalegTableViewController.h #import <UIKit/UIKit.h> @interface CatalegTableViewController : UItableViewController { NSMutableArray *cotxes_familiars; } - (void)inicialitzarDades; @end

  13. Exemple 8 – Catàleg simple de cotxes • CatalegTableViewController.m #import “CatalegTableViewController.h” #import “Cotxe.h” @implementation CatalegTableViewController - (void)inicialitzarDades { cotxes_familiars= [[CotxeobtenirCotxesFamiliars] retain]; } - (void)dealloc { [cotxes_familiars release]; [super dealloc]; } @end

  14. Exemple 8 – Catàleg simple de cotxes

  15. Exemple 8 – Catàleg simple de cotxes

  16. Exemple 8 – Catàleg simple de cotxes

  17. ProtocolUITableViewDataSource • Ara CatalegTableViewControlleremmagatzemaobjectes de tipusCotxe. • Mitjançant el protocolUITableViewDataSource el UITableViewsolicitaràaquestes dates a mostrar. • http://developer.apple.com/library/IOs/#documentation/UIKit/Reference/UITableViewDataSource_Protocol/Reference/Reference.html

  18. ProtocolUITableViewDataSource • Aquestprotocoldefineix un conjunt de mètodes que hemd’implementar. De totselsmètodesn’hi ha dos que s’hand’implementarobligatòriament: • - (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section Retornem el número de cel·les de les seccions (grups) • - (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath Retornem la cel·la que cal mostrar a una determinada filera

  19. ProtocolUITableViewDataSource • Defineixaltresmètodes no menysimportants. • - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView Retornem el número de seccions (grups) • - (NSString *)tableView:(UITableView *)tableViewtitleForHeaderInSection:(NSInteger)section Retornem el títol de la secció especificada • - (NSString *)tableView:(UITableView *)tableViewtitleForFooterInSection:(NSInteger)section Retornem el peu de la secció especificada

  20. Exemple 8 – Catàleg simple de cotxes • CatalegTableViewController.m #import “CatalegTableViewController.h” #import “Cotxe.h” @implementation CatalegTableViewController - (void)inicialitzarDades { cotxes_familiars = [[CotxeobtenirCotxesFamiliars] retain]; } - (void)dealloc { [cotxes_familiars release]; [super dealloc]; }

  21. - (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section { return [cotxes_familiars count]; } - (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [[[UITableViewCellalloc] initWithStyle:UITableViewCellStyleSubtitlereuseIdentifier:@”UITableViewCell”] autorelease]; Cotxe *cotxe = [cotxes_familiarsobjectAtIndex:[indexPath row]]; [[cell textLabel] setText:[cotxemarca]]; [[cell detailTextLabel] setText:[cotxe model]]; [[cell imageView] setImage:[UIImageimageNamed:[cotxefoto]]]; return cell; } @end CatalegTableViewController tableView:numberOfRowsInSections count dataSource cotxes_familiars UITableView NSMutableArray

  22. CatalegTableViewController tableView:cellForRowAtIndexPath: objectAtIndex: dataSource cotxes_familiars UITableView NSMutableArray 0 0 UITableViewCell Cotxe 1 1 2 2 UITableViewCell Cotxe UITableViewCell Cotxe

  23. UITableViewCell • Un UITableViewCellés una subclasse de UIView, i cada fila d’una vista UITableViewestà representada per una instància de UITableViewCell • Un UITableViewCellestà compost per dos vistes: • contentView: S’himostren les dades. • accessoryView: S’himostral’accessori.

  24. UITableViewCell contentView (Vista de continguts) accessoryView (Vista accessori) UITableViewCell Vista dels continguts de la cel·la

  25. UITableViewCell • Tipus de cel·lesestàndar de l’SDK:

  26. UITableViewCell • Tipusd’accessorisestàndar de l’SDK: • UITableViewCellAccessoryDisclosureIndicator • UITableViewCellAccessoryDetailDisclosureButton • UITableViewCellAccessoryCheckmark • UITableViewCellAccessoryNone • cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; • Accessoricustomitzat: • cell.accessoryView= [[ UIImageViewalloc ] initWithImage:[UIImageimageNamed:@“imatge.png" ]];

  27. Reutilització de cel·les • L’iPhone te una quantitat limitada de memòria. No ésrecomanablecarregar en memòriamoltescel·les. • Nomésésnecessaricarregar en memòria les cel·les que l’usuariveu. Les que estanfora de l’àrea de visió no cal tenir-les en memòriai s’alliberen. • Reutilitzantdinàmicament les cel·lesevitarem colapsar la memòria del dispositiu.

  28. Reutilització de cel·les • Quanl’usuari es mou per la llista, algunescel·les surten de la pantalla i van a parar a un dipòsit(caché) de cel·les disponibles per a la sevareutilització. • Enlloc de crear una nova cel·la cada vegada, l’origen de dadescomprova en primer lloc si hi ha cel·les disponibles al dipòsit.

  29. Reutilització de cel·les La cel·la Cell 1 surt de la pantalla... UITableViewCell 1 UITableViewCell 2 Porció visible de l’UITableView UITableViewCell 3 L’usuari mou la llista en aquesta direcció UITableViewCell 4 ...i és reintroduïda novament UITableViewCell 1

  30. Reutilització de cel·les - (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [[[UITableViewCellalloc] initWithStyle:UITableViewCellStyleSubtitlereuseIdentifier:@”UITableViewCell”] autorelease]; Cotxe *cotxe = [cotxes_familiarsobjectAtIndex:[indexPath row]]; [[cell textLabel] setText:[cotxemarca]]; [[cell detailTextLabel] setText:[cotxe model]]; return cell; }

  31. Subclasses de UITableViewCell • Podem implementar subclasses de UITableViewCell per dissenyar les nostrespropiescel·lestotalment a mida.

  32. Exemple 9 – Catàleg de cotxes • CotxeTableViewCell.h #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

  33. Exemple 9 – Catàleg de cotxes • CotxeTableViewCell.m #import “CotxeTableViewCell.h" @implementation CotxeTableViewCell - (void)layoutSubviews { if (self.editing) return; [superlayoutSubviews]; CGRectcontentRect = self.contentView.bounds; CGRectframe= CGRectMake(90, 5, 200, 17); self.categoria.backgroundColor= [UIColorclearColor]; self.categoria.frame= frame; //Mostrar el titular de l'article frame = CGRectMake(90, 23, 200, 44); self.titular.backgroundColor= [UIColorclearColor]; self.titular.frame= frame; //Es fa rotar l'indicador [self startRotate]; self.editing= true; } @end

More Related