iOS: Selección de Imágenes y Acceso a cámara

En esta entrada veremos otra de las capacidades disponibles en Xojo desde la edición Xojo 2016r2. Se trata de la capacidad de recibir en nuestro proyecto la imagen que haya seleccionado el usuario de entre las disponibles en el Carrete Fotográfico de iOS, en cualquiera de sus álbumes, o bien que haya realizado utilizando cualquiera de las cámaras disponibles (frontal o posterior).

Y para todo lo anterior sólo tenemos que añadir a nuestro proyecto Xojo de iOS una instancia de iOSPicturePicker. Eso sí, su funcionamiento viene determinado por la propiedad Source y que puede corresponderse con cualquiera de los valores Enumerados Camera, CameraRoll y PhotoLibrary. Lo que conviene tener en cuenta es que no se pueden combinar entre sí. Es decir, no podrás presentar un iOSPicturePicker que muestre el selector de fotografías del carrete o los álbumes disponibles y, al mismo tiempo, permita realizar fotografías.

Lo que sí puedes hacer es poner a True la propiedad IsEditable, en cuyo caso el usuario podrá editra la imagen capturada mediante la cámara incorporada o bien aquella que haya seleccionado desde el carrete o el álbum fotográfico seleccioando. Dichas capacidades de edición se limitan a reencuadrar la imagen capturada o seleccionada.

Por otra parte, el funcionamiento del iOSPicturePicker es asíncrono, lo que significa que una vez que hayamos invocado el método Show sobre la instancia, nuestra aplicación continuará ejecutando la línea de código inmediatamente posterior. Ahora bien, la interfaz de usuario presentada por el selector de imágen —o para la captura de una nueva fotografía— es de tipo modal, impidiendo que el usuario pueda llevar a cabo alguna otra acción sobre la interfaz de usuario de nuestra aplicación.

¿Y como recibe nuestra aplicación la imagen seleccionada? Pues bien, las instancias de iOSPicturePicker pueden instalar cualquiera de los dos eventos disponibles: Cancelled y Selected. El primero es el que se invocará en el caso de que el usuario haya cancelado la acción, mientras que el segundo será el invocado pasando como parámetro la imágen seleccionada por el usuario como una instancia de iOSImage. Es decir, a partir de ese momento ya podrás asignarla a tu modelo de datos o cualquiera de los controles compatibles disponibles en la interfaz de usuario de tu aplicación para iOS.

Depurar iOSPicturePicker

Lo único que has de tener en cuenta a la hora de depurar aplicaciones que hagan uso de instancias de iOSPicturePicker, es que el Simulador iOS no permite acceder a la Cámara. Es decir, sólo podrás depurar en el Simulador las aplicaciones que presenten el selector de imágenes para el Carrete o los Álbumes fotográficos. Si tu aplicación hace uso de la Cámara, deberás de compilarla y copiarla a un dispositivo físico (iPhone, iPad o iPod touch), utilizando por ejemplo la sincronización de iTunes. Recuerda que, en este caso, deberás de contar también con un perfil para firmar el Código.

iOSPicturePicker en la práctica

Para ponerlo en la práctica vamos a ver como podemos crear una sencilla aplicación iOS en la que vamos añadiendo imágenes capturadas con el dispositivo a una tabla (iOSTable). Para ello abre el IDE de Xojo y en el Selector de Proyectos crea un nuevo proyecto de tipo iOS. Ya sabes que, como se ha indicado anteriormente, deberás de contar con un dispositivo iOS físico conectado al Mac, así como una cuenta de desarrollador para la cual dispongas de los perfiles de firmado de código.

Para comenzar, nos vamos a encargar de la sencilla interfaz de usuario. Selecciona el objeto View1 en el Navegador de Proyecto (la columna situada más a la izquierda en el IDE). Dicha acción mostrará el Editor de Plantillas.

Con la Librería (Library) seleccionada, arrastra sobre el Editor de plantillas el componente correspondiente al iOSPicturePicker. Como resultado, este se añadirá al Tray, en la parte inferior del Editor de Plantillas y también quedará reflejado en la jerarquía de controles que cuelga de View1. Utiliza el Panel Inspector para cambiar su nombre por el de MyPicturePicker. A continuación añade sobre el Editor de Plantillas un control iOSTable, también desde la librería. Por último, añade desde la librería un Botón (iOSButton) y utiliza un texto descriptivo para su etiqueta, como por ejemplo “Take Photo”. El resultado debería ser similar al mostrado en la siguiente imagen:

Crear Modelo de Datos

Ahora nos encargaremos de crear el modelo de datos que alimentará a la tabla. Añade una nueva Clase al proyecto (Insert > Class). Selecciona la clase recién creada y asígnale un nombre utilizando para ello el Panel Inspector. En nuestro ejemplo llamaremos a dicha clase MyDataSource.

Ahora bien, para poder utilizarla como modelo de datos de la tabla, es necesario que nuestra clase implemente la Interface de Clase iOSTableDataSource, tal y como ya hemos explicado en otro tutorial.

Con la clase seleccionada en el Navegador de Proyectos, accede al Panel Inspector y pulsa sobre el botón Interfaces. Dicha acción presentará un listado en el que hemos de marcar la entrada correspondiente a iOSTableDataSource para añadir dicha interface a nuestra clase. Confirma la selección y comprobarás que Xojo añadirá automáticamente a la clase las signaturas de los métodos exigidos.

• En el método correspondiente a RowCount utiliza la siguiente línea de código: Return me.Images.Ubound + 1
• En el método correspondiente a SectionCount inserta el siguiente código: Return 1
• En el método SectionTitle, utiliza el siguiente código: Return "Custom Photo Album"
• Finalmente, inserta el siguiente fragmento de código en el método RowData

