Acceso a Imágenes de Galería con Fotos UI en iOS 16
Clase 16 de 31 • Curso de Integración Nativa iOS
Resumen
¿Cómo acceder a las imágenes desde la galería en iOS 16?
Desde la llegada de iOS 16, Apple introdujo el framework Photos UI, el cual representa una herramienta moderna y flexible para interactuar con los elementos de la galería de un dispositivo. Este enfoque es notablemente más poderoso y fácil de usar que el antiguo UIImagePickerController. Así es como puedes aprovechar este recurso para obtener y manipular imágenes desde la galería del dispositivo.
¿Qué preparación inicial se requiere?
Para comenzar a trabajar con Photos UI, es esencial realizar algunas configuraciones iniciales en tu proyecto. A continuación te indicamos los pasos para preparar el entorno de tu aplicación:
- Importar el framework: Asegúrate de incluir Photos UI al inicio de tu estructura de archivos en el proyecto.
- Definir Variables:
- Crea una variable privada de estado
selectedPhotos
, que será un vector de elementos del tipoPhotosPickerItem
, para almacenar los elementos seleccionados de la galería. - Genera otra variable para mantener la lista de imágenes cargadas de la galería como objetos de tipo
UIImage
. - Establece una variable para mensajes de error globales, que será de tipo
String
.
- Crea una variable privada de estado
¿Cómo implementar la interfaz de usuario con el botón de selección de imágenes?
Una vez configurado el entorno, es momento de actualizar el diseño de la interfaz para interactuar con la galería de imágenes:
- Configurar el diseño UI: Utiliza un VStack para organizar elementos en la pantalla.
- Crear el botón de selección:
- Diseña un botón de texto que simbolice una acción de clic para abrir la galería.
- Usa la variable
photoPickerSection
para integrar la vista del botón.
- Modificar el botón:
- Implementa
PhotosPicker
y define los parámetros, entre ellos, dónde se almacenará el resultado (enselectedPhotos
) y el número máximo de imágenes que se pueden seleccionar. Por ejemplo, establece un límite de tres imágenes a través del parámetromaxSelectionCount
.
- Implementa
¿Cómo cargar y mostrar las imágenes seleccionadas?
Para completar el proceso, implementa funciones que manejarán la carga y visualización de las imágenes seleccionadas:
-
Función de cambio (onChange):
- Añade la lógica para actualizar la vista cuando haya cambios en la selección de imágenes. Utiliza
onChange
para reaccionar a cualquier ajuste en la selección.
- Añade la lógica para actualizar la vista cuando haya cambios en la selección de imágenes. Utiliza
-
Cargar las imágenes seleccionadas:
- Implementa
loadSelectedPhotos
para gestionar la carga de imágenes:private func loadSelectedPhotos() { // Limpia las colecciones antes de cargarlas nuevamente selectedPhotos.removeAll() images.removeAll() // Reinicia el mensaje de error errorMessage = "" // Cargar las fotos seleccionadas de manera asíncrona Task { await withTaskGroup(of: UIImage?.self) { taskGroup in for photoItem in selectedPhotos { taskGroup.addTask { return await self.loadPhoto(photoItem) } } for await result in taskGroup { if let uiImage = result { self.images.append(uiImage) } else { self.errorMessage = "Falló en obtener una o más imágenes." break } } } } }
- Implementa
-
Verificar la selección:
- Muestra las imágenes usando un
ForEach
para iterar la colección de imágenes en la interfaz, asegurándote de que reaccione dinámicamente a los errores o cambios.
- Muestra las imágenes usando un
Photos UI no solo simplifica la interacción con la galería, sino que garantiza una experiencia de usuario más fluida. Tal como se muestra, el número de imágenes seleccionables se puede ajustar, permitiéndote personalizar fácilmente cómo se integran las imágenes en tus aplicaciones. La adaptación de esta herramienta es especialmente útil para implementar funciones como cambiar fotos de perfil o cargar imágenes para reportes. ¡Anímate a explorar nuevas funcionalidades y a seguir ampliando tus conocimientos!