¿Tienes una idea para una aplicación pero te falta el conocimiento de programación para empezar a construirla? En esta serie de blogs semanales, Cómo liberar a tu desarrollador interno de aplicaciones, te llevaré a ti, el no-programador, paso a paso a través del proceso de creación de aplicaciones para el iPhone, iPod touch y iPad. Acompáñame cada semana en esta aventura, y experimentarás lo divertido que puede ser convertir tus ideas en realidad! Esta es la Parte 11 de la serie. Si acabas de empezar ahora, mira el comienzo de la serie aquí. (Esta entrada ha sido actualizada a Swift 1.2, iOS 8 y Xcode 6.3)

Ahora que tienes algunos de los fundamentos de la programación de Swift en tu cinturón, es hora de sumergirte en un territorio de codificación más profundo.Para obtener la última versión de iAppsReview , selecciona este enlace.

La Fototeca iOS

Apple permite que las aplicaciones personalizadas que creas accedan a la Fototeca en un dispositivo iOS. Esto te permite añadir una gran funcionalidad a tus aplicaciones. Apple facilita esta tarea proporcionando una interfaz de usuario preconstruida que permite a los usuarios navegar por sus fotos y seleccionar una imagen. Nuestro objetivo en este post es mostrar un selector de imágenes cuando el usuario pulsa la vista de la imagen con el marcador de posición Add Image ( Figura 1 ), les permite seleccionar una imagen del álbum de fotos y mostrar una miniatura de la imagen en el control de la vista de la imagen a la derecha del botón.

Figura 1 – El botón Álbum de fotos en la esquina inferior izquierda de la escena Revisión de escritura

Añadiendo fotos al simulador

Por defecto, el Simulador iOS no tiene fotos en su Biblioteca de fotos, que necesitamos para esta demostración. Afortunadamente, es fácil añadir imágenes como se indica en estos pasos:

  1. En el menú Xcode, selecciona Xcode> Open Developer Tool> iOS Simulator ;
  1. Descargue las imágenes de la aplicación Doodle Jump que he creado para usted desde este enlace. Esto descomprime automáticamente la carpeta DoodleJump en la carpeta de descargas de tu Mac.
  1. Abre el Finder y navega a tu carpeta de descargas . Expande la carpeta DoodleJump y verás los archivos DoodleJump1.PNG y DoodleJump2.PNG .
  1. Arrastra el archivo DoodleJump1.PNG de la ventana del Finder al Simulador como se muestra en Figura 2 , y luego suelta el botón del ratón.

Figura 2 – Arrastrando una imagen al Simulador la añade a la Fototeca del Simulador.

Al hacer esto, la aplicación de fotos se lanza en el simulador, y la imagen se muestra en la ventana como se muestra en Figura 3.

Figura 3 – La imagen se muestra en la aplicación de fotos.

  1. Ahora arrastra y suelta el DoodleJump2.PNG del Finder al Simulador.

¡Eso es! Ahora tienes dos imágenes en el Simulador del iPhone a las que puedes acceder desde la aplicación iAppsReview . Si quieres, puedes hacer clic en el botón de Inicio del Simulador, lanzar la aplicación Photos , y ver las dos imágenes recién añadidas.

Creación de un método de acción y salida

Para mostrar la vista de selección de imágenes que permite al usuario seleccionar una imagen del Álbum de fotografías y almacenarla en la vista de imágenes, es necesario hacer lo siguiente:

  • Hacer que el control de la vista de la imagen sea interactivo.
  • Añade un control de Reconocimiento de Gestos de Tap a la vista de la imagen.
  • Crear una accessPhotoLibrary: método de acción para el Reconocedor de Gestos de Tap.
  • Crear una salida llamada imgThumbNail para la vista de la imagen.

Aquí están los pasos detallados:

  1. Abre el proyecto iAppsReview en Xcode.
  1. Haz clic en la vista de la imagen (con el marcador de posición Add Image ) en la escena Write Review para seleccionarla, y luego ve al Inspector de Atributos y selecciona la casilla de verificación User Interaction Enabled ( Figura 4 ).

