fbpx
 

Introducción a los Storyboards [Parte 3]

Introducción a los Storyboards [Parte 3]

1. Introducción

 

Si has seguido los Tutoriales de las últimas semanas en EfectoApple, habrás visto que nos hemos centrado el funcionamiento de los Storyboards.

En la Primera Parte de este Tutorial repasamos los conceptos básicos y vimos como añadir elementos a las interfaces de nuestras aplicaciones.

Por otro lado, en la Segunda Parte del Tutorial, revisamos uno de los conceptos más importantes: Los Segues.

Ahora en la parte final de este Tutorial, siguiendo el estilo de los Tutoriales de EfectoApple, veremos como aplicar todo lo que hemos visto, desarrollando una Aplicación iOS multivista.

 

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

 

Si has seguido otros Tutoriales de EfectoApple, es probable que conozcas éste en el que Desarrollamos una Aplicación de Gestión de Tareas.

Esta aplicación es interesante para comprender algunos conceptos fundamentales del Desarrollo iOS.

Sin embargo, se trata de una app que cuenta con una única vista, cuando lo normal, en cualquier proyecto, es que conste de varias pantallas diferentes.

En el Tutorial de esta semana, vamos a crear una versión mejorada de nuestra App de Gestión de Tareas.

Estos son los puntos más importantes que veremos juntos:

  1. Crear el Modelo de nuestra Aplicación
  2. Hacer que el usuario pueda crear objetos de tipo Task
  3. Almacenar los objetos de tipo Task en nuestro Modelo
  4. Utilizar una celda personalizada para mostrar las tareas
  5. Añadir Segues entre las pantallas de la interfaz
  6. Aprovechar los Unwind Segues para la navegación de nuestra app

 

3. ¿Qué Aplicación vamos a desarrollar?

 

Como hemos comentado antes realizaremos la versión 2.0 de nuestra Aplicación de Gestión de Tareas.

Esta app constará de 3 pantallas diferentes.

Para realizar la navegación entre estas pantallas, utilizaremos los dos tipos de transiciones que vimos en la Segunda Parte del Tutorial:

  • Presentación Modal de View Controllers
  • Navegación utilizando un Navigation Controller

Así, veremos como poner en práctica los conocimientos teóricos que vimos en las partes anteriores de nuestro Tutorial.

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

 

Storyboard final app demo

 

Como ves, se trata de una aplicación sencilla que nos permitirá añadir tareas a nuestro listado de Tareas pendientes.

Cada vez que pulsamos en el botón +, la aplicación nos permite añadir una nueva tarea especificando su nombre y su prioridad.

Al momento esa tarea aparecerá en nuestro listado de Tareas pendientes.

Se trata de una aplicación sencilla pero que al mismo tiempo nos servirá para comprender mejor los fundamentos de las aplicaciones multivista.

¡Comenzamos!

 

4. La Interfaz de nuestro Proyecto de Inicio

 

Para no alargar en exceso el Tutorial y poder centrarnos en las partes realmente importantes, he creado un Proyecto de Inicio que podrás descargar desde aquí.

Una vez descargado, descomprímelo y ábrelo con Xcode.

Si intentas compilar el proyecto verás que se producen muchos errores.

Esto se debe a que el código está incompleto y lo iremos completando a lo largo de este Tutorial.

Accede al fichero Main.storyboard.

Allí podrás ver las 3 pantallas que forman nuestra Interfaz y 2 Navigation Controllers que nos facilitarán la navegación entre las pantallas.

1 Storyboard App Interface demo

Pantalla de Inicio

 

Storyboards first image app

Es la pantalla que se muestra nada más arrancar la Aplicación. Nos permite mostrar el listado de tareas pendientes y a través de su botón situado en la esquina superior derecha podemos añadir nuevas tareas.

 

Añadiendo una nueva tarea

 

Storyboards third image app

Esta vista se muestra cuando el usuario pulsa sobre el botón +. En ella, el usuario podrá especificar el nombre de la tarea y su prioridad. Dispone de dos botones en la parte superior que le permiten cancelar en cualquier momento el proceso o confirmar la adición de la tarea nueva.

 

Especificando la prioridad

 

Storyboards second image app

Cuando el usuario pulse en la celda Prioridad, se mostrará nuestra tercera vista. En ella, el usuario podrá especificar entre un listado prefijado de opciones, cual es la prioridad que quiere asignarle a la tarea. En el momento, en que el usuario selecciona la prioridad, automáticamente nuestro View Controller regresa a la pantalla anterior.

 

5. Las Clases de nuestro Proyecto de Inicio

 

Después de revisar la interfaz de la aplicación, vamos a ver las clases que tenemos creadas en nuestro proyecto.

Si te fijas en el Navegador de Xcode, situado en la parte izquierda, verás que tenemos creadas las siguientes clases:

 

TasksTableViewController

 

Controla la pantalla de inicio de nuestra aplicación. Gestiona la TableView donde mostramos el listado de tareas pendientes. Además deberá tener un método que se ejecute cuando el usuario pulse en el botón + para añadir una nueva tarea al listado.

 

