fbpx
 

Utilizando Celdas Personalizadas en una TableView

Utilizando Celdas Personalizadas en una TableView

1. Introducción

No se si sueles realizar deporte a menudo.

Imagino que te pasa como a todos. Muchas veces no conseguimos sacar tiempo libre.

Mi objetivo es entrenar 3 veces por semana, aunque la verdad es que no lo consigo todas las semanas.

Hace años jugaba bastante al fútbol, baloncesto, tenis de mesa y de vez en cuando sacaba tiempo para ir al gimnasio.

Ahora con mucho menos tiempo libre tengo que conformarme con 3 sesiones de entrenamiento intenso por semana.

Intento seguir una rutina marcada por una aplicación móvil que se basa en entrenamientos cortos pero de alta intensidad.

Invirtiendo entre 2 y 3 horas por semana te aseguro que mejorarás mucho tu forma física.

He probado varios sistemas para mantenerme en forma y este es con diferencia el que mas me motiva.

Si tienes curiosidad y crees que puede interesarte, escríbeme, te explico un poco como funciona y te paso el nombre de la app.

[caja-roja]No gano nada recomendando aplicaciones, simplemente me gusta compartir con los demás productos y servicios que funcionan y que creo que pueden aportar mucho[/caja-roja]

2. ¿Qué vamos a ver en este tutorial sobre TableView?

Después de esta pequeña introducción, la aplicación de esta semana estará relacionada con el DEPORTE.

Vamos a desarrollar una app muy sencilla que nos permitirá avanzar un poco más en la comprensión del funcionamiento de las TableViews.

Si no has trabajado antes con Tablas en tus aplicaciones iOS, te recomiendo que eches un vistazo al Tutorial de Introducción a TableView que publicamos en EfectoApple hace unas semanas. Puedes acceder desde aquí.

En el Tutorial de hoy vamos a desarrollar una aplicación que constará de una única vista que contendrá una TableView donde mostraremos un listado de ejercicios que podrían formar una rutina de entrenamiento cualquiera.

La parte interesante de nuestra aplicación, será la utilización de Celdas Personalizadas en Swift.

Al utilizar celdas creadas por nosotros mismos, podremos personalizar totalmente el diseño de nuestra app.

Cuando hayas terminado este tutorial, habrás creado una aplicación que tendrá el siguiente aspecto:

 

0Mockup

3. Diseñando la Interfaz de nuestra App

Abre Xcode y crea un nuevo proyecto. Elige el template Single View Application.

TableViewDale el nombre que quieras al proyecto. En mi caso, yo lo he llamado CustomCell_Demo.

TableViewGuárdalo donde quieras y una vez que lo hayas creado, lo primero que debes hacer es abrir Main.storyboard.

Allí verás que la interfaz de nuestra app consta de una única pantalla en blanco.

TableView

Añadiendo la Tabla a nuestra interfaz

Nuestro primer paso será añadir una Tabla a nuestra interfaz. Para ello, simplemente elige un objeto de tipo UITableView de la biblioteca de objetos y arrástralo dentro del View Controller.

 

prueba3

 

Una vez que la hemos añadido, la redimensionamos para que ocupe toda la View del View Controller.

5 TableView

 

Añadiendo Constraints a nuestra tabla

El siguiente paso será añadir las constraints a nuestra TableView. De esta forma, nos aseguramos que la aplicación se comportará perfectamente sin importar el tamaño del dispositivo en el que se ejecute.

[caja-gris]Si no has trabajado antes con Auto Layout ni con Constraints, te recomiendo que accedas a la sección Tutoriales del blog y elijas el Tema Auto Layout. Encontrarás 5 tutoriales que te permitirán dominar Auto Layout[/caja-gris]

 

6 TableView

Trabajando con la Prototype Cell

Cuando añades una TableView a tu interfaz, por defecto, el número de Prototype Cells que muestra es 0. Lo normal, es trabajar como mínimo con una Prototype Cell, por lo que vamos a añadir una a nuestra tabla.

Selecciona la TableView y en el inspector de propiedades cambia 0 por 1.

 

TableView

 

Ahora que ya tenemos una Prototype Cell con la que trabajar, vamos a diseñar la celda que queremos para nuestra aplicación.

Si te fijas en el diseño final de la app, cada una de las celdas cuenta con una imagen de fondo y un texto centrado de color blanco.

