Programación rápida 101: mejore sus aplicaciones con pantallas externas

¿Cómo le gustaría ampliar exponencialmente el área de superficie de la interfaz de usuario de su aplicación? ¿Cómo reaccionarían sus usuarios si agregara varios dispositivos de visualización a su aplicación, cada uno con contenido diferente? Todo esto es posible mediante el uso de una función de iOS que muchos desarrolladores desconocen: pantallas externas.

En esta publicación, le mostraré cómo usar Swift junto con Xcode para generar una salida de pantalla externa que mejore la experiencia del usuario. No estoy hablando de simplemente reflejar la pantalla de iOS, sino de mostrar contenido diferente que aumenta lo que se muestra en su dispositivo iOS. Esta es una característica extremadamente útil para todas las categorías de aplicaciones, incluidas las aplicaciones comerciales y los juegos (imagine un monitor externo que muestre una imagen más grande de la ubicación de un avatar en un mundo mientras el dispositivo iOS muestra detalles de primer plano).

Para seguir con esta publicación, descargue el ExternalScreenDemo aplicación de muestra de este enlace.

iOS y pantallas externas

Apple proporciona una variedad de adaptadores para conectar un dispositivo iOS a un televisor, proyecto o pantalla externos. Puede obtener más información sobre estos adaptadores en este enlace.

De forma predeterminada, las aplicaciones simplemente reflejan su salida en una pantalla externa. Se necesita una aplicación especialmente diseñada para mostrar otro contenido en un monitor externo. ¡Ahí es donde entra usted, el desarrollador de la aplicación!

Ejecución de la aplicación de muestra

Tomemos el ExternalScreenDemo aplicación de muestra para una ejecución de prueba.

1. Abre el ExternalScreenDemo proyecto en Xcode.

2. En el control Scheme ubicado en la esquina superior izquierda de la ventana de Xcode, seleccione uno de los simuladores de iPhone (la aplicación también funciona en los simuladores de iPad, pero le deja menos espacio en su pantalla para ver la salida de pantalla externa).

3. Haga clic en Xcode Correr botón.

4. Cuando la aplicación aparece por primera vez en el Simulador, muestra un mapa y solicita permiso para acceder a su ubicación mientras usa la aplicación (Figura 1). Dado que se trata de un simulador, y no de un dispositivo iOS real, en realidad no está dando permiso para que la aplicación acceda a su ubicación física. De forma predeterminada, el simulador utiliza la sede de Apple en 1 Infinite Loop, Cupertino, CA como su ubicación.

Figura 1: la aplicación de muestra solicita acceder a su ubicación.

5. Hacer clic Permitir. Al hacer esto, el mapa se acerca a la sede de Apple (Figura 2).

Figura 2: el mapa está ampliado.

6. Eso es todo. Una aplicación muy sencilla. Ahora regrese a Xcode y haga clic en el Detener botón.

Adición de soporte de video externo a la aplicación de muestra

Ahora está listo para agregar soporte para video externo a la aplicación de muestra.

1. En el Navegador de proyectos, seleccione el ViewController.swift archivo de código.

2. Agregue las siguientes dos propiedades al principio del archivo de código.

3. Para evitarle la molestia de escribir muchas líneas de código, agregué código que se ha comentado en el proyecto de muestra. Descomentemos el código de vez en cuando y luego lo veremos más de cerca. Primero, seleccione el siguiente código en el viewDidLoad método haciendo clic y arrastrando desde la primera línea comentada hasta la última línea comentada:

4. Con el código resaltado, presione Comando + / para descomentar este bloque de código. Tenga en cuenta que verá algunos errores del compilador a lo largo del camino hasta que termine de descomentar todos los bloques de código.

5. A continuación, resalte la última línea de código en el mapView: didUpdateUserLocation: método y luego presione Comando + / para descomentarlo:

6. Finalmente, resalte los siguientes dos métodos y luego presione Comando + / para descomentarlos:

En este punto, debería poder construir el proyecto sin errores.

7. Haga clic en Xcode Correr botón. Cuando la aplicación aparece en el Simulador, luce igual que antes. Ahora enciendamos la pantalla externa simulada.

8. Vaya al menú del Simulador y seleccione Hardware> Pantallas externas> 1024 x 768. Esto muestra un gran rectángulo negro.

9. ¿Por qué no ve nada en la pantalla externa? Porque no estaba disponible cuando se lanzó la aplicación por primera vez. Arreglaremos esto en un momento. Por ahora, regrese a Xcode y haga clic en el Detener , luego haga clic en el Correr botón de nuevo. Ahora debería ver una versión ampliada del mapa en la pantalla externa simulada (Figura 2). Para una aplicación de mapas, este es un gran uso de una pantalla externa. El mapa del iPhone se amplía para mostrar los detalles de la calle y el mapa de la pantalla externa se reduce para proporcionar un contexto de la ubicación del usuario.

