Your SlideShare is downloading. ×
0
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Ios.s6
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
430
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. 6 - TABLE, NAVIGATION Y TABBAR CONTROLLERSCurso de desarrollo de aplicaciones móviles para iPhone y iPad endika.gutierrez@urbegi.com alex.rayon@urbegi.com Urbegi Learning Contents
    • 2. CONTENIDO• Introducción• TableView• NavigationController• TabBar
    • 3. CONTENIDO • Introducción• TableView• NavigationController• TabBar
    • 4. INTRODUCCIÓN• Conla primera versión del sistema iOS se introdujeron nuevas tendencias en el desarrollo de interfaces móviles que marcaron un antes y un después• Parte de estos elementos fueron las TableView y el NavigationController
    • 5. INTRODUCCIÓN 2• Lamayor parte de las aplicaciones en iOS estan basadas en estos elementos• Practicamente todas las que incorpora el sistema las usan
    • 6. CONTENIDO• Introducción • TableView• NavigationController• TabBar
    • 7. TABLE VIEW• Las TableViewson un tipo de vista que permite visualizar diversos elementos en una lista ó tabla• El uso más sencillo es el que se puede apreciar en la aplicación de contactos• Sin embargo es empleado en otros muchos ejemplos más complejos, mensajes, etc
    • 8. TABLE VIEW 2• Las clase que gestiona las vistas en tabla es UITableView que hereda de UIView
    • 9. TABLE VIEW 3• Las TableView precisan de dos protocolos clave para su funcionamiento • El dataSource UITableViewDataSource • El delegate UITableViewDelegate• La clase UITableViewController hereda de UIViewController e implementa estos dos protocolos
    • 10. TABLE VIEW 4• Otro elemento clave de la vista en tabla son las celdas• Estas estan compuestas de pequeñas vistas totalemente personalizables, en tamaños y visualización• Las celdas son de la clase UITableViewCell • Podemos heredar de estas para personalizar su aspecto o utilizarlas directamente si son elementos más sencillos
    • 11. TABLE VIEW DATASOURCE• El protocolo dataSource se encarga de proveer a la vista de todos los elementos necesarios• Veamos los principales métodos
    • 12. TABLE VIEW DATASOURCE 2• Veamos los principales métodos@protocol UITableViewDataSource<NSObject>@required- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath;@optional- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; // Si no se implementa 1- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;// ...@end
    • 13. TABLE VIEW DATASOURCE 3• Los dos métodos que deberemos implementar son:• - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; • Retorna el número de celdas para una sección en concreto• - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; • Retorna la celda para un indice en concreto
    • 14. TABLE VIEW DATASOURCE 4• Aparece una nueva clase para referenciar un indice dentro de la tabla NSIndexPath• Contiene un entero para la sección y otro para la fila • indexPath.section • indexPath.row
    • 15. TABLE VIEW DATASOURCE 5• El funcionamiento de las tablas hace que las celdas que se vayan ocultando al avanzar el scroll se reutilicen para crear nuevas celdas• Paraesto las celdas poseen un string como identificador del tipo de celda
    • 16. TABLE VIEW DATASOURCE 6• Veamos un ejemplo de una implementación típica de un dataSource:- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // Declaramos un identificador ya que solo habrá un tipo de celda static NSString *CellIdentifier = @"Cell"; // Desencolamos una celda que no este en uso UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; // Si no podemos desencolar ninguna celda creamos una nueva if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitlereuseIdentifier:CellIdentifier]; } // Configuramos la celda cell.textLabel.text = @"Prueba"; cell.detailTextLabel.text = @"Subtítulo"; return cell;}
    • 17. TABLE VIEW DELEGATE• Elprotocolo delegate se encarga de lanzar los eventos a la clase que implemente el protocolo • Tipicamente el controlador• Veamos los principlaes métodos
    • 18. TABLE VIEW DELEGATE 2@protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>@optional// Personalización de la celda- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cellforRowAtIndexPath:(NSIndexPath *)indexPath;// Configuración de las alturas de las celdas- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;// Vistas para las cabeceras y pie de sección- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;// ...@end
    • 19. TABLE VIEW DELEGATE 3• En principio no requiere ningún método obligatorio • Sinembargo estos métodos permiten personalizar la apariencia y tamaños de las celdas • Además de recibir los eventos que se produzcan en la tabla
    • 20. CONTENIDO• Introducción• TableView • NavigationController• TabBar
    • 21. NAVIGATION CONTROLLER• El navigation controller permite generar navegaciones tipo push y pop de manera sencilla y eficiente• Presente en casi todo tipo de aplicaciones en navegación
    • 22. NAVIGATION CONTROLLER• Como ejemplo podemos ver la aplicación de ajustes del sistema:
    • 23. NAVIGATION CONTROLLER 2• Posee un array de controladores que actua como una pila • navigationController.viewControllers• Parte de un controlador raiz llamado rootController
    • 24. NAVIGATION CONTROLLER 3• Paraapilar una nueva vista con una transición definida en el storyboard simplemente ejecutaremos desde el controlador: [self performSegueWithIdentifier:@"identificador" sender:self];• Si por el contrario queremos apilar un controlador creado manualmente haremos: [self.navigationController pushViewController:controlador animated:YES];
    • 25. NAVIGATION CONTROLLER 4• Tambien podemos desapilar los controladores con [self.navigationController popViewControllerAnimated:YES];
    • 26. CONTENIDO• Introducción• TableView• NavigationController • TabBar
    • 27. TABBAR• El TabBares posiblemente el elemento más clásico dentro de el desarrollo de interfaces• Para las vistas en pestañas
    • 28. TABBAR 2• Presente en un gran número de aplicaciones de escritorio y adaptado a los dipositivos móviles• Se puede ver en la aplicación de música, reloj y muchas otras
    • 29. TABBAR 3
    • 30. TABBAR 4• Contieneun array de controladores con un controlador para cada una de sus pestañas• Accesibles a través de tabBar.viewControllers
    • 31. TABBAR 5• Las pestañas se suelen definir en el storyboard del mismo modo que se gestionan los segues• La propia vista aplica el efecto a los botones
    • 32. FIN

    ×