Curso de iOS7: UITableView, Listados de información en Pantalla (I)

No hay aplicación que no tenga un listado en pantalla. Para esto existe el componente UITableView.

Al heredar de UIScrollView es una vista que es desplazable verticalmente. Lo cual nos viene muy bien ya que nos permite añadir mucha información aunque la pantalla no pueda llegar a presentarla toda de golpe. Según vayamos bajando podremos ver más información.

Podemos añadirlo a cualquier escena y arrastrando el TableView desde el Object Library:

Secciones y Filas

Al ser sólo un listado podemos pensar que es un componente simple, pero no es así. Para empezar puede manejar secciones (sections). Las secciones son como distintos apartados dentro del listado. Y dentro de cada sección puede manejar tantas filas (rows) como sea necesario. No es obligatorio que todas las secciones tengan el mismo número de filas. Por lo que podemos añadir tantas secciones como queramos y tantas filas en cada sección. 

Pies y Cabeceras

Todas las secciones disponen de un pie y una cabecera de sección.  Como cabría esperar la cabecera se coloca encima de la sección y el pie justo debajo.

Tipos de Contenido

El UITableView tiene dos tipos de contenido: Dinámico y Estático.

El modo dinámico nos obliga a tener que programar elementos en pantalla y en el modo estático podemos añadir elementos manualmente desde el propio Storyboard. 

Static Cells

Cuando estamos en el modo Estático podemos cambiar manualmente el número de secciones desde el inspector de atributos:

Aquí podemos ver que en el atributo Content está seleccionado Static Cells, es decir el modo estático. Si quisiéramos podríamos cambiarlo a Dynamic Cells.

También podemos cambiar el número de secciones con el atributo Sections. También podemos elegir el Estilo de las secciones así como el tipo de separador.

A la hora de seleccionar hay muchas maneras distintas de hacerlo. O pueden tener distintos tipos de usos. Para ello en el atributo Selection podemos elegir entre selección múltiple o simple.

La selección simple suele utilizarse cuando queremos que al pulsar una fila de una sección haga algo en concreto.

Si lo que quisiéramos hacer es que se pudieran seleccionar varios elementos del listado pondríamos Single Selection. Por temas de simplicidad en la explicación nos centraremos en la selección simple.

Para añadir una celda a una sección basta con arrastrar un UITableViewCell dentro de la sección que queremos ampliar.

Nota: Las Static Cells son muy cómodas cuando queremos hacer un formulario largo. Para la pequeña pantalla de un iPhone, es muy útil usarlos.

Obligatorio: Si queremos utilizar un TableView con celdas estáticas el controlador que asignemos a esa escena debería heredar de un UITableViewController. En este caso el TableView será el view del controlador.

Celda Dinámicas

Aunque las celdas estáticas pueden estar bien para poder utilizarlas desde diseño, para los programadores son mucho más interesantes las celdas dinámicas. Aunque nos obliga a realizar una implementación algo extensa, es mucho más flexible. La funcionalidad principal es la de presentar la información de uno o más Arrays de datos. 

UITableViewCell

Las filas son representaciones visuales del  objeto UITableViewCell. En el caso de las celdas estáticas podemos colocarle el estilo manualmente, en las celdas dinámicas lo tendremos que hacer desde programación. 

    Propiedades principales

    Las propiedades principales del objeto UITableViewCell son:
    • textLabel: etiqueta principal de texto
    • imageView: imagen opcional que podemos presentar en la celda, normalmente se coloca a la izquierda de la celda.
    • accesoryType: tipo de icono opcional que podemos presentar. Normalmente se coloca a la derecha de la celda.
    • detailTextLabel: etiqueta opcional, no disponible en el estilo Default.

    Estilos de Celda

    Existen 4 estilos predefinidos para las celdas, a mayores de los que podamos crear nosotros manualmente:
    • UITableViewCellStyleDefault: Este el único estilo que no tiene detailTextlabel. Es el más básico de todos
    • UITableViewCellStyleSubtitle: el textLabel está encima y el retail debajo.
    • UITableViewCellStyleValue1: el textLabel se pone a la izquierda en color negro y el detail la derecha en azul.
    • UITableViewCellStyleValue2: el textLabel está la izquierda en azul y el detail a la derecha en negro.

    Cómo relacionar el TableView con el ViewController

    Para relacionar el TableView deberemos dar una serie de pasos claros:
    • En la escena debería haber ya un TableView
    • Colocar un TableViewCell dentro del TableView en la escena
    • Colocar en el .h del View Controller de la escena donde hayamos colocado el UItableView la implementación de los protocolos UITableViewDelegate y UITableViewDatasource.
    • Relacionar el delegate y el datasource del TableView desde la escena con el ViewController:
      • Seleccionar el TableView
      • Pulsar el botón derecho
      • En el menú contextual arrastrar el círculo del delegate hasta el View Controller, de una manera muy parecida a como lo hicimos con los TextField.
      • Hacer lo mismo con el delegate
      • De esta manera ya estará relacionado la vista con el controlador

    TableViewController

    Los TableViewController son un tipo especial de escena que nos permite añadir una escena que ya tiene integrado un TableView y un TableViewCell:
    Cuando lo arrastramos al storyboard quedaría más o menos así:
    Lo bueno de utilizar este tipo de ViewController en el storyboard es que ya tiene todo lo necesario para poder funcionar con él. Sólo habría que asociarlo con una clase que herede de UITableViewController.

    Cómo implementar los métodos mínimos para que funcione un TableView en el controlador

    • Los pasos son los siguientes:
      • – (NSInteger) numberOfSectionsInTableView: esto nos devolverá el número de secciones, por defecto si no se implementa no pasa nada devolverá 1, pero lo dejamos para poder jugar con ello.
      • – (NSInteger) tableView:numberOfRowsInSection: este método es requerido, nos debería devolver el número de filas en cada sección que nos pasan como parámetro
      • – (UITableViewCell*)tableView:cellForRowAtIndexPath: esto debería devolver un objeto UItableView dependiendo del IndexPath, que es un objeto con dos propiedades: row y section, fácil no?
      • Los dos primeros métodos son fáciles, sólo deben devolver un número, pero el tercero tiene más chicha.

    Ejemplo de implementación de los métodos del Datasource

    -(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView{
        return 1;
    }
    – (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return 2;
    }
    – (UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@”Cell”];
        
        // Configure the cell… setting the text of our cell’s label
        cell.textLabel.text = @”Título”;
        cell.detailTextLabel.text=@”texto detalle”;
        cell.imageView.image=[UIImage imageNamed:@”pilar-rubio.jpg”];
        cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;
        return cell;
    }
    Como podemos ver estamos diciéndole al tableView que tiene 1 sección y dos filas en cada sección. Por lo que debería presentar dos filas en la pantalla.
    Respecto al método cellForRowAtIndexPath. La implementación tiene ter partes claramente diferenciadas. Primero realiza la inicialización de un objeto UITableViewCell indicando el estilo visual y un nombre reutilizable. En este caso se utiliza el estilo UITableViewCellStyleSubtitle, por lo que dispondremos del atributo detailTextLabel.
    Después realiza el rellenado de la celda, en concreto de las propiedades textLabel, detailTextlabel ImageView y del accesoryType. 
    Con esta implementación al ejecutarlo debería quedar más menos así:
    Licencia Creative Commons

    Comments

    Leave a Reply

    *

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

    También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

    Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

    Uso de cookies

    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

    Aviso de cookies