La presentación de los nuevos dispositivos de Apple en este verano del 2017, en especial el Iphone X, movió como cada año al mundo de la tecnología. Y es que importa poco si eres o no seguidor de la marca de la manzana, todos los movimientos y novedades que la involucren generan un gran impacto.
Haciendo un rápido repaso sobre las novedades presentadas podemos notar el porqué se pone en boca de todos:

  • Super Retina Display OLED que abarca las 5.8 pulgadas de “toda la pantalla” (+95%) con un diseño de puntas redondeadas.
  • Reconocimiento de rostro Face ID para autenticación.
  • Una cámara mejorada TrueDepth de 12 MP que trabaja con ARKit, la cual incluye filtro de color y opción de telefoto con OIS.
  • Nuevo Chip A11 Bionic, el cual promete hasta un 70% de mayor velocidad que su predecesor. Está diseñado para trabajar con CoreML y Metal 2.
  • Carcasa de cristal, carga inalámbrica, resistencia a polvo y agua, actualización de gestos…

La lista sigue… pero no es el motivo de este post. Cómo desarrollador de aplicaciones móviles lo que realmente me alarmó es imaginarme cuántos cambios tendré que realizar para adaptar mi trabajo a este nuevo dispositivo, por eso me di a la tarea de listar algunas cosas a revisar para que mis aplicaciones corran sin problema en todos los dispositivos de Apple.

XCode y SDK.

Como saben, en un solo IPA es posible darle soporte a todos los dispositivos móviles existentes (iPad y iPhone), esto incluye al nuevo iPhone X. Para ello hay ciertas consideraciones específicas en las que se debe reparar para su correcto funcionamiento.

Lo primero que debemos revisar, y por obvio que parezca, es que estemos utilizando Xcode 9 y el SDK de iOS 11. La nueva versión (aún en versión GM seed) del IDE nos permitirá utilizar el simulador del iPhone X el cual será extremadamente útil para el desarrollo.

Consideraciones Generales

  • Debemos proveer una experiencia fullscreen en toda nuestra aplicación, extendiendo los backgrounds y los layouts scrolleables hasta las orillas de la pantalla.
    Las dimensiones se tocarán más adelante.
  • El contenido debe estar centrado y simétrico para que se pueda desplegar adecuadamente en portrait y landscape tomando en cuenta la forma de la pantalla.
  • La altura de la barra de estado ha aumentado en el iPhone X, por lo tanto no debemos asumir una altura estática o en su defecto hacer distinción entre
    dispositivos.
    También es necesario reconsiderar mostrar la barra de estado si nuestra aplicación la oculta, ya que esta barra ocupa un lugar en pantalla que, siguiendo buenas
    prácticas, no debemos utilizar para nuestro layout.
  • Considerar el nuevo aspect ratio para las imágenes fullscreen. Si queremos compartir assets entre diferentes dimensiones de dispositivos debemos considerar que el
    contenido a mostrar quede centrado para evitar cortes a las imágenes.
  • Evitar agregar gestos de interacción al bottom de la pantalla, ya que en ese lugar se encuentra el home indicator el cual permite, mediante un swipe hacia arriba,
    llegar al home o a la ventana de elección de aplicación en modo multitasking.
  • Es recomendable probar nuestra aplicación tanto en portrait como en landscape, siendo esta última orientación donde podremos notar de mejor forma los elementos
    que no sigan los lineamientos para el iPhoneX. Es importante verificar tanto el giro a la izquierda como a la derecha, considerando que existe un “hueco” donde se
    encuentran los sensores del frente.

Scale Factor

Apple maneja hasta el momento 3 tipos de scale factor para sus assets o imágenes e iconos a utilizarse en las apps. Tomando en cuenta que los dispositivos modernos ya no utilizan la escala inicial, nos queda la siguiente división:

  • /@3x Usada en iPhone X, iPhone 8 Plus, iPhone 7 Plus y iPhone 6s Plus
  • /@2x Utilizada por el resto de los dispositivos de alta resolución.

Dimensiones del iPhone X

Al ocupar la mayor parte del display, las dimensiones del iPhone X también han aumentado, aunque sólo en el alto. Tomando como base un dispositivo de 4.7 pulgadas (iPhone 6, iPhone 7 o iPhone 8) el ancho de 375 puntos de la pantalla es exactamente el mismo para el iPhone X. En cambio el alto de 812 puntos extiende la pantalla aproximadamente un 20% destinando este espacio para contenido.

Dimensiones de la pantalla de iPhoneX

Layout (Safe Area)

Este es uno de los puntos que más dudas me generaba. Como han visto, la pantalla del iPhone X tiene curvas las esquinas además de un “hueco” en el centro de la parte superior (donde se encuentran los sensores). Esto cambia radicalmente la manera en que montamos los componentes de interacción en las aplicaciones: por un lado si los ponemos muy cerca de las esquinas es muy probable que terminen cortados y no luzcan, y por el otro, puede que interfieran con los gestos del sistema (como el swipe hacia arriba para llegar al home) y con el home indicator.

Para evitar lo anterior, se ha creado un elemento específico de desarrollo que nos permite colocar todo nuestro contenido en un “área segura”. Su nombre es Safe Area y es una guía visual que trabaja en conjunto con UIKit y AutoLayout.

Ahora bien, su uso dependerá de la forma en la que tengamos construida nuestra interfaz. Por un lado si nuestra interfaz utiliza elementos nativos de UIKit y Autolayout podremos acceder a ella mediante safeAreaLayoutGuide. En cambio si nuestro layout es customizado, podremos utilizar safeAreaInsets para realizar cálculos manuales.

También es necesario mencionar que se ha añadido un área de margen (accesible mediante el mismo kit) la cual permite mantener una mejor consistencia en las aplicaciones. Su uso no es obligatorio, sin embargo es recomendable utilizarlo.

Tomando como ejemplo la imagen superior, podemos observar que el contenido queda centrado dentro de la safe area, independientemente si se gira a la izquierda o derecha, aún cuando la tabla se extiende hasta las orillas de la pantalla. También notamos el uso de los márgenes que hacen consistente la presentación de la información a lo largo del app. Por último, si comparamos el layout de un iPhone X contra los demás iPhones observamos que en realidad el safe area es justamente el total de la pantalla rectangular.

Face ID

A diferencia de los demás dispositivos de Apple, en el nuevo iPhone X se eliminó el botón de Home, y con ello el TouchID. Para suplirlo se creó un nuevo sistema de autenticación basada en reconocimiento facial.

Este nuevo sistema de reconocimiento estará disponible para su uso en las aplicaciones que utilicen autenticación local, y su implementación será muy similar a la de TouchID. En cualquier escenario nuestras aplicaciones deben estar preparadas para permitir el uso de métodos biométricos así como el uso de textfields para aquellos que los deshabilitan.

Conclusión

Este es un breve punto de partida para tener en consideración las novedades que trae consigo este nuevo dispositivo. Si deseas obtener más información, puedes consultar la página de desarrolladores de apple y revisar las guías de interfaz de usuario así como los recursos de diseño de interfaces.
En un próximo post exploraremos un ejemplo práctico de los elementos que se actualizaron en una aplicación real para que se adaptara a la pantalla del iPhone X (en el simulador).