Ios.s6

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

CONTENIDO

• Introducción

• TableView

• NavigationController

• TabBar

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

INTRODUCCIÓN 2

• Lamayor parte de las aplicaciones en iOS estan basadas en
estos elementos

• Practicamente todas las que incorpora el sistema las usan

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

TABLE VIEW 2

• Las
clase que gestiona las vistas en tabla es UITableView que
hereda de UIView

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

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

TABLE VIEW
DATASOURCE

• El
protocolo dataSource se encarga de proveer a la vista de
todos los elementos necesarios

• Veamos los principales métodos

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

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

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 ﬁla
• indexPath.section

• indexPath.row

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 identiﬁcador del
tipo de celda

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;
}

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

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

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

NAVIGATION
CONTROLLER

• El
navigation controller permite generar navegaciones tipo
push y pop de manera sencilla y eﬁciente

• Presente en casi todo tipo de aplicaciones en navegación

NAVIGATION
CONTROLLER
• Como ejemplo podemos ver la aplicación de ajustes del
sistema:

NAVIGATION
CONTROLLER 2

• Posee un array de controladores que actua como una pila
• navigationController.viewControllers

• Parte de un controlador raiz llamado rootController

NAVIGATION
CONTROLLER 3

• Paraapilar una nueva vista con una transición deﬁnida 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];

NAVIGATION
CONTROLLER 4

• Tambien podemos desapilar los controladores con
[self.navigationController popViewControllerAnimated:YES];

TABBAR

• El TabBares posiblemente el elemento más clásico dentro de
el desarrollo de interfaces

• Para las vistas en pestañas

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

TABBAR 4

• Contieneun array de controladores con un controlador para
cada una de sus pestañas

• Accesibles
a través de
tabBar.viewControllers

TABBAR 5

• Las
pestañas se suelen deﬁnir en el storyboard del mismo
modo que se gestionan los segues

• La propia vista aplica el efecto a los botones

Ios.s6

Más contenido relacionado

Destacado (6)

Similar a Ios.s6 (18)

Ios.s6

Notas del editor