Por tanto, tenemos que añadir a nuestra celda, una UIImageView y una UILabel.

 

8 TableView

 

Una vez que hemos añadido los elementos que necesitamos, tendremos que redimensionarlos para que cumplan con el diseño que buscamos.

Primero, vamos con nuestra Table View. Selecciónala, accede al Inspector de Tamaño y dale un valor de 204 a su propiedad Row Height.

 

TableView

 

Después, haz clic sobre la UIImageView y en el inspector de tamaño escribe estos valores:

 

TableView

 

Por último, selecciona el UILabel y establece estos valores:

 

TableView

 

Además, tendrás que centrar el texto del UILabel, especificar su color a Blanco, darle un tamaño de fuente de 30 y escribir dentro del label, el texto PUSHUPS.

Estableciendo las Constraints del UIImageView y del UILabel

Como siempre, una vez que hemos terminado el diseño de nuestra interfaz, usaremos Auto Layout para añadir las constraints.

Comenzaremos por nuestra UIImageView. La seleccionamos y añadimos las 4 constraints que necesitamos para que siempre esté centrada en la celda de nuestra TableView.

 

12 TableView

 

Después haremos lo mismo con la UILabel. La seleccionamos y en este caso añadiremos 2 constraints para que mantenga siempre el mismo Height y el mismo Width y otras 2 para que siempre esté centrada horizontal y verticalmente en la celda.
13 TableView

4. Añadiendo Recursos a nuestra Aplicación

Para facilitar el diseño de la app, he creado un .zip con las 6 imágenes que vamos a utilizar en su interfaz.

Puedes descargarlo desde aquí.

Una vez que lo hayas descargado, descomprímelo y añade las imágenes que contiene a la carpeta Assets.xcassets de tu proyecto.

 

14 TableView

 

De esta forma se crearán todos los assets que utilizaremos en nuestra aplicación.

Para comprobar que hemos diseñado correctamente los elementos que forman nuestra interfaz, selecciona la Image View y en el inspector de propiedades elige la imagen llamada PUSHUPS.

 

TableView

 

Verás como se muestra tal y como debe aparecer la primera celda de nuestra tabla.

Con este último paso hemos terminado el diseño de nuestra aplicación.

En el siguiente punto veremos como hacer que nuestra TableView muestre diferentes celdas personalizadas.

5. Programando la Funcionalidad de nuestra App

La clase ExerciseTableViewCell

Como estamos trabajando con Celdas Personalizadas, ha llegado el momento de crear la Clase que gestione estas Celdas.

Para ello, crea un nuevo fichero, usando el menú de Xcode, File>New>File… , elige el template Cocoa Touch Class 

 

TableView

 

Dale el nombre ExerciseTableViewCell y haz que herede de UITableViewCell. Pulsa en Next y guárdala con el resto de ficheros del proyecto.

 

TableView

 

Lo que vamos a hacer en nuestra Celda Personalizada es añadir los elementos de diseño que hemos incluido en la interfaz. Es decir, el UIImageView y el UILabel.

Para ello, abre ExerciseTableViewCell.swift y añade estas dos variables:

Como puedes ver, se tratan de dos Outlets, por lo que ahora iremos al Main.storyboard y realizaremos la conexión entre estas 2 variables y los elementos de la interfaz.

Enlazando nuestros Outlets

Como decimos, abre Main.storyboard y haz clic sobre Table View Cell. Después accede al Inspector de Identidad y en su propiedad Class, escribe ExerciseTableViewCell. Lo que hacemos, es decirle a Xcode, que esta celda es de tipo ExerciseTableViewCell, en lugar de UITableViewCell, es decir, que se trata de una Celda Personalizada.

 

TableView

 

Ahora, sin dejar de seleccionar la Exercise Table View Cell, accede al Inspector de Conexiones y verás, como existen 2 conexiones disponibles, llamadas imageCell y labelCell.

Para realizar la conexión entre el código y la interfaz, arrastra desde cada uno de los círculos situados en la parte derecha hasta cada uno de los dos elementos: UIImageView y UILabel.

 

19 TableView

 

Con esto habríamos terminado con nuestra Celda Personalizada.

Tu clase ExerciseTableViewCell.swift debería tener un aspecto similar a este:

La clase ViewController

