fbpx
 

Tutorial de Introducción a UITableView

Tutorial de Introducción a UITableView

1. Introducción

En las últimas semanas he recibido algunos emails de lectores del blog que se están iniciando en el Desarrollo iOS y que tienen bastantes dudas sobre el funcionamiento de UITableView. Como considero que las tablas son un componente fundamental en cualquier aplicación, he decidido crear un nuevo tutorial, donde desarrollaremos una aplicación desde cero, que utilizará una UITableView para mostrar información en pantalla.

Antes de comenzar, me gustaría que vieras una imagen, donde aparecen tres aplicaciones muy conocidas que utilizan UITableViews en sus interfaces:

 

tutorial uitableview ios apps ejemplo

 

En esta imagen, aparecen las apps de Dropbox, Airbnb y Pinterest. En todas se utilizan varias UITableViews y como puedes ver, el diseño de las aplicaciones no se parecen en nada. Esto se debe a que las UITableViews nos permiten una gran flexibilidad. Podemos desarrollar aplicaciones muy diferentes utilizando únicamente tablas.

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

Aunque desarrollar una aplicación completa utilizando una única UITableView para mostrar la información en pantalla puede parecer algo excesivamente sencillo, estos son todos los temas que vamos a tocar:

  • ¿En qué consiste un Protocolo en iOS?
  • ¿Qué es el protocolo UITableViewDataSource?
  • ¿Qué es el protocolo UITableViewDelegate?
  • ¿En qué consisten los delegados en iOS?
  • ¿Que es el NSIndexPath?
  • ¿Cómo funcionan las UITableViews?
  • ¿Cómo puedo añadir imágenes a mis tablas?

Como puedes ver, una sencilla aplicación con una tabla nos permitirá trabajar con conceptos fundamentales del Desarrollo iOS como Protocolos y Delegados.

Al terminar el tutorial, nuestra aplicación tendrá este aspecto:

tutorial uitableview iOS apps app final 1b

 

Nota Legal: El material utilizado para la realización de este Tutorial obedece únicamente a propósitos didácticos. EfectoApple reconoce la propiedad de dicho contenido por parte de LaLiga | Liga de Fútbol Profesional.

 

Como ves, lo que haremos será mostrar una lista de equipos de futbol españoles con sus respectivos escudos.

Si realmente tienes interés en aprender como funcionan las aplicaciones iOS, te recomiendo que no te limites a leer este tutorial, sino que abras Xcode y vayas siguiendo cada uno de los pasos hasta que programes la aplicación completa. Es la mejor forma de aprender.

3. Creando nuestro proyecto

Abre Xcode y crea un nuevo proyecto, haciendo clic en la opción “Create a new Xcode project”.

tutorial uitableview iOS apps xcode 2

Elige la plantilla “Single View Application” y haz clic en Next para continuar.

tutorial uitableview ios apps xcode template 3

A continuación rellena los campos que Xcode te solicita:

  • Product Name: Es el nombre de la app, puedes usar el mismo que yo: SimpleTableDemo
  • Organization Name: Yo utilizo EfectoApple, pero tu puedes usar tu nombre por ejemplo.
  • Organization Identifier: Aquí se suele utilizar la notación de nombre de dominio inverso. No es más que si tienes un dominio propio, escribir primero el .com y luego el nombre de tu dominio. Por eso yo utilizo com.efectoapple. Si no tienes ningún dominio propio o prefieres no utilizarlo puedes poner el identificador que quieras.
  • Lenguaje: Te recomiendo Swift, ya que en este tutorial utilizaremos Swift
  • Devices: Selecciona iPhone.
  • Use Core Data: No es necesario que actives esta opción.
  • Include Unit Tests: No es necesario que actives esta opción.
  • Include UI Tests: No es necesario que actives esta opción.

Una vez que has introducido esta información, pulsa en Next y Xcode te preguntará donde quieres guardar tu proyecto. Elige una ubicación de tu ordenador y haz clic en el botón Create. Xcode creará tu proyecto y te mostrará tu entorno de trabajo:

tutorial uitableview ios apps xcode new project

Lo primero que haremos será crear la interfaz de nuestra aplicación. Abre el fichero Main.storyboard.

