Cómo actualizar los datos de una vista de tabla con la clase UIRefreshControl

la clase UIRefreshControl 2

En esta entrada te enseñaré a actualizar los datos de una vista de tabla por medio de la clase UIRefreshControl.

Comúnmente conocido como «pull to refresh» por medio de este mecanismo vamos a poder actualizar los datos de una vista de tabla arrastrando la misma hacía abajo.

Apple lo usa por ejemplo en el email, cuando actualizas los buzones, un indicador en la parte superior de dice que tus emails están siendo actualizados.

Este objeto que aparece en la parte superior no es más que un objeto de la clase UIActivityIndicatorView, un spinner que gira y gira hasta que tus buzones de correo son actualizados.

Pues bien, esto es lo que te quiero enseñar en este articulo.

Si quieres ir a lo práctico, al final del post podrás encontrar el código fuente para copiar y pegar en tu proyecto 😉

La clase UIRefreshControl

La clase UIRefreshControl es todo lo que necesitamos para actualizar nuestros datos deslizando nuestra vista de tabla hacía abajo.

Esta clase, disponible desde iOS 6, nos permitirá refrescar nuestro DataSource de una forma muy sencilla.

Crear una variable perezosa

Lo primero que debemos hacer es crear una «lazy var» también conocida como variable perezosa.

la clase UIRefreshControl
No, ni soy Puigdemont, ni soy la esposa de un perezoso.

No, no es ninguna variable con forma de perezoso, ni nada por el estilo.

Una «lazy var» no es más que una variable que creamos e inicializamos, y que usaremos más tarde.

Así que en tu ViewController, dónde tengas declaradas tus variables y constantes, escribe lo siguiente:

lazy var refreshControl:UIRefreshControl = {

let refresControl = UIRefreshControl()

//QUE AL CAMBIAR EL VALOR, SE EJECUTE UN MÉTODO

refresControl.addTarget(self, action: #selector(ViewController.actualizarDatos(_:)), for: .valueChanged)

//ESTABLECER EL COLOR DE LA RULETILLA

refresControl.tintColor = UIColor.blue

return refresControl

}()

Cómo has podido comprobar, lo único que hacemos es crear una variable de instancia a la clase UIRefreshControl, y posteriormente usar el patrón «Target –> Action» para que al cambiar el valor del objeto, este llame a un método que hemos denominado «actualizarDatos».

Por otra parte, asignamos un color a nuestro activity, este activity nos indicará mediante un giro que los datos están siendo actualizados, cuando los datos se actualicen, el activity, parará y desaparecerá, y los datos de tu tabla serán actualizados.

Añade el objeto a tu vista de tabla

Pero para que todo lo anteriormente dicho suceda, debemos añadir a nuestra vista de tabla el objeto que acabamos de crear, para ello, en la función «viewDidLoad» escribe la siguiente línea de código:

self.tableView.addSubview(self.refreshControl)

Dónde «tableView» es el Outlet de tu vista de tabla.

Actualizando tus datos

Todo lo que tienes que hacer en el método «actualizarDatos» es ejecutar el mecanismo que tengas establecido para actualizar los datos de tu tabla.

Esto es, que si estás trabajando con un servicio Web, o backend, pues deberías llamar a este servicio Web para que se actualice tu «DataSource» y así poder refrescar los datos que estás mostrando en tu vista de tabla.

la clase UIRefreshControl 2

Yo por ejemplo he hecho lo siguiente:

@objc func actualizarDatos(_ refresControl: UIRefreshControl){

//AQUI TU TIENES QUE ACTUALIZAR TUS DATOS. TU DATASOURCE. LLAMAR A TU SERVIDOR, VOLVER A TRAER LOS DATOS. ELIMINAR O AÑADIR AL ELEMENTO PERSISTIDO

let aniadirString = "Otro número más"

//AÑADIENDO UN NUEVO STRING A MI ARRAY

array.append(aniadirString)

//REFRESCO LA VISTA DE TABLA

self.tableView.reloadData()

//PARO EL REFRESH CONTROL

refresControl.endRefreshing()

}

Fíjate como:

  1. Actualizamos los datos y luego refrescamos la tabla con la función «reloadData»
  2. Indicamos al objeto de la clase UIRefreshControl que debe parar de refrescar, con esta instrucción, el objeto se para y se oculta.

Espero que esta clase te haya resultado útil.

Te dejo con el video de como actualizar los datos de tu tabla con la clase UIRefreshControl.

Ya sabes que todo esto y mucho más está disponible en Campus iOS Online, la plataforma privada para aprender a desarrollar software para las plataformas de Apple, con nuevo contenido cada semana.

¡Tómatelo en serio! Únete a Campus iOS Online 🙂

Descarga aqui el proyecto con el código fuente.

Hasta aquí el tutorial, espero que te haya gustado, y ya sabes, si tienes cualquier consulta, sugerencia, o por que no, felicitación, siéntete libre de dejarme un comentario al final del post.

Nos vemos, en la próxima clase… ¡Hasta luego! 😉

About The Author
iOS Developer & Instructor at CFE Apps. Enseño a crear aplicaciones iOS a todo el que quiera aprender.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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