AddTaskTableViewController

 

Gestiona la pantalla donde el usuario podrá añadir una nueva tarea. Desde aquí gestionaremos el comportamiento del textField cuando el usuario pulse sobre el campo Nombre y además realizaremos la transición hacia la pantalla de Prioridades cuando el usuario toque en el campo Prioridad.

 

PriorityTableViewController

 

Controla la pantalla en la que el usuario especifica la prioridad de la tarea que está creando. Gestionará la TableView que muestra las diferentes prioridades y cuando el usuario elija una de ellas deberá de volver a la pantalla anterior.

 

TaskCell

 

Se ocupa de la celda personalizada que se utiliza en la TableView de la pantalla principal.

 

Task

 

Esta clase forma el modelo de datos de nuestra aplicación. Representa a un objeto Tarea, que cuenta con Nombre y Proridad como atributos.

 

SampleData

 

Se trata de una clase auxiliar que nos permite añadir datos iniciales a nuestra aplicación, para que al ejecutarla por primera vez, el usuario vea algunas tareas creadas de ejemplo.

 

6. ¿Cómo vamos a trabajar en este Proyecto?

 

Si has podido echar un vistazo a las clases que aparecen en el Proyecto de Inicio, verás que todos los métodos están vacíos.

El objetivo de este tutorial es ir rellenando todos los métodos de cada una de las clases de nuestro proyecto, mientras vamos explicando en que consiste el código que vamos desarrollando.

Además tendremos que añadir los Segues que necesitaremos para que podamos ir navegando entre las pantallas de la aplicación.

Por tanto, estos serán nuestros objetivos:

  • Rellenar todos los métodos que forman nuestra app
  • Crear las transiciones necesarias para que la aplicación funcione

 

7. Creando el Modelo de nuestra Aplicación

 

Uno de tus primeros pasos cuando desarrolles cualquier aplicación debe ser tener claro el modelo de datos que vas a utilizar.

Si no tienes claro a que nos referimos con el Modelo de una aplicación, deberías echar un vistazo a este Tutorial: MVC en Aplicaciones iOS.

En esta aplicación utilizaremos un Modelo muy sencillo que consistirá en una clase Task que representará a cada una de las tareas con las que trabajaremos.

La información que tenemos que almacenar para cada tarea será la siguiente:

  • Nombre
  • Prioridad

Abre el fichero Task.swift y añade el siguiente código:

Simplemente creamos un struct que representará a cada una de las Tasks y que constará de dos propiedades: name y priority y un inicializador personalizado que inicializa dichas propiedades.

Además de nuestro modelo, vamos a utilizar otra clase auxiliar que únicamente nos servirá para mostrar una serie de datos iniciales en la aplicación. Abre SampleData.swift y añade lo siguiente:

Como ves, hemos creado un array de objetos Task que hemos inicializado con algunos datos.

Con estas dos clases, habríamos creado todo lo necesario para configurar nuestro Modelo de Datos.

 

8. Pantalla Inicial de nuestra App

 

Comenzaremos por la pantalla de inicio de nuestra aplicación.

Abre la clase TasksTableViewController.swift y verás que tenemos 2 partes diferenciadas. Los 3 primeros métodos son los típicos métodos de TableView, mientras que el método saveTaskDetail() se ejecutará cuando el usuario pulse el botón Hecho.

Además necesitaremos un array donde almacenar nuestras tareas.

Para añadir este array escribe lo siguiente en la parte superior de la clase:

Hemos creado el array tasks y además lo hemos inicializado con nuestra clase SampleData.swift.

A continuación añade los métodos del TableView a la clase:

No vamos a explicar estos métodos, ya que hemos hablado de ellos muchas veces en otros tutoriales. Sin embargo, si no tienes experiencia trabajando con TableViews te recomiendo este tutorial para comenzar: Tutorial de Introducción a TableView.

Además de esto, tendrás que añadir el código correspondiente al método saveTaskDetail():

Hemos creado un objeto de tipo AddTaskTableViewController a partir de la pantalla de la que proviene el segue.

Después hemos obtenido la tarea a partir de su variable task y la hemos añadido al array de tareas.

Por último hemos añadido una row a nuestra TableView, ya que ahora vamos a tener una Task mas.

 

9. Nuestra clase TaskCell

 

Accede a la clase TaskCell.swift. El código que vamos a añadir será muy sencillo.

Lo único que haremos será crear una propiedad de tipo Task dentro de nuestra clase y le añadiremos un observador que nos permitirá especificar los campos taskLabel y priorityLabel de nuestra celda a partir de los valores del objeto task.

Solo tienes que añadir este código a continuación de los Outlets:

De esta manera, nuestra clase TaskCell.swift estaría terminada.

 

10. Pantalla para añadir una nueva tarea

 

El siguiente punto de la aplicación donde nos centraremos será en la pantalla donde el usuario puede crear una nueva tarea. Recuerda que para acceder a esta vista, deberá pulsar en el botón + situado en la esquina superior derecha de la pantalla principal.