tutorial uitableview ios apps xcode storyboard

Haz doble clic en el único ViewController que tenemos en nuestro storyboard, para seleccionarlo. Después, en la librería de objetos, situada en la parte inferior derecha, desplázate hacia abajo hasta encontrar el objeto Table View y arrástralo al interior de la view de nuestro ViewController.

tutorial uitableview ios apps adding tableview

Ahora redimensiona la UITableView para que ocupe toda la view principal:

tutorial uitableview ios apps resize tableview

Perfecto. Acabas de añadir un UITableView a la interfaz de tu aplicación. Esta tabla será la que utilicemos para mostrar los datos de nuestra app.

Lo siguiente que tienes que hacer es añadir las constraints de esa tabla. Las constraints nos permiten asegurarnos de que al ejecutar nuestra app en cualquier dispositivo, nuestra tabla aparecerá correctamente centrada.

Si quieres aprender más sobre Constraints y Auto Layout, te recomiendo que visites nuestra serie de tutoriales sobre este tema: Introducción a Auto Layout

Para especificar que nuestra tabla aparezca siempre centrada en pantalla, haremos que mantenga una distancia de 0 puntos en cada uno de sus cuatro márgenes con respecto a la view principal. Para ello, lo único que tenemos que hacer es añadir estas cuatro constraints a nuestra UItableView:

tutorial uitableview ios apps adding constraints

Genial, ahora nuestra tabla se mostrará correctamente en cualquier dispositivo que ejecutemos nuestra aplicación.

Una tabla vacía no sirve para nada, así que nuestro siguiente paso será añadir datos a nuestra UITableView. Pero antes, debemos explicar algunos conceptos básicos que debes conocer para comprender completamente el comportamiento de las tablas.

4. Conceptos fundamentales de UITableView

PROTOCOLO UITABLEVIEWDATASOURCE

Apple nos ofrece la clase UITableView para que podamos trabajar con tablas en nuestras aplicaciones. Esta clase ha sido diseñada para poder mostrar tipos de datos muy diferentes. En una tabla puedes mostrar prácticamente cualquier dato, desde un conjunto de opciones básicas hasta un listado de restaurantes con la información completa de cada uno, clasificados por ciudades.

La pregunta es:

¿Cómo le decimos a la clase UITableView que información debe mostrar?

La respuesta es, utilizando el protocolo UITableViewDataSource.

Si no sabes lo que es un protocolo, no te preocupes, puedes consultarlo aquí.

Además de entender los protocolos, es importante que tengas en cuenta esto:

[caja-gris]Las TableViews se dividen en Secciones y Celdas[/caja-gris]

Una vez que has revisado el concepto de protocolo y entiendes que las tablas se dividen en diferentes secciones, donde cada sección puede contener un determinado número de celdas, ya podemos explicar de forma específica en que consiste el protocolo UITableViewDataSource.

UITableViewDataSource es el enlace entre los datos que queremos mostrar y nuestra UITableView. Este protocolo declara dos métodos obligatorios:

  • tableView:numberOfRowsInSection()
  • tableView:cellForRowAtIndexPath()

El primero de los métodos: numberOfRowsInSection(), especifica el número de celdas que mostraremos en nuestra tabla y se ejecutará tantas veces como secciones tenga nuestra tabla. En nuestro caso, como no hemos indicado el número de secciones, iOS entenderá que nuestra tabla tiene una única sección, por lo que este método se ejecutará una única vez.

El segundo método: cellForRowAtIndexPath(), nos permite especificar los datos que mostraremos en cada celda y se ejecutará tantas veces como celdas tenga la única sección de nuestra tabla.

Al tratarse de métodos obligatorios, tendremos que implementarlos en nuestra clase si queremos utilizar el protocolo UITableViewDataSource.

PROTOCOLO UITABLEVIEWDELEGATE

Por otro lado tenemos el protocolo UITableViewDelegate. Este protocolo es el encargado de determinar la apariencia de nuestra UITableView. Todos sus métodos son opcionales, por lo que no estamos obligados a implementar ninguno. Sin embargo, ofrece funcionalidades muy útiles como especificar el height de las celdas, configurar tanto el header como el footer de una tabla, reordenar las celdas, etc.