Nuestra clase ViewController.swift está completamente vacía a excepción de los dos métodos que crea Xcode por defecto.

Vamos a realizar los siguientes pasos para completar el código que necesitamos para hacer que funcione nuestra aplicación:

  1. Crear el Modelo de Datos de nuestra aplicación
  2. Ajustar nuestra clase a los protocolos UITableViewDelegate y UITableViewDataSource
  3. Añadir los métodos que necesitaremos para que nuestra TableView funcione.

Comenzamos por el primer punto. Nuestro modelo de datos será muy sencillo. Consistirá en un array que contendrá los nombres de los diferentes tipos de ejercicios que mostraremos en nuestra TableView.

Por tanto, tendrás que añadir el siguiente código justo antes del método viewDidLoad() de la clase ViewController.swift:

Como ves, simplemente se trata de una constante que almacenará nuestro array de ejercicios.

[caja-roja]Si fuéramos estrictos con MVC, no deberíamos incluir nuestro Modelo dentro de nuestro Controlador. Unicamente lo hacemos así para no añadir complejidad al Tutorial[/caja-roja]

Nuestro siguiente paso será ajustar la clase ViewController.swift a los protocolos anteriormente mencionados.

Para ello, tendrás que añadir estos protocolos a continuación de la declaración de tu clase. Es decir, la cabecera de tu clase tendrá que tener este aspecto:

En el momento en que añadas estos protocolos, Xcode mostrará un error:

 

TableView

 

Para solucionar este error, tendremos que continuar con el punto 3 de nuestra lista. Es decir, añadir los métodos numberOfRowsInSection() y cellForRowAt() a nuestra clase ViewController.swift:

Explicando el código de nuestros métodos

El código de estos métodos es muy sencillo.

En el primer método, lo único que hacemos es devolver el número de celdas que tendrá nuestra aplicación. El número de celdas en nuestro caso será el número de elementos que tenga nuestro array exercisesList.

En el segundo método creamos una celda de tipo ExerciseTableViewCell (Ya que es el tipo de celda que hemos creado para nuestra app) y a esta celda le asignamos como texto en su label el elemento del array que le corresponda y como imagen, una nueva UIImage creada a partir del nombre del elemento almacenado en nuestro array de ejercicios.

Con estos dos métodos habríamos terminado nuestra clase ViewController.swift, que debería tener este aspecto:

6. Ejecutando nuestra Aplicación

Ahora que ya hemos terminado el código de nuestra app, haz cmd + R para ejecutar la aplicación.

Verás que en lugar de mostrar nuestra aplicación funcionando, el simulador muestra la tabla vacía.

¿Qué ha pasado?

Lo que pasa es que hemos cometido un error muy típico a la hora de trabajar con TableViews. No hemos especificado cual será la clase que funcionará como dataSource y como delegate de nuestra TableView.

Para ello, abrimos Main.storyboard de nuevo y enlazamos el dataSource y el delegate de nuestra TableView con nuestra clase ViewController:

 

TableView

 

Ahora vuelve a ejecutar la aplicación y…

Verás que se produce un error en tiempo de ejecución que hace que nuestra aplicación se caiga:

 

TableView

 

Si echas un vistazo al error, verás una descripción como esta:

‘unable to dequeue a cell with identifier ExerciseCell – must register a nib or a class for the identifier or connect a prototype cell in a storyboard’

Esto nos da una pista bastante grande de lo que ha fallado.

Si recuerdas, en el método cellForRowAt() escribimos esta linea de código:

En esta linea, hemos especificado un Identificador para nuestra celda, pero hemos olvidado especificar en la celda de nuestro Storyboard.

Para solucionarlo, abrimos el fichero Main.storyboard, hacemos clic en nuestra Cell y en el Inspector de Atributos, en la propiedad Identifier, escribimos ExerciseCell.

 

TableView

 

Ahora si. Ejecuta la aplicación y verás como el diseño de nuestra aplicación se muestra perfectamente.

 

TableView

 

Sin embargo, existen 2 pequeños detalles que deslucen un poco nuestra aplicación:

  1. Se muestra la status bar, cuando en el diseño final de nuestra aplicación no aparecía
  2. Se muestran los separadores de las celdas de color blanco, algo que no queremos que aparezca

En el apartado final vamos a corregir estos dos errores.

7. Afinando los últimos detalles