Abre la clase AddTaskTableViewController.swift.

Lo primero que tendremos que añadir será una propiedad de tipo Task que representará a la tarea que estamos añadiendo. Incorpora este código justo después de los Outlets:

Además, como puedes ver, hemos incorporado un observador que añade la prioridad de la tarea como texto del detailLabel de la celda. También hemos especificado que por defecto, la prioridad de una tarea sea “Importancia Máxima“.

En el método didSelectRowAt() añadiremos lo siguiente:

Lo único que hace es que cuando el usuario pulse en la celda donde especificará el nombre de la tarea, hacemos que el foco pase al textField, para que de esa forma, recoja el texto escrito por el usuario.

 

El Método Prepare()

 

El siguiente método que completaremos, será prepare().

Este método se ejecuta justo antes de que la pantalla vaya a hacer un segue hacia otra vista:

Esta pantalla puede hacer un segue producido porque el usuario pulse el botón Hecho, es decir, quiera guardar la tarea (SaveTaskDetail). Lo que haremos será crear un nuevo objeto task, que inicializaremos con el nombre y la prioridad que haya definido el usuario.

O puede hacer un segue cuando el usuario pulse en la celda Prioridad (PickPriority). En ese caso, tendremos que pasar la propiedad priority a nuestro siguiente ViewController.

 

Añadiendo un método Unwind

 

Por último, tendremos que controlar que si se ha hecho un unwind desde la pantalla PriorityTableViewController, tendremos que actualizar la propiedad priority con la prioridad elegida por el usuario. Esto lo haremos con el siguiente método unwind:

Con esto, habríamos terminado nuestra clase AddTaskTableViewController.

Si quieres conocer más en detalle como funciona el Unwind Segue, puedes echar un vistazo a nuestra sección de Conceptos

 

11. Vista en la que seleccionamos Prioridad

 

Para finalizar la parte de código de nuestra aplicación, vamos a acceder a la clase PriorityTableViewController.swift.

Recordemos que esta pantalla lo que hará será mostrarnos una TableView con un listado de prioridades, que le permitirán al usuario

Lo primero que necesitaremos aquí, será una variable que almacene ese listado de prioridades. Así que añade lo siguiente a la parte superior de tu código:

Además hemos añadido un observador que recupera el index de la prioridad y lo almacena en la variable selectedPriorityIndex, cada vez que se modifica la propiedad selectedPriority.

 

Los Métodos del TableView

 

A continuación implementaremos los métodos del TableView:

El método numberOfSections() devuelve 1 ya que solo tenemos una sección:

El método numberOfRowsInSection() devolverá el número de prioridades que tenemos:

El método cellForRowAt() creará la celda de tipo TaskCell y actualizará el CheckMark en función de si la celda ha sido seleccionada o no por el usuario:

Por ultimo, didSelectRowAt() actualizará el CheckMark de las celdas cuando el usuario pulse alguna de ellas:

Añadiendo un nuevo método Unwind

 

Además, para terminar, cuando el usuario pulse en cualquier celda, tendremos que actualizar la propiedad selectedPriority y volver a la pantalla anterior. Por tanto, tendremos que utilizar un método unwind:

Con este último método habríamos terminado la clase PriorityTableViewController.

 

12. Añadiendo Segues a nuestra Aplicación

 

Una vez que hemos acabado de añadir el código de nuestra app, tendremos que centrarnos en añadir los segues que necesitemos para que la aplicación pueda ir navegando entre las pantallas de su interfaz.

Los 2 segues que necesitamos son estos:

  • Desde el botón + hasta el siguiente Navigation Controller
  • Desde la celda Prioridad hasta el View Controller PriorityTableViewController

Vamos a añadir el primero.

Accede a Main.storyboard, y dejando pulsada la tecla ctrl, arrastra desde el botón + hasta el Navigation Controller situado a su derecha. En el menú flotante que aparecerá, elige Present Modally:

 

Storyboards first segue

 

Después añadiremos el segundo segue.

Dejando también la tecla ctrl pulsada, arrastra desde la celda Prioridad hasta el View Controller PriorityTableViewController. En el menú flotante elige Show:

 

Storyboards second segue

 

Después, selecciona el Segue y asígnale como Identificador: PickPriority

 

storyboard changing identifier 10

 

De esa forma, habríamos enlazado las pantallas de la aplicación y ahora podríamos navegar de una a otra sin problema.

Ahora, puedes ejecutar la aplicación y comprobar que funciona perfectamente.

 

13. Resumen Final

 

¡Enhorabuena! has desarrollado una aplicación multivista practicamente desde cero.

Este ha sido uno de los Tutoriales más completos que he publicado en EfectoApple.

Espero que lo que acabamos de ver en este desarrollo te ayude para tus futuros proyectos.

 

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

 

15. 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:

 

 

11. ¿Donde ir ahora?

 

El lunes de la semana que viene, como siempre, continuaremos con un nuevo Tutorial.

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:
Sin comentarios

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.