1. 6 - TABLE, NAVIGATION Y
TABBAR CONTROLLERS
Curso 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:UITableViewCellStyleSubtitle
reuseIdentifier: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 *)cell
forRowAtIndexPath:(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