1. SWIFT - iOS 10 Español: Acceso a la cámara y al álbum
Summary
TLDREste capítulo ofrece una guía para utilizar la cámara de un dispositivo y guardar fotografías en la librería. Se introduce una vista de imagen y se anclan botones para activar la cámara y abrir la librería de fotos. Se discuten opciones de visualización de imágenes como 'aspect fill' para evitar deformación. Se crea una clase para manejar la vista de la cámara o la librería, y se verifica la disponibilidad de la cámara antes de su uso. Se presenta un 'image picker' con opciones para seleccionar y editar imágenes, y se implementan delegados para manejar la selección de fotografías y su asignación a una vista. El objetivo es permitir tomar fotografías, seleccionarlas de la librería y guardarlas sin duplicarlas, todo ello con la finalidad de integrar estas funcionalidades en una aplicación.
Takeaways
- 📷 Aprender a utilizar la cámara del dispositivo para tomar fotos y guardarlas en la librería.
- 🖼️ Introducir una ImageView para visualizar la foto, y anclarla en la pantalla de manera específica.
- 🔽 Crear un botón para activar la cámara y otro para abrir la librería de fotos.
- 🎨 Configurar las opciones de presentación de la imagen para evitar deformación o espacios en blanco.
- 🔗 Asignar outlets y acciones a los botones para manejar la toma y selección de fotos.
- 📱 Verificar la disponibilidad de la cámara antes de intentar utilizarla.
- 👀 Seleccionar la cámara trasera para la toma de fotos.
- 📸 Configurar el ImagePicker para permitir la edición de la imagen y definir la fuente de las imágenes.
- 🔑 Implementar delegados para manejar la información de la foto seleccionada.
- 📚 Guardar la foto tomada en la librería y evitar duplicar imágenes al seleccionarlas de la librería.
Q & A
¿Qué se va a aprender en este capítulo del tutorial?
-En este capítulo se va a aprender a usar la cámara del dispositivo para hacer fotos, guardarlas en la librería y seleccionar fotos de esa librería.
¿Qué elementos se introducen en la interfaz para trabajar con la cámara y la librería de fotos?
-Se introduce una imagen view para ver la foto, un botón para activar la cámara y otro para abrir la librería de fotos.
¿Cuál es la opción de ImageView que intenta rellenar todo el espacio sin deformar ni dejar espacios por dentro?
-La opción es 'aspect fill', que intenta rellenar todo el espacio sin que la foto sobresalga ni queden espacios por dentro.
¿Qué opción de ImageView se utiliza para que la imagen no se deforme ni desborde, manteniendo su relación de aspecto original?
-Se utiliza la opción 'aspect fit' para que la imagen se ajuste al espacio sin deformarse ni desbordarse, manteniendo su relación de aspecto.
¿Cómo se llama la clase que se usa para manejar la vista de la cámara o la librería de fotos?
-La clase se llama 'ImagePicker' y se utiliza para manejar la vista de la cámara o la librería de fotos.
¿Es necesario verificar si hay una cámara disponible antes de usarla en la aplicación?
-Sí, es necesario verificar si hay una cámara disponible para evitar excepciones y el cierre de la aplicación.
¿Cómo se verifica si la cámara de detrás está disponible para su uso en la aplicación?
-Se utiliza el método 'availableCameras' de 'ImagePickerController' para verificar si la cámara de detrás está disponible.
¿Qué método de 'ImagePickerController' se usa para presentar la cámara o la librería de fotos al usuario?
-El método 'present' se usa para mostrar la cámara o la librería de fotos al usuario.
¿Qué delegado se establece para manejar la imagen seleccionada por el usuario?
-Se establece un delegado llamado 'imagePickerController:didFinishPickingMediaWithInfo:' para manejar la imagen seleccionada.
¿Cómo se evita que se dupliquen las fotos en la librería al seleccionar una desde ella?
-Se verifica si el 'imagePickerController' es igual a 'UIImagePickerController' antes de guardar la foto para evitar duplicar las fotos en la librería.
¿Cómo se asegura de que la vista con la cámara desaparezca correctamente después de tomar una foto?
-Se utiliza el método 'dismiss' con el parámetro 'animated' establecido en 'true' para que la vista desaparezca de manera animada.
¿Qué se debe hacer con la vista presentada después de tomar una foto para que no se guarde de manera duplicada en la librería?
-Se debe llamar al método 'dismiss' para que la vista se cierre y se evite la duplicación de la foto en la librería.
Outlines
📷 Configuración de la cámara y librería de fotos
En este primer párrafo se describe cómo configurar una aplicación para utilizar la cámara del dispositivo y guardar las fotos en la librería. Se introduce un ImageView para mostrar la foto y se sugiere colocar un botón en la pantalla para activar la cámara y otro para abrir la librería de fotos. Se discuten diferentes opciones de ajuste de la imagen para evitar deformaciones o espacios en blanco, y se menciona el uso de 'aspect fit' para que la imagen se ajuste correctamente sin deformarse ni desbordarse. Finalmente, se habla sobre la necesidad de declarar un picker para manejar la vista de la cámara o la librería y se sugiere verificar la disponibilidad de la cámara antes de proceder.
📱 Selección de la cámara y configuración del selector de imágenes
Este párrafo se enfoca en la selección de la cámara de detrás del dispositivo para capturar imágenes y en la configuración del image picker para permitir la edición de la imagen después de ser seleccionada. Se detalla cómo utilizar el image picker controller y cómo establecer opciones para capturar solo fotos, en lugar de videos. También se menciona la importancia de presentar el picker de manera adecuada y de manejar la animación al salir de la vista. Se destaca la necesidad de implementar delegados para controlar el flujo de información una vez que la imagen es tomada o seleccionada.
🖼️ Gestión de imágenes seleccionadas y su asignación a la vista
En el tercer párrafo, se explica cómo manejar la imagen seleccionada por el usuario, ya sea de la cámara o de la librería. Se discute la implementación de un delegado que recibirá la información de la imagen seleccionada y cómo convertirla en un objeto de tipo UIImage para su uso posterior. Se menciona la necesidad de guardar la imagen en la librería y cómo evitar la duplicación de fotos al seleccionar una desde la librería. Se destaca la importancia de comprobar que el picker no es nulo antes de asignar la imagen a la vista y de manejar correctamente la transición de la vista después de tomar o seleccionar una foto.
🎉 Prueba de la aplicación y revisión de funcionalidades
El último párrafo resume el proceso de prueba de la aplicación en un dispositivo móvil real, en lugar de un simulador. Se muestra cómo tomar una foto con la cámara y cómo seleccionar una imagen de la librería, asegurándose de que ambas acciones funcionen correctamente y que las imágenes se guarden en la librería sin duplicarse. Se menciona la posibilidad de recibir alertas si no hay cámara o cámara trasera disponible y se sugiere cómo manejar estas situaciones. El párrafo concluye con un mensaje de esperanza de que la información haya sido útil y un saludo para el próximo capítulo.
Mindmap
Keywords
💡Cámara
💡Librería
💡ImageView
💡Botón
💡Aspect Fit
💡ImagePicker
💡Delegados
💡Outlets
💡Acciones
💡Capturar
💡Simulador
Highlights
Introducción de una ImageView para visualizar la foto.
Uso de un botón para activar la cámara y otro para abrir la librería de fotos.
Ajuste de la vista para mostrar la imagen sin deformar ni dejar espacios por dentro.
Selección de la opción 'aspect fit' para adaptar la imagen a la pantalla sin deformación.
Asignación de outlets y acciones a los tres botones para controlar la cámara y la librería.
Declaración de una clase para manejar la vista de la cámara o la librería.
Verificación de la disponibilidad de la cámara antes de su uso.
Selección de la cámara trasera para capturar imágenes.
Configuración del ImagePicker para permitir la edición de la imagen y especificar la fuente de la imagen.
Presentación del ImagePicker con opciones de animación y control de la selección de imágenes.
Implementación de delegados para controlar la selección de imágenes y su manejo posterior.
Uso del método 'imagePickerController' para recibir la información de la imagen seleccionada.
Asignación de la imagen seleccionada a una variable y su uso en la aplicación.
Guardado de la imagen en la librería del dispositivo y su visualización en la pantalla.
Eliminación manual de la vista del ImagePicker para evitar duplicación de imágenes.
Selección de imágenes de la librería y su asignación a una vista sin duplicar en el álbum.
Verificación de la disponibilidad de la cámara frontal y su uso en caso de no disponibilidad de la trasera.
Conclusión del proceso de captura y selección de imágenes para su uso en la aplicación.
Transcripts
bienvenidos a este capítulo donde vamos
a aprender a usar la cámara de nuestro
dispositivo hacer fotos guardar en la
librería y seleccionar fotos de esa
librería para empezar vamos a introducir
una imagen view donde veremos nuestra
foto
anclarla arriba izquierda derecha y creo
que en una altura fija
colocaremos
un botón
un botón para activar la cámara
vamos a ponerle de nombre de título de
hacer fotos por ejemplo
y otro para abrir la librería
vamos a darlo para que se vea todo bien
una última cosa antes de pasar al código
es que
este y match view tiene unas opciones
para mostrar la imagen que nosotros le
asignamos
por definitivamente tiene la opción es
que el púgil decir va a intentar
rellenar todo el espacio con la foto sin
que sobresalga nada y sin que queden
espacios por dentro por lo tanto si
nuestra imagen es alargada cómo va a ser
cuando hagamos la foto ya que nuestra
pantalla de móvil es alargada lo que
pasará es que la de formar a comprimir a
la altura y no se verá la imagen
correctamente
otra opción que
aspect field que es similar
es decir intentar rellenar toda la
imesevi sólo que no deforma nuestra foto
por lo tanto si nuestra imagen es
alargada imaginaros que era imágenes
como la batalla de móvil que es así
esta esta esta opción lo que va a hacer
es rellenar toda la imagen es decir va a
cubrir desde la parte derecha hasta la
parte izquierda y cómo no va a deformar
el aspecto ratio lo que va a hacer es
sobrepasar
es decir desbordar por arriba y por
abajo lo que vamos a utilizar nosotros
hay muchas más
estas son las tres más importantes vamos
a utilizar aspect fit que lo que hace es
no de forma del asper gratis
y hacer que la imagen entre dentro de
nuestra inversión es decir que entre
toda la imagen y si nuestra imagen es
agrada pues lo que era es llegar hasta
aquí arriba hasta aquí abajo y quedarse
más o menos pues a esta altura
para que la foto ni se deforma ni
desborde
vamos a asignar los outlets y la acción
para estas dos
para estos tres botones
tenemos recibido control de aquí
con el botón derecho
outlet
le damos el nombre de imagen por ejemplo
vamos a asignarle
la acción a hacer fotos
gestión
hacer foto activo
las fotos lo mismo
ya tenemos el lunes que nos hace falta
para asignarle la imagen a este y
matthew y las dos acciones de los dos
botones vamos a cerrar de esta pantalla
a ver sólo una pantalla en la del
controlador
y vamos a empezar
declarando nuestro primer pique
y no es más que una clase que va a
manejar
esa vista dónde sale la cámara o bien la
librería
y que controle
ya tenemos nuestro image piquer
vamos a decirle es que nos muestre la
cámara cuando hacemos clic en hacer
fotos
lo primero que tenemos que saber es si
hay una cámara disponible porque si no
hay un arma disponible la pedimos
seguramente
nos lanzará una excepción y la
aplicación
y se cerrará
si no es así
controller
available si hay disponible una cámara
entonces pasamos al siguiente paso y
también hay que ver que esa cámara ya es
la de detrás por ejemplo porque nosotros
queremos que
queremos utilizar la cámara de detrás
así que lo mismo
utilizamos la imatge speaker controller
y el método
a la vuelta
pero qué bien
available capturen goles
y ponemos si le damos al punto no salen
las opciones que tiene este no
así que podemos utilizar la de atrás la
flor
vamos a utilizar la de atrás en este
caso
que esto no se anule que haya algo donde
haya una cámara de atrás
ahora así que vamos a pasar a nuestro
image picker qué es lo que hemos
declarado arriba y vamos a aceptar
algunas opciones por ejemplo que permita
la edición de la imagen una vez es la
seleccionamos todo esto va a ser en la
vista que nos proporciona ese está
operativo quiero decir que no que no me
permita editarla
hay que decirle qué tipo de
de fuente de dónde va a venir la foto
desde la cámara aquí después vamos a ver
si bien es de la cámara de la foto libre
fotos librería
y ya que viene de la cámara vamos a
decirle qué tipo de
captura vamos a hacer si va a ser una
foto o un vídeo etcétera de momento sólo
vamos a ver la foto
una vez tenemos el imac speaker
configurado tenemos que presentarlo
en sus tres esto cambia un poco nos
presenta y controles en inglés presenta
a secas pero va bien es lo mismo donde
necesitas el biocontrol de que quiere
presentar que es nuestra y me explique
si va a estar animado le decimos que sí
y complete como no queremos nada cuando
esto acabe cuando esta acción acabe le
vamos a pasar a nil
y con este método veríamos ya
en nuestra cámara de fotos salir
como esto no se puede simular con el
simulador lo que vamos a hacer es
lanzarlo a mi móvil
y con el quick time estoy mostrando la
pantalla de mi móvil así que lo podemos
ver
tenemos aquí
hago clic en hacer fotos y salen la
cámara
ahora lo que necesitamos es qué va a
pasar con esa foto que hagamos es decir
como veis aquí podemos dejar hacer la
foto
sólo que
cuando le doy a usar fotos pues no le
hemos dicho que hacer con esa foto
qué va a hacer con esa foto pues va a
llamar a un método pasándole esa foto
para que nosotros la utilizamos donde
queramos pero no hemos dicho dónde se
hace método así que ahora aquí en mi
caso para empezar hay que usar delegados
peek
controlar el gheit
esto es solo una serie de métodos
que se van a llamar que nos van a ayudar
y hacer cosas de este tipo pero hay que
indicarle a ella que está que este
inmenso piquer
va a responder
a ese delegado
porque a lo mejor tenemos varios varios
elementos iguales y sólo queremos que
sea uno el que responda a esos métodos
por tanto una vez que ya hemos
declarados los delegados cuando
escribamos una nueva función ya no
saldrán esos métodos que hay ahí dentro
y que vamos a hacer nosotros es image
controles
es un método que ya ha definido
apple donde nos van a pasar
él piquer
y la info de lo que hemos seleccionado
ahí dentro estará la foto etcétera así
que lo que vamos a hacer es
declarar
nuestra imagen
selecciona deba ser igual
con bases del tipo de imágenes
y va a ser igual
dentro de info tenemos
la imagen que hemos seleccionado
que hay que hacer un
h
y en el caso de que nos venga la imagen
en s
en este objeto
que en este caso es un diccionario hemos
hecho el cast porque es de tipo news y
lo que nos llega y necesitamos
y saber qué clase es específicamente y
una vez tenemos la imagen que es de tipo
wiki y match ya podemos asignar la a
nuestra imagen
la imagen tiene una propiedad que es
vice
y la ley
asignamos la imagen seleccionada
además yo cuando hago la fotografía
quiero que
la parte en la librería
usando este método
y más
fotos algo donde hay que pasar de la
imagen
seleccionada
ningún completo
ningún selector porque nos hace falta
un context info
con esto ya podemos hacer fotos nos la
coloca en nuestra web y además la guarda
en la librería
vamos a ver esto en el simulador
te voy a hacer fotos
a una foto y la uso
no me está funcionando algo me ha dejado
ha dejado algo importante y es que esa
vista que hemos presentado aquí arriba
tenemos que quitarla nosotros mismos lo
tanto
cogemos el speaker y
llamamos a método disney o al animado
y no queremos ninguna cosa que pase algo
cuando cuando acaba de irse esa vista
pues podéis ponerlo aquí como complete
supongo que se habrá guardado
la de antes
hacer fotos
una foto y la usamos entonces baja la
imagen estamos usando la
la foto que la hemos colocado donde
queríamos
si veis
y sobran
sobre espacio a los lados porque lo que
está haciendo es meter la imagen sin
deformar la y que se muestre toda la
imagen como hemos seleccionado antes
la imagen se ve correcto bien porque
vamos a hacer ahora es mostrar
o sea seleccionar una imagen de
de la álbum como hemos visto aquí todo
depende de donde quieras utilizar
el color es bajo
lo que hemos hecho aquí es decirle vale
va a venir de la cámara por lo tanto si
yo copio esto de aquí
no serviría sólo que tengo que cambiar
desde la cámara
viene desde la foto libre lo que tenemos
bueno
no queremos editarlo
esto de aquí ya no viene a cuento
gobierno es tiene que ver con la cámara
y aquí igual
no hay cámara trasera porque estamos
seleccionando desde la librería
y en vez de camera quiero saber si photo
librería está disponible por lo que
pueda pasar
esto
y ya está
pero hay un detalle más y es
cuando seleccionamos una imagen de la
librería también va a llamar a este
método cuando nosotros digamos que
queremos usar esa imagen por lo tanto va
a venir aquí va a seleccionar va a
la imagen se la va asignar a nuestra
vista y la va a volver a guardar por
tanto se va a duplicar y no queremos que
eso pase así que cuando llegue aquí
tiene que ver que el image piquer
soul cetaip es igual a cábala
para que la guarde así cuando
seleccionemos una imagen de la librería
esto no pasará y no nos duplicará las
fotos en nuestro álbum cada vez que
seleccionemos una vamos a ver
el resultado final
las fotos tenemos aquí en nuestra
librería
y se le asigna a
una diferente para que se vea
correctamente
todo correcto como veis aquí no lo
explicado pero es obvio que si no hay
una si por ejemplo aquí si no hay cámara
disponible pues en este else
podéis mandar una alerta de
nos cámaras igual que aquí si no hay
cámara trasera un problema
igual que la trasera se pueden usar la
frontal no está bien explicado
eso es todo ya podemos hacer fotos
seleccionarlas de libería y guardarlas
en nuestra foto libre espero que os haya
sido útil y nos vemos en el próximo
capítulo
Browse More Related Video
![](https://i.ytimg.com/vi/_yPCU8Lbslk/hq720.jpg)
Curso de Android con Java: Tomar foto mediante Intent - guardar en la memoria interna su miniatura
![](https://i.ytimg.com/vi/31BxVr6neeg/hq720.jpg)
✅ Aplicación Web Encuesta y mostrar resultados en Grafico con Chart JS HTML CSS JavaScript
![](https://i.ytimg.com/vi/UjZ-6OQKmOs/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCMqD9otyoRus-NYupt1Lwl4nwNlg)
Curso JavaScript desde 0: Gráficos (Plotly JS) - 114
![](https://i.ytimg.com/vi/ufb9HFykQZk/hq720.jpg)
DESCUBRE los SECRETOS de los MODOS de MEDICION de la LUZ
![](https://i.ytimg.com/vi/-05CKVF9uyc/hq720.jpg)
30. Rutas dinámicas con vue-router y useRoute | AbiDev
![](https://i.ytimg.com/vi/A-iKX8Shge4/hq720.jpg)
Framework vs Librería - La mejor explicación en español
5.0 / 5 (0 votes)