Figura 4 – Seleccione la casilla de verificación Interacción de usuario habilitada .

  1. Desafortunadamente, las vistas de imágenes no tienen un evento que se dispare cuando las tocas. Aquí es donde los reconocedores de gestos vienen al rescate. Arrastra un Toca Gesture Recognize r de la Biblioteca de objetos y suéltalo en la vista de la imagen como se muestra en Figura 5 .

Figura 5 – Arrastrar y soltar un Tocar el Reconocedor de Gestos en la vista de la imagen.

Esto agrega un segundo reconocedor de gestos al muelle de la escena encima de la escena Revisión de escritura .

  1. Ya que necesitamos añadir un nuevo método de acción al controlador de la vista de la escena, vamos a mostrar el Editor Asistente. Para ello, haz clic en el botón central del grupo de botones del Editor en la parte superior derecha de la ventana de Xcode. Esto debería mostrar automáticamente el archivo WriteReviewController.swift en la ventana del Assistant Editor. Si no lo hace, selecciona Automatic> WriteReviewViewController.swift en la barra de navegación de la parte superior del Editor Asistente.
  1. Haga clic en el reconocedor de gestos de la derecha para seleccionarlo, y luego vaya al Inspector de Conexiones (el primer botón de la derecha en la barra de herramientas de los Inspectores. ) En la sección Acciones de envío , haz clic en el pozo de conexión a la derecha del selector acción y arrastra hacia abajo hasta el archivo WriteReviewViewController.swift justo encima del shareReview: método de acción como se muestra en Figura 6 .

Figura 6 – Crear una conexión desde el reconocedor de gestos.

Suelta el botón del ratón y verás un popup de creación de conexión ( Figura 7 ). En el campo de texto Name , introduce accessPhotoLibrary y luego haz clic en Connect .

Figura 7 – Crear un nuevo método de acción llamado accessPhotoLibrary .

Esto crea un nuevo acceso a la Fototeca: método de acción en el archivo de código. Volveremos a implementar este método en un momento, pero primero, vamos a crear una salida para la vista de la imagen.

Creando una salida para la vista de la imagen

  1. En la escena de Write Review , haz clic en la vista de la imagen. A continuación, ve al Inspector de Conexiones, haz clic en el pozo de conexión a la derecha de Nueva salida de referencia y arrastra hacia abajo en el archivo WriteReviewViewController.swift justo encima de la propiedad tvwReview como se muestra en Figura 8 .

Figura 8 – Crear una salida para la vista de la imagen.

  1. En la ventana emergente Crear salida, introduzca imgThumbNail y haga clic en Conectar . Esto crea una nueva propiedad de salida como se muestra en Figura 9 .

Figura 9 – La nueva propiedad de salida imgThumbnail

Implementar el acceso a la Fototeca: Método

Ahora estás listo para añadir el código de implementación a la accessPhotoLibrary: :

  1. Cierra el Asistente del Editor haciendo clic en el botón de la izquierda en el grupo de botones del Editor en la parte superior derecha de la ventana de Xcode.
  1. En el Project Navigator, haga clic en el archivo de código WriteReviewViewController.swift y desplácese hacia abajo hasta la parte inferior del archivo de código para ver la accessPhotoLibrary: .
  1. Añade el código que se muestra en Figura 10 , y luego discutiremos lo que hace el código (basado en mis mensajes anteriores, asumo que sabes lo básico de cómo escribir código en un método. Asegúrate de que permites que la completación de código de Xcode complete automáticamente tu código en lugar de escribir cada carácter tú mismo).

Figura 10 – accessPhotoLibrary: código

La primera línea de código crea un objeto controlador de selección de imágenes de la clase UIImagePickerController . En la segunda línea de código, se establece la propiedad sourceType del objeto controlador de selección de imágenes . La tercera línea de código muestra el controlador del selector de imágenes.

Echemos un vistazo más de cerca a la segunda línea del código. Cuando fijas el valor de una propiedad con la que no estás familiarizado, es una buena idea leer la documentación de Apple para ver cómo se utiliza la propiedad. La figura 11 contiene la documentación de la propiedad sourceType .