Figura 2: la pantalla externa muestra una versión reducida de la ubicación del usuario.

Echemos un vistazo al código que hace que esto funcione.

Regrese a Xcode y haga clic en el Detener botón. A continuación, consulte el siguiente código en el viewDidLoad método:

Este código llama al método de pantallas del UIScreen clase que devuelve una matriz de pantallas. Si hay más de una pantalla (recuento de pantallas> 1), indica que hay una pantalla externa disponible. El código luego llama a lo siguiente initializeExternalScreen método, pasando una referencia a la pantalla externa:

Este código crea una nueva ventana del tamaño de la pantalla externa, luego almacena una referencia a la pantalla externa en la ventana pantalla propiedad. A continuación, configura MapView y luego hace que la ventana sea visible llamando a su makeKeyAndVisible método.

La última línea de código llama al AdjustExternalScreenRegion método:

Detección de conexión y desconexión de pantalla externa

Ahora está listo para mejorar el código existente para detectar cuando una pantalla externa está conectada o desconectada. Esto permite detectar y actualizar pantallas externas que están conectadas cuando la aplicación ya se está ejecutando.

1. Agregue las siguientes líneas de código al viewDidLoad método:

Este código se registra con NSNotificationCenter ser notificado de los siguientes eventos:

• UIScreenDidConnectNotification – Indica que se ha conectado una pantalla externa
• UIScreenDidDisconnectNotificiation – Indica que se ha desconectado una pantalla externa

Observe los argumentos del selector pasados ​​al addObserver método de NSNotificationCenter son cadenas:

• “handleScreenDidConnectNotification:”
• “handleScreenDidDisconnectNotification:”

Estos argumentos dicen NSNotificationCenter para llamar a estos métodos cuando una pantalla externa está conectada / desconectada. En Swift, puede pasar un literal de cadena dondequiera que una API de Cocoa Touch espere recibir un selector, y la cadena se convierte automáticamente en un selector para usted.

2. Ahora agreguemos estos dos métodos antes de la llave de cierre del controlador de vista:

El primer método llama initializeExternalScreen cuando se conecta una nueva pantalla externa. El segundo método oculta la pantalla externa y la establece en cero cuando se desconecta.

¡Hagamos un intento! Deshabilitaremos la pantalla externa, ejecutaremos la aplicación y luego encenderemos la pantalla externa para asegurarnos de que nuestro código de notificación funcione correctamente.

3. Prensa Comando + Tabulador para volver al Simulador.

4. En el menú Simulador, seleccione Hardware> Pantallas externas> Deshabilitado. Esto cierra la ventana de visualización externa simulada.

5. Regrese a Xcode y haga clic en el Correr para iniciar la aplicación en el simulador de iPhone.

6. En el menú Simulador, seleccione Hardware> Pantallas externas> 1024 x 768. Esto dispara la notificación de conexión, que ejecuta el handleScreenDidConnectNotification método y muestra el mapa en la pantalla externa!

7. Intente conectar y volver a conectar la pantalla externa para comprobar que las notificaciones funcionan correctamente.

En caso de que algo saliera mal en el camino, puede descargar el proyecto completo en este enlace.

Conclusión

Si está interesado en que su aplicación se destaque, las funciones como la pantalla externa pueden ser un verdadero impulso. Como puede ver, Cocoa Touch Framework facilita la mejora de sus aplicaciones utilizando esta gran función con poco esfuerzo y grandes recompensas.

Publicaciones relacionadas:

Cómo recuperar el ícono de la bandera en Mail en iPhone YoWindow: ¡la nueva aplicación para iOS te permite ver el clima en un paisaje vivo! App sábado: Venmo Secretos de Facebook Messenger: Cómo verificar sus 2 bandejas de entrada ocultas en iPhone La forma más rápida de recortar imágenes en el iPhone Cómo establecer una ubicación predeterminada en la aplicación meteorológica y el widget meteorológico de iPhone Cómo cambiar el volumen de la alarma en su iPhone Consejo del día: cómo agregar estaciones de música navideña en iTunes Radio 4 formas de sacar a sus hijos de sus iPhones este verano Cómo informar y bloquear mensajes de texto no deseados en iPhone Infinity Blade Chronicles: La película Cómo examinar sus documentos de iCloud Drive en la aplicación Archivos