dim cell as iOSTableCellData = table.CreateCustomCell(GetTypeInfo(MyCustomCell))

dim customCell as MyCustomCell = MyCustomCell(cell.Control)

customCell.ImageView1.Image = me.Images(row)

Return cell

Como habrás observado, se hacen referencia a un par de elementos que aun no hemos añadido. Por un lado se encuentra la propiedad Images, y por otro la Celda Personalizada para la tabla MyCustomCell. Comienza por añadir la propiedad Images sobre la clase que estamos editando, utilizando para ello Insert > Property con los siguientes valores en el Panel Inspector asociado:

• Name: Images()
• Type: iOSImage

Como puedes observar, la clase es bastante simple. Se limita a proporcionar los métodos requeridos para actuar como Modelo de Datos de una iOSTable, al tiempo que establece como una propiedad de tipo Array para ir almacenando todas las imágenes que vayamos capturando mediante la cámara.

Definir la Celda Personalizada de la Tabla

En una entrada anterior ya vimos qué son y como se crean, en detalle, las celdas personalizadas que podemos crear para su uso en cualquier instancia de una Tabla (iOSTable). Por tanto, te recomiendo que leas dicha entrada para refrescar los conceptos en el caso de que lo veas necesario. A continuación nos limitaremos a indicar como crear la necesaria para este tutorial.

Desde la Libería, Arrastra un control iOS Custom Table Cell sobre el Navegador de Proyecto y selecciónalo. Dicha acción presentará el Editor de Plantillas para que puedas diseñar el tamaño y elementos de la celda personalizada. En primer lugar, cambia la vista al Panel Inspector y cambia su nombre por el de MyCustomCell. A continuación, vuelve a seleccionar la Librería y arrastra sobre un Control ImageWell sobre el contenedor mostrado por el Diseñador de Plantillas. El resultado debería de ser similar al mostrado en la imagen. También has de fijarte en seleccionar ScaleAspectFit en el menú ContentMode del apartado Behavior correspondiente al ImageWell:

¡Poniéndolo todo en marcha!

Con el Modelo de Datos creado, así como la celda personalizada que utilizará la tabla, es el momento de escribir el código restante.

Bajo View1, selecciona Button1 y añade el Manejador de Evento Action (Insert > Event Handler…). Escribe el siguiente código en el Editor de Código resultante:

MyPicturePicker.Source = iOSPicturePicker.Sources.Camera

MyPicturePicker.Editable = true

MyPicturePicker.Show(self)

¡Esto es todo lo necesario para presentar el Selector de Imágenes (o cámara) en nuestros proyectos iOS! De hecho, en tus proyectos puedes omitir la segunda de las líneas y cambia la vista padre (self, en este ejemplo) por cualquier otra en uso.

Elige a continuación el objeto MyPicturePicker en el Navegador de Proyectos y utiliza Insert > Event Handler… para añadir el evento Selected. Escribe el siguiente código en el Editor de Código resultante:

self.DatosTabla.Images.Append pic

table1.ReloadData

La primera línea se encarga de añadir la imagen seleccionada (en este caso, capturada) por el usuario al array de nuestro modelo de datos, forzando a continuación la recarga de datos en la tabla mediante la segunda línea de código.

Copiar la App en el dispositivo

Como se ha indicado anteriormente, al hacer uso de la Cámara del dispositivo no es posible ejecutarla en el Simulador de XCode, sino que hemos de instalar nuestra app sobre un dispositivo físico.

Para ello, conecta tu iPhone, iPad o iPod touch al Mac y abre la aplicación iTunes. A continuación, sigue estos pasos:

• En el IDE de Xojo, selecciona la entrada iOS bajo el apartado Build Settings. En el Panel Inspector resultante, elige tu perfil de Desarrollador Apple para iOS en el menú desplegable Team bajo el apartado Code Signing. También puedes aprovechar para indicar si deseas compilar la App como 32 o 64 bits.
• En iTunes, selecciona en la parte superior de la ventana el icono correspondiente a tu dispostiivo para acceder a sus ajustes de sincronización. Selecciona la entrada Aplicaciones bajo el apartado Ajustes de la columna situada a la izquierda en la interfaz.
• Regresa al IDE de Xojo y pulsa sobre el botón Build para generar el ejecutable. Una vez Xojo haya finalizado con la compilación, mostrará el archivo ejecutable resultante en la carpeta de destino.
• Arrastra el icono correspondiente al ejecutable de la App y suéltalo en la ventana de iTunes bajo el apartado En mi dispositivo para que se añada a la lista de Apps sincronizadas.
• Por último, pulsa sobre el botón Sincronizar en la ventana de iTunes para que se transfiera la App al dispositivo.

Conclusiones

Una vez que ejecutes la app en tu dispositivo iOS, comprobarás que al pulsar sobre el botón Take Photo de la parte inferior de la pantalla aparecerá la interfaz estándar de iOS para la captura de fotografías con la cámara. Cada vez que saques una nueva fotografía podrás hacer zoom y moverla para modificar el encuadre y, una vez que confirmes los cambios, verás que esta pasa a mostrarse en el listado tal y como hemos indicado mediante nuestra sencilla aplicación.

En definitiva, mediante este tutorial has visto de qué modo tan sencillo puede crear apps en las que se pueda trabajar o tratar las imágenes seleccionadas o capturadas por el usuario.

Además, y gracias al AutoLayout realizado por omisión por el IDE de Xojo habrás comprobado que la interfaz de usuario de la app se adapta correctamente cuando cambias la orientación del dispositivo entre vertical y apaisado.

¿Te atreves a ampliar el programa de ejemplo para que guarde las imágenes a una base de datos SQLite?

*Esta entrada ha sido escrita en Markdown y exportada como HTML para este blog con Snippery