Para hacer que no aparezca la status bar en nuestra aplicación tendremos que añadir 2 entradas nuevas en el fichero Info.plist.

Así que abre ese fichero, sitúate en el último elemento de la lista, pulsa en el botón + y añade estas dos entradas:

  • Status bar is initially hidden : YES
  • View controller-based status bar appearance : NO

Si ahora ejecutas la aplicación, verás como ya no aparece la status bar.

Para eliminar los separadores de nuestra tabla, selecciona la TableView en el Main.storyboard y en su propiedad Separator, elige None.

 

TableView

 

Para terminar, si ejecutas la aplicación, verás como el diseño se muestra tal y como queríamos.

 

0Mockup

 

Enhorabuena, has terminado un nuevo tutorial de EfectoApple.

8. Resumen Final

Espero que este tutorial te haya servido para dominar un poco mas las UITableViews. Gracias a las Celdas Personalizadas podrás crear diseños completamente diferentes al resto de aplicaciones.

Aquí tienes un pequeño resumen de los puntos más importantes que hemos visto:

  1. Como diseñar una aplicación utilizando Celdas Personalizadas
  2. La forma de añadir constraints a los elementos de nuestra interfaz
  3. Hemos creado una clase que gestione nuestra celda personalizada.
  4. Como añadir recursos a nuestra aplicación
  5. La forma de implementar correctamente los métodos de UITableViewDelegate y UITableViewDataSource
  6. También hemos visto el error más común que se produce cuando trabajamos con UITableView
  7. Como hacer que no se muestre la status bar en nuestra aplicación y como eliminar los separadores de nuestra TableView.

9. Descarga el Proyecto

10AppsBanner

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

10. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes tu recompensa. El video chorra de esta semana:

[ejercicio titulo = “Love Dance…” num=”1″]

[/ejercicio]

11. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple desde aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Etiquetas:
7 Comentarios
  • Ismael
    Publicado a las 13:57h, 13 marzo Responder

    Buenas, cuando ejecuto la aplicación se queda en blanco y me salta estos dos errores:

    2017-03-13 12:53:46.396 CustomCell_Demo[908:13450] *** Assertion failure in -[UITableView dequeueReusableCellWithIdentifier:forIndexPath:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3600.6.21/UITableView.m:6600

    2017-03-13 12:53:46.401 CustomCell_Demo[908:13450] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘unable to dequeue a cell with identifier ExerciseCell – must register a nib or a class for the identifier or connect a prototype cell in a storyboard’

    Llevo ya rato intentando solucionarlo pero sin conseguirlo.

    • Ismael
      Publicado a las 14:00h, 13 marzo Responder

      Añado que ya hice lo de llamar a la celda con el identificador ‘ExerciseCell’

      • Ismael
        Publicado a las 14:02h, 13 marzo Responder

        Siento el spam, ya se corrigió sin tocar nada, probé a ejecutar otra vez y fue correctamente!

        • Luis R
          Publicado a las 14:22h, 13 marzo Responder

          Hola Ismael.

          La magia de la programación, xdd…

          ¡Me alegro que lo hayas podido solucionar!

          Saludos

  • Jimmy Hernandez
    Publicado a las 21:27h, 23 abril Responder

    Hola estoy haciendo este tutorial pero al correr la app hasta el paso 4 dices que debería de verse la primera celda con la imagen y no me aparece. Incluso tengo los códigos fuentes que me vinieron con la compra y copie y pegue el tuyo y pasa exactamente lo mismo. ¿Eso a que se debe? ¿Como hago para visualizar correctamente lo que estoy haciendo? Ojo como digo es solo hasta el final del paso 4. El código fuente funciona muy bien pero me gustaría saber porque al correr asi no aparece nada.

    • Luis R
      Publicado a las 09:34h, 03 mayo Responder

      Hola Jimmy.

      Es extraño lo que me comentas, ya que acabo de seguir los pasos del proyecto y me muestra correctamente todo el contenido de la tabla, imágenes incluidas.

      Siento no poder ayudarte más.

  • Alejandro Garcia
    Publicado a las 18:17h, 07 mayo Responder

    Hola buen día, hice todo el tutorial y corrió a la perfección. Muchas gracias, ahora mi única duda es… ¿Cómo puedo hacer para poder realizar más de un único diseño en las cards que se muestran?

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.