En este tutorial no utilizaremos ninguno de estos métodos, ya que nos vamos a centrar únicamente en mostrar los datos en nuestra aplicación pero aún así es importante que conozcas las opciones que te ofrece este protocolo.

NSINDEXPATH

Recuerda lo que hemos comentado en el apartado anterior. Las tablas se dividen en diferentes secciones, donde a su vez cada sección puede contener un determinado número de celdas.

La clase NSIndexPath es fundamental para que entiendas completamente el trabajo con tablas en aplicaciones iOS. Siempre que quieras utilizar alguna TableView en tu aplicación, tendrás que implementar el método cellForRowAtIndexPath y gran parte del funcionamiento de este método se basa en un objeto de la clase NSIndexPath.

Este objeto tiene dos propiedades:

  • .section
  • .row

A través de estas dos propiedades, podremos situarnos en un punto concreto de una tabla. Mediante la propiedad .section especificaremos en que sección de nuestra tableView nos encontramos, mientras que a través de la propiedad .row determinaremos, dentro de esa sección, en que celda nos encontramos.

Por tanto si especificáramos lo siguiente:

  • .section = 0
  • .row = 4

Nos encontraríamos en la quinta celda de la primera sección de nuestra tabla. Fácil, ¿no?

5. Añadiendo datos a nuestra tabla

Ahora que ya conoces el concepto de IndexPath y ya entiendes para que sirven los protocolos UITableViewDataSource y UITableViewDelegate, podemos utilizarlos para añadir datos a nuestra aplicación.

Lo primero que tenemos que hacer es especificar que la clase ViewController.swift se ajustará a los protocolos UITableViewDataSource y UITableViewDelegate. Este es el primer paso siempre que trabajes con protocolos, determinar que clase será la que implemente el protocolo.

Para hacer esto unicamente tendrás que añadir el nombre de los protocolos a continuación de la declaración de nuestra clase, es decir, tu clase ViewController.swift deberá tener este aspecto:

Después de añadir estos dos protocolos, Xcode te mostrará por pantalla el siguiente error:

tutorial uitableViews ios apps xcode error

Este error es completamente normal. Xcode te está avisando que no has implementado los dos métodos obligatorios, que debes utilizar, si quieres que tu clase se ajuste al protocolo UITableViewDataSource. Por ahora, no prestes atención a este error, más adelante, al añadir los dos métodos, haremos que desaparezca.

El siguiente paso será declarar la variable donde almacenaremos la información que queremos que muestre nuestra tabla.

Como los datos que mostraremos en nuestra UITableView será un listado de equipos de fútbol, utilizaremos un array llamado teams para almacenar ese listado. Por tanto, tendrás que añadir la siguiente variable justo antes del método viewDidLoad():

Una vez que hemos declarado nuestro array, tendremos que rellenarlo con los nombres de los equipos. Para ello, tendrás que añadir una linea de código a tu método viewDidLoad():

Perfecto. Ahora que ya tenemos nuestro array con todos los equipos que queremos mostrar en nuestra tabla, es hora de hacer que nuestra tabla muestre estos datos. Para ello utilizaremos los dos métodos del protocolo UITableViewDataSource:

  • tableView:numberOfRowsInSection()
  • tableView:cellForRowAtIndexPath()

Añade la implementación de estos dos métodos a tu clase ViewController.swift:

Recuerda que hemos comentado antes, que estos dos métodos no se ejecutan una única vez.

A continuación tienes la explicación del código de cada uno de ellos.

El método numberOfRowsInSection(), como hemos dicho, es el encargado de especificar el número de celdas que mostraremos. En nuestro caso, como queremos mostrar tantas celdas como elementos hayamos almacenado en nuestro array teams, utilizaremos la propiedad count, que lo que hace es devolver el número de elementos que hay almacenados en un array. De esta forma, si nuestro array characters tiene 14 elementos, nuestro método numberOfRowsInSection devolverá 14. Por tanto nuestra tabla mostrará 14 celdas con contenido.