Figura 11 – Documentación de Apple para la propiedad sourceType del UIImagePickerController

La documentación especifica que la propiedad sourceType tiene un valor del tipo UIImagePickerControllerSourceType , y se refiere al tipo como una enumeración . Descubriremos lo que es eso en un momento.

Si haces clic en el enlace UIImagePickerControllerSourceType , te lleva a la documentación que se muestra en Figura 12 .

Figura 12 – La enumeración UIImagePickerControllerSourceType

Una enumeración es un grupo de valores constantes relacionados. En este caso, la enumeración UIImagePickerControllerSourceType define los valores válidos que se pueden almacenar en la propiedad sourceType . Las enumeraciones son útiles en casos como éste cuando hay un número finito de valores válidos que pueden ser almacenados en una propiedad. A diferencia de las variables de cadena en las que se puede almacenar cualquier cadena de caracteres, o de las variables enteras en las que se puede almacenar cualquier número entero válido, las enumeraciones limitan los valores válidos a un conjunto finito.

Leyendo la documentación, puede determinar que el valor que desea es PhotoLibrary porque especifica que la biblioteca de fotos del dispositivo es la fuente del selector de imágenes. Esto es exactamente lo que queremos.

Antes de seguir adelante, eche un vistazo a Figura 13 , que contiene un diagrama de secuencia que muestra la interacción entre los objetos WriteReviewViewController y UIImagePickerController .

Figura 13 – La interacción del método entre los objetos writeReviewController y imagePicker del

Los rectángulos en la parte superior del diagrama de secuencia representan los objetos que se crean a partir de las clases WriteReviewViewController y UIImagePickerController en tiempo de ejecución. Las líneas de puntos debajo de los objetos se llaman «líneas de vida» e indican la vida de un objeto. Las flechas que apuntan entre los objetos y entre las líneas de vida son cada una una llamada de método entre los objetos. Este es el orden en que se producen las llamadas del método:

  1. El objeto writeReviewViewController crea un objeto imagePicker de la clase UIImagePickerController .
  1. El objeto writeReviewViewController llama al setSourceType: en el objeto imagePicker , pasando un argumento UIImagePickerControllerSourceType.PhotoLibrary .
  1. El objeto writeReviewViewController llama al presentViewController: sobre sí mismo, pasando el objeto imagePicker como un argumento (he dejado de lado los otros argumentos en aras de la brevedad). Cuando el presenteViewController: se ejecuta en tiempo de ejecución, el objeto imagePicker se muestra en la interfaz de usuario.

Creo que es importante la interacción visual de los objetos para que entiendas realmente cómo funciona tu código. Mientras trabajas en tus propias aplicaciones, te recomiendo crear diagramas de secuencia para los métodos más complicados de tu aplicación, llamados secuencias.

Probando la integración de la fototeca

Tomemos el código que escribimos para dar una vuelta para ver cómo funciona.

  1. En Xcode, haz clic en el botón Ejecutar .
  1. Cuando la aplicación aparezca en el Simulador, haz clic en la opción Escribir una reseña y, a continuación, en la pantalla Escribir una reseña , haz clic en la vista de la imagen con el marcador de posición Añadir imagen . Como es la primera vez que la aplicación iAppsReview intenta acceder a la biblioteca de fotos, aparece un cuadro de diálogo que te pregunta si quieres que iAppsReview acceda a tus fotos. Haz clic en OK para permitirlo. Esto muestra la pantalla Photos que se muestra a la izquierda de Figura 14 , y puedes ver la última imagen que añadimos al Simulador. Esta es la misma interfaz con la que los usuarios se sienten cómodos en la aplicación incorporada Photos .

Figura 14 – Las pantallas de la Fototeca del Controlador de Selección de Imágenes

  1. Toca la fila Camera Roll y serás llevado a la pantalla Camera Roll que se muestra en el lado derecho de Figura 14 . Si seleccionas una de las fotos, el controlador del selector de imágenes desaparece por la parte inferior de la pantalla. No pasa nada con la imagen seleccionada porque todavía no hemos escrito ningún código para responder a la selección.

Recuperación de la imagen seleccionada utilizando un delegado

Si se echa otro vistazo al diagrama de secuencia en Figura 13 , no parece haber una manera de que el objeto WriteReviewViewController obtenga la imagen que se selecciona en el objeto imagePicker .

Si lees más abajo en la documentación de Apple para la clase UIImagePickerController , verás la sección Proporcionar un objeto delegado como se muestra en Figura 15 .

Figura 15 – Debe proporcionar un objeto delegado para un controlador de selección de imágenes.

Esta documentación dice: » Para utilizar un controlador de selección de imágenes debe proporcionar un delegado que se ajuste al protocolo UIImagePickerControllerDelegate . « ¿Qué significa esto?

En este contexto, delegación se refiere a un objeto que se apoya en otro objeto (el delegado) para proporcionar un conjunto específico de funcionalidades. En Swift, se puede definir un conjunto específico de funcionalidad requerida utilizando un protocolo . El hecho de que el protocolo mencionado en la documentación se llame UIImagePickerControllerDelegate indica que es el controlador i mage picker el que especifica la funcionalidad que necesita para pasar información sobre la imagen seleccionada por el usuario.

Si haces clic en el enlace UIImagePickerControllerDelegate Protocol Reference en el tema de ayuda que se muestra en Figura 9 , se te llevará a un tema de ayuda que define los métodos que se muestran en Figura 16 .

Figura 16 – El UIImagePickerControllerDelegate Métodos de protocolo

Aquí hay una sinopsis de estos dos métodos:

  1. imagePickerController:didFinishPickingMediaWithInfo: El controlador del selector de imágenes llama a este método en el objeto delegado cuando el usuario ha terminado de seleccionar una imagen. Pasa información al delegado describiendo el medio que ha sido seleccionado.
  1. imagePickerControllerDidCancel: El controlador del selector de imágenes llama a este método en el objeto delegado cuando el usuario hace clic en Cancelar en lugar de seleccionar una imagen.

En última instancia, cualquier objeto que sea delegado del controlador del selector de imágenes debe tener estos dos métodos. Desafortunadamente, la documentación de Apple es algo engañosa. Si bien es cierto que un objeto delegado debe implementar el UIImagePickerControllerDelegate , también debe implementar el UINavigationControllerDelegate . ¿Cómo puedo saber esto? La clase UIImagePickerController tiene una propiedad delegada que se describe en la documentación de Apple que se muestra en Figura 17 .

Figura 17 – La propiedad delegado de la clase UIImagePickerControllerDelegate

Así que en resumidas cuentas, necesitas implementar ambos protocolos en el objeto delegado.

Aunque puedes hacer que cualquier objeto sea el delegado de un controlador de selección de imágenes, es típico hacer que el controlador de la vista sea el objeto delegado. Hagamos eso ahora como se describe en los siguientes pasos.

  1. En el navegador del proyecto, seleccione el archivo de código WriteReviewViewController.swift .
  1. Cerca de la parte superior del archivo de código en la segunda línea de código, haga clic a la derecha de la «r» en UITableViewController (y antes de la abrazadera rizada).
  1. Podríamos poner el código que implementa el protocolo en esta misma línea, pero es más fácil de leer si lo añadimos en una segunda línea. Para ello, primero escribe una coma, luego pulsa return y luego tab para sangrar un poco el código.
  1. A continuación, escriba el código que se muestra en Figura 18 . Este código entre corchetes angulares le dice al mundo (porque está en el archivo de cabecera pública) que la clase WriteReviewViewController implementa los protocolos UIImagePickerControllerDelegate y UINavigationControllerDelegate ;

Figura 18 – Implementación de los protocolos

  1. Antes de implementar los métodos que están en el protocolo UIImagePickerControllerDelegate , necesitamos añadir algunas propiedades a la clase para contener parte de la información que obtenemos del controlador del selector de imágenes. En lugar de crear variables locales dentro de un método, vamos a crear propiedades a nivel de la clase. Las propiedades son muy útiles, porque, a diferencia de las variables locales, se puede acceder a ellas por cualquier método de la clase.

Para crear estas propiedades, vaya al navegador del proyecto y seleccione el archivo de implementación WriteReviewViewController.swift . Después, desplácese hasta la parte superior del archivo de código y añada el código que se muestra en Figura 19 debajo de las declaraciones IBOutlet .

Figura 19 – Declarando propiedades

Este código declara una propiedad llamada image del tipo UIImage y otra propiedad llamada imageURL que contiene un objeto de tipo NSURL . Los signos de interrogación después de cada declaración de propiedad indican que las propiedades pueden a veces contener nil , o nada. En Swift, si una propiedad puede contener potencialmente nil , debe agregar un signo de interrogación después de su tipo.

  1. Ahora necesitamos implementar los métodos que están en el protocolo UIImagePickerControllerDelegate . Para ello, añadimos los métodos que se muestran en Figura 20 debajo de la accessPhotoLibrary: .

Figura 20 – La implementación de los métodos UIImagePickerControllerDelegate

El código del primer método llama al dismissViewControllerAnimated:completion: en el controlador de la vista (self), que oculta el controlador del selector de imágenes después de que el usuario selecciona una imagen. A continuación, toma la imagen del parámetro info pasado de vuelta desde el controlador del selector de imágenes y lo almacena en la propiedad de la imagen para su uso futuro. A continuación, el código toma la imagen y la almacena en la propiedad de la imagen de la vista de la imagen . Esto hará que la imagen aparezca en la vista de la imagen en tiempo de ejecución.

El imagePickerControllerDidCancel: también descarta el controlador del selector de imágenes, pero no necesita hacer nada después.

  1. Ahora sólo hay una cosa más que necesitas hacer: establecer WriteReviewViewController como delegado del controlador del selector de imágenes. Para ello, añade el código que se muestra en Figura 21 a la accessPhotoLibrary: .

Figura 21 – Almacenar una referencia al objeto WriteReviewViewController en la propiedad delegada del controlador del selector de imágenes.

Para tener una idea más clara de cómo funcionan estas nuevas llamadas de método entre los objetos, mira Figura 22 .

Figura 22 – El método completo de llamada de flujo entre objetos

En este diagrama de secuencia actualizado, observe que hay un nuevo método setDelegate en el que el objeto writeReviewViewController almacena una referencia a sí mismo en la propiedad imagePicker del objeto delegate . En la parte inferior del diagrama, se ha añadido una nueva llamada a un método. Esta llamada al método se envía desde el objeto imagePicker al objeto writeReviewViewController después de que el usuario seleccione una imagen. Se envía un argumento media en esta llamada a método que contiene una colección de objetos que contienen información sobre la imagen seleccionada.

Probando el Código de Delegados

Ahora estás listo para probar el código y ver cómo funciona.

  1. Haz clic en el botón Run de Xcode .
  1. Cuando la aplicación aparezca en el simulador, haz clic en la fila «Write a Review» .
  1. Haz clic en el botón Álbum de fotos .
  1. En la pantalla Fotos , seleccione la fila Fotos guardadas .
  1. Seleccione cualquiera de las dos imágenes.
  1. El controlador del selector de imágenes debería desaparecer y debería ver la imagen mostrada como una miniatura en la vista de la imagen como se muestra en Figura 23 .

Figura 23 – La foto seleccionada aparece en la vista de la imagen.

Si desea una copia del proyecto tal y como lo hemos completado hasta ahora, sólo tiene que hacer clic en este enlace.

Conclusión

Personalmente, encuentro interesante y divertido añadir el tipo de funcionalidad que hemos añadido a iAppsReview en este post. A lo largo del camino, han aprendido una serie de nuevos conceptos incluyendo delegados, protocolos y propiedades. A medida que pase el tiempo y utilicemos estos conceptos en futuros posts, se volverán mucho más familiares y serán una parte importante de su kit de herramientas de iOS.

<>

Deja una respuesta

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