Ios.s6

604 views
512 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
604
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Ios.s6

    1. 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. 2. CONTENIDO• Introducción• TableView• NavigationController• TabBar
    3. 3. CONTENIDO • Introducción• TableView• NavigationController• TabBar
    4. 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. 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. 6. CONTENIDO• Introducción • TableView• NavigationController• TabBar
    7. 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. 8. TABLE VIEW 2• Las clase que gestiona las vistas en tabla es UITableView que hereda de UIView
    9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. CONTENIDO• Introducción• TableView • NavigationController• TabBar
    21. 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. 22. NAVIGATION CONTROLLER• Como ejemplo podemos ver la aplicación de ajustes del sistema:
    23. 23. NAVIGATION CONTROLLER 2• Posee un array de controladores que actua como una pila • navigationController.viewControllers• Parte de un controlador raiz llamado rootController
    24. 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. 25. NAVIGATION CONTROLLER 4• Tambien podemos desapilar los controladores con [self.navigationController popViewControllerAnimated:YES];
    26. 26. CONTENIDO• Introducción• TableView• NavigationController • TabBar
    27. 27. TABBAR• El TabBares posiblemente el elemento más clásico dentro de el desarrollo de interfaces• Para las vistas en pestañas
    28. 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. 29. TABBAR 3
    30. 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. 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. 32. FIN

    ×