Por otro lado, el método cellForRowAtIndexPath() crea un objeto celda, que hemos llamado cell, de tipo UITableViewCell, al que se le asigna el identificador “mycell”. Posteriormente, lo que hace es asignar a su propiedad textLabel.text, el texto que queremos mostrar, que en nuestro caso, será el elemento que esté contenido en el array, en la posición indexPath.row. Recuerda que la propiedad indexPath.row indica la celda en la que nos encontramos, por lo que la primera vez que se ejecute el método cellForRowAtIndexPath(), indexPath.row será igual a 0, la segunda será igual a 1, la tercera será igual a 2, de esta forma podremos recorrer nuestro array teams y mostraremos cada vez un elemento distinto del array. No olvides que el método cellForRowAtIndexPath() se ejecuta tantas veces como celdas vayamos a mostrar en nuestra tabla.

Ahora, prueba a ejecutar tu aplicación y…

…comprobarás que nuestra tabla se muestra completamente vacía.

¿Por qué ha sucedido esto?

Si te das cuenta, uno de los protocolos que hemos utilizado se llama UITableViewDelegate, lo que nos da la pista de que se trata de un Protocolo de Delegado.

Si no has trabajado antes con ellos, aquí puedes consultar todo lo que necesitas sobre el concepto de Delegado.

Como has podido ver, hay que seguir 3 pasos para implementar un delegado. Nosotros solo hemos realizado 2 pasos:

  • Paso 1: OK – En la clase que actuará como Delegado lo hemos indicado específicamente añadiendo el protocolo UITableViewDelegate en su cabecera.

tutorial uitableview ios apps protocolo

  • Paso 2: PENDIENTE – En la clase que delegará sus funciones tendremos que indicar quien será su clase Delegado. En este caso, no hemos especificado todavía en nuestra clase UITableView quien será su clase delegado.
  • Paso 3: OK – Hemos implementado las funciones que queremos que realice el delegado a través de los métodos numberOfRowsInSection() y cellForRowAtIndexPath()

Para que el delegado funcione correctamente no podemos saltarnos el Paso 2. Así que vamos a ello. Vamos a especificar en nuestra clase UITableView quien será su clase delegado.

Accede al Main.storyboard y dejando la tecla Ctrl pulsada haz clic en el objeto Table View y arrastra hasta soltar justo encima del View Controller. En el menú flotante que aparece, selecciona delegate.

Repite el proceso de nuevo y selecciona también dataSource.

Puedes ver este proceso de enlazado en el siguiente video:

tutorial uitableview ios delegate connection

Ahora ya puedes ejecutar la aplicación y comprobar que nuestra tabla muestra correctamente los datos contenidos en el array teams.

tutorial uitableview ios app execution

 

6. Añadiendo imágenes a nuestra tabla

Nuestra aplicación quedaría demasiado sencilla si la termináramos aquí.

Lo que vamos a hacer es añadir una imagen diferente a cada una de las celdas.

Para que no pierdas tiempo buscando imágenes que añadir, he preparado un .zip con 14 escudos de equipos españoles de futbol. Descarga el fichero desde aquí.

Una vez que lo hayas descargado, descomprímelo y comprueba que dentro aparecen las 14 imágenes.

Para añadir las imágenes al proyecto haz clic en el fichero Assets.xcassets y arrastra las 14 imágenes al espacio donde está situado el AppIcon:

tutorial uitableview ios adding images

Con las imágenes añadidas a nuestro proyecto, simplemente tendremos que decirle a nuestro UITableView que muestre estas imágenes en cada una de las celdas.

Para ello tendrás que añadir la siguiente linea en el método cellForRowAtIndexPath(), justo antes del return cell:

Lo que hacemos con esta linea de código es asignar a la imageView de la celda, una UIImage que contendrá para cada celda un escudo diferente.

Date cuenta que para que esto funcione, hemos hecho que los títulos de las imágenes se llamen exactamente igual que el texto que estamos mostrando en cada una de las celdas de la tabla. Lo hemos hecho así para no tener que crear otro array con los nombres de las imágenes.

Este debería ser el aspecto de tu método cellForRowAtIndexPath() en este momento:

Ahora ya puedes ejecutar de nuevo la aplicación y comprobar que se muestran los nombres de los equipos cada uno con un escudo diferente.

tutorial uitableview ios apps app execution final

7. Resumen final

Espero que este tutorial te haya servido para entender como funcionan las UITableViews en iOS. Se trata de un elemento fundamental, por lo que es interesante que seas capaz de manejarlas perfectamente.

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

  1. Crear desde cero una aplicación con una UITableView
  2. Como funcionan los protocolos UITableViewDataSource y UITableViewDelegate
  3. Utilizar los métodos numberOfRowsInSection() y cellForRowAtIndexPath()
  4. Como utilizar el IndexPath
  5. Mostrar datos almacenados en un array a través de nuestra tabla
  6. Como añadir imágenes a las celdas de nuestra tabla

8. 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í.

9. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes el gif chorra de esta semana:

[ejercicio titulo = “Traumatizando al niño” num=”1″]
tutorial uitableview video humor
[/ejercicio]

10. ¿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:
27 Comentarios
  • Antonio
    Publicado a las 15:43h, 17 octubre Responder

    Hola Luis
    Tutorial claro y conciso.
    Pero hasta ahi llego, el problema es a la hora de las secciones en las tablas, he visto por internet varias formas de hacerlo, pero la verdad no me salen del todo.
    Por ejemplo en la app que has puesto en el tutorial, lo que busco es por ejemplo dividir los equipos en comunidades autónomas que serian las cabezeras de las secciones.
    Gracias por su interés.

    • Luis R
      Publicado a las 17:59h, 18 octubre Responder

      Hola Antonio.

      Te adjunto el código que necesitarías para añadir secciones a este proyecto.

      Voy a centrarme en darte una solución rápida, por lo que el código no estará todo lo optimizado que debería, pero te va a servir perfectamente para lo que quieres.

      Para poder probar que funciona, lo mejor es que descargues el proyecto terminado de este tutorial (Tienes el enlace de descarga en el punto 7 del tutorial) y una vez que lo hayas descargado, accedas a la clase ViewController.swift y sustituyas todo el código que aparece en esa clase por este otro:

      import UIKit

      class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

      var teams: [String] = []
      var sections: [String] = []

      override func viewDidLoad(){
      super.viewDidLoad()

      teams = [“Atletico de Madrid”, “Barcelona”, “Deportivo de la Coruña”, “Las Palmas”, “Malaga”, “Rayo Vallecano”, “Sporting”, “Real Sociedad”, “Espanyol”, “Mallorca”, “Valladolid”, “Eibar”, “Ponferradina”, “Albacete”]

      sections = [“Sección 1”, “Sección 2”, “Sección 3”, “Sección 4”]
      }

      override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      // Dispose of any resources that can be recreated.
      }

      func numberOfSectionsInTableView(tableView: UITableView) -> Int {
      return sections.count;
      }

      func tableView(tableView:UITableView, numberOfRowsInSection section:Int) -> Int
      {
      if(section == 3){
      return 2
      }
      return 4
      }

      func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
      return sections[section]
      }

      func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
      {
      let cell:UITableViewCell=UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: “mycell”)
      cell.textLabel?.text = teams[indexPath.row]
      cell.imageView!.image = UIImage(named: teams[indexPath.row])!

      return cell
      }
      }

      Después solo tienes que ejecutar la aplicación y verás que tu tabla aparece dividida en secciones con los títulos: Sección 1, Sección 2, Sección 3, Sección 4.

      Cualquier otra duda me dices por aquí y te ayudo.

      Un saludo!

      • Antonio
        Publicado a las 19:34h, 18 octubre Responder

        Luis, gracias por el interés y la rapidez en la ayuda.

        • Luis R
          Publicado a las 19:53h, 18 octubre Responder

          De nada Antonio.
          Un placer haberte podido ayudar.

  • Roque
    Publicado a las 06:11h, 11 noviembre Responder

    Saludos. Cuando termino de digitar el código para visualizar en el simulador me sale la pantalla negra. Qué puede ser? Me puedes ayudar?

    • Luis R
      Publicado a las 10:51h, 11 noviembre Responder

      Hola Roque.

      El problema de la pantalla negra suele suceder bastante cuando comienzas con Desarrollo iOS.
      Puede deberse a diferentes motivos.

      Te paso las dos posibles soluciones más comunes. Prueba la primera solución y comprueba si ha arreglado el problema. Si continua apareciendo la pantalla negra, prueba con la segunda solución. Si ninguna de las 2 opciones soluciona tu problema, vuelve a escribirme por aquí y probamos alguna opción mas.

      * Solución 1
      Haz click en el nombre de tu proyecto, justo en la parte superior izquierda de Xcode (Tiene un icono azul). Esto abrirá la configuración del proyecto. Haz click en el nombre de tu proyecto que aparece justo debajo del menú Targets y selecciona el menú superior General. Busca la opción Main Interface y comprueba que está seleccionado en el menú desplegable el nombre de tu storyboard (Si no le has cambiado el nombre, debería ser Main.storyboard)

      * Solución 2
      Ejecuta la aplicación en el Simulador. Accede al menú iOS Simulator > Reset Content and Settings…
      El simulador te mostrará una ventana con el siguiente mensaje:
      ‘Are you sure you want to reset the iOS Simulator content and settings?’
      Acepta el mensaje pulsando en Reset.

      Lo que te he comentado, si ninguna de las soluciones te ha funcionado vuelve a escribirme y miramos.

      Ánimo!

      • Roque
        Publicado a las 14:52h, 11 noviembre Responder

        Muchas gracias. Probè las dos opciones pero aún continúa la pantalla negra en el simulador.

        • Luis R
          Publicado a las 17:05h, 11 noviembre Responder

          Hola Roque.

          Si te interesa mucho solucionarlo puedes enviarme el proyecto a luis@efectoapple.com.

          Le echo un vistazo rápido y te digo cual es el problema.

          • Roque
            Publicado a las 17:46h, 11 noviembre

            O sea le envió el archivo en xcode?

  • Luis R
    Publicado a las 19:59h, 11 noviembre Responder

    Comprime toda la carpeta del proyecto y mándamela a luis@efectoapple.com, que ahora tengo un hueco para echarle un vistazo.

  • Roque
    Publicado a las 22:08h, 11 noviembre Responder

    Muchas gracias Luis por tus sugerencias. Ya pude resolver el error. Bendiciones

    • Luis R
      Publicado a las 11:32h, 12 noviembre Responder

      Me alegra haberte ayudado Roque!

  • Diego Zaragoza
    Publicado a las 16:07h, 10 febrero Responder

    Hola Luis, me han quedado claro todos los conceptos. Eres muy bueno explicando. Hice mi propia App, levantando datos desde un json. Y logre tambien cargar imagenes desde la web, en el tableView.

    El problema que tengo es que se me repiten las imagenes, es como que se reinicia el indexPath, o algo parecido, al scrolear de nuevo se soluciona. Se te ocurre que puede ser?

    Gracias

    • Luis R
      Publicado a las 20:12h, 12 febrero Responder

      Hola Diego Zaragoza.
      Gracias por tu comentario.

      El funcionamiento de las UITableView se basa en la reutilización de celdas.
      Esto permite un mayor rendimiento cuando utilizamos tablas en cualquier aplicación iOS.

      En ocasiones, dependiendo de nuestro código, pueden producirse problemas como el que estás teniendo. Repeticiones de celdas sin tener claro el motivo.

      Pégame en un comentario el código del método cellForRowAt() de tu aplicación y te digo que es lo que puede estar fallando.

      Saludos!!

  • Frank
    Publicado a las 21:42h, 02 marzo Responder

    Hola, tengo una pregunta. Tengo un arreglo con 17 posiciones, necesito que se muestren en dos secciones.
    En la sección 1 las imagenes de la posición 0 a 10
    Sección 2 posiciones 11 a 16

    Como puedo hacer..?

    Agradezco mucho de la ayuda.!

    • Luis R
      Publicado a las 10:28h, 03 marzo Responder

      Hola Frank.

      Una “solución rápida” a ese problema podría ser la siguiente:

      En lugar de utilizar un único array con 17 posiciones, puedes utilizar dos arrays diferentes. En el primero almacenas las primeras 11 imágenes y en el segundo almacenas las 6 últimas.

      Después, en el método cellForRowAt, tendrás que comprobar si estás en la primera o en la segunda sección, para en función de esto, mostrar las imágenes del primer o del segundo array.

      El código de este método sería el siguiente:

      override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
      {
      let cell:UITableViewCell = UITableViewCell(style: UITableViewCellStyle.subtitle, reuseIdentifier: “myCell”)

      if indexPath.section == 0 {
      cell.imageView?.image = UIImage(named: nombrePrimerArray[indexPath.row])
      }
      else if indexPath.section == 1 {
      cell.imageView?.image = UIImage(named: nombreSegundoArray[indexPath.row])
      }

      return cell
      }

      Espero haberte ayudado.

      Un saludo.

  • Diana rodriguez
    Publicado a las 04:52h, 27 junio Responder

    Hola Luis, necesito que cada celda contenga un url diferente que me lleve a una pagina ¨equis¨(segun la direccion del url), me ayudas porfavor!!!

    • Luis R
      Publicado a las 07:38h, 28 junio Responder

      Hola Diana.

      Basicamente tendrías que seguir estos pasos:

      1. Implementar el método didSelectRowAtIndexPath(), que es el encargado de gestionar las pulsaciones en las celdas de un tableView. Podría ser algo así:

      func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
      let currentCell = tableView.cellForRowAtIndexPath(indexPath!) as UITableViewCell!
      // (2) Aquí llamaríamos al método que gestionaría el acceso a la url de la celda (goToLink)
      }

      2. Implementar el método goToLink que reciba la celda que el usuario ha pulsado y acceda a dicha URL:

      func goToLink(tableViewCell: UITableViewCell) {
      if let url = NSURL(string: tableViewCell.textLabel?.text) {
      UIApplication.sharedApplication().openURL(url)
      }
      }

      Sería algo parecido a esto.

      Un saludo!

      • Diana rodriguez
        Publicado a las 19:23h, 28 junio Responder

        me marca un error en el metodo didSelectRow al declarar let currentCell 🙁

        • Luis R
          Publicado a las 08:29h, 03 julio Responder

          Hola Diana,

          Pásame el error exacto que obtienes y vemos que es lo que está fallando.

          • Diana rodriguez
            Publicado a las 23:09h, 10 julio

            hola, eso ya lo solucione.. ahora te agradeceria mucho si me ayudaras a encontrar una libreria o una forma para graficar datos en swift

  • Jose
    Publicado a las 15:51h, 21 octubre Responder

    Hola, antes que nada felicitarte por el tutoría y por la página en general, buenísima. Muy clara las explicaciones y me ha gustado mucho las imágenes animadas de lo que hay que ir haciendo. Me parece mucho más útiles que seguir un video, así puedes leer y releer la explicación tantas veces como uno quiera. De verdad, muchas gracias.
    Ahora te comento, me aparece un error cuando he añadido la última línea de código, la que añade las imágenes. El error que aparece es es siguiente:
    cell.imageView!.image = UIImage(named: teams[indexPath.row])! Thread 1: EXC_BAD_INSTRUCTION (code EXC_I386_INVOP, subcode=0x0)

    Alguna sugerencia?

    Muchas gracias
    Jose.

  • Andres Felipe Zuluaga
    Publicado a las 01:28h, 11 febrero Responder

    Hola me gustaría saber como ir a otro view al dar clic sobre una celda.
    gracias por su respuesta

  • Luis Arenas
    Publicado a las 13:13h, 20 noviembre Responder

    Que tal Luis!!!

    Muchas gracias, por el tutorial, le estuve batallando con las ligas del dataSoure, que me faltaba del Table View al ViewController, con tu tutorial, me ahorro, tiempo, ya que encontré el error mucho mas rápido.

    Estaré pendiente de nuevos tutoriales, nuevamente gracias

  • Joha
    Publicado a las 16:38h, 10 diciembre Responder

    GRACIAS!!
    sos muy claro en las explicaciones y llevas un orden perfecto!

    estoy arrancando y me estan sirviendo muchos tus tutoriales 🙂

  • DAVID
    Publicado a las 21:16h, 25 enero Responder

    Genial el tutorial Luis, súper bien explicado! ¿Qué habría que hacer para que el usuario pudiera añadir y quitar celdas a su antojo que no estuvieran contenidas en el array?
    Gracias!

Escribe un comentario

Crea una aplicación iOS desde cero con mi Curso gratuito en videoRESERVAR PLAZA
+
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.