¿Qué encontrarás en este post?

Letterbox & AutoLayout

El próximo 28 de Septiembre se pondrá a la venta en España el iPhone 5. Como sabéis, el iPhone 5 aumenta su pantalla hasta las 4 pulgadas con una resolución de 640×1136 pixeles. con lo cual habrá que adaptar nuestras apps a estas dimensiones, letterbox y layout se presentan como buenas alternativas para solucionar este problemilla. En esta nota te explicamos como adaptar tu App al iPhone 5 usando Letterbox y AutoLayout.

Letterbox en iPhone 5

Para los desarrolladores, esto implica optimizar sus aplicaciones a la nueva resolución. Las aplicaciones que no estén optimizadas se mostrarán en modo Letterbox, es decir, centradas en pantalla añadiendo barras negras en la parte superior e inferior.

Para las aplicaciones con interfaces complejas (e.g. skeumorfismo) y los videojuegos, adaptarse a la nueva pantalla supondrá, en muchos casos, un re-diseño completo.

La solución para las nuevas proporciones del iPhone 5

Pero si vuestra aplicación utiliza el UIKit y tiene una interfaz relativamente sencilla, adaptarla a la nueva pantalla es una tarea fácil. Para que os hagáis una idea, optimizar PopCha! para la nueva pantalla tan sólo me llevó 15 minutos. En este artículo os voy a contar como hacerlo.

Requisitos

No vayáis corriendo a reservar un iPhone 5, probablemente ya están agotados y no lo necesitáis. Además, se trata de tener lista la aplicación antes del lanzamiento. Es suficiente con instalar Xcode 4.5 y utilizar el simulador.

Manos a la obra

Vamos a utilizar una de las aplicaciones de ejemplo del SDK de iOS —CoreDataBooks— para ilustrar el proceso. Podemos descargarla aquí. Antes de ejecutar la aplicación, nos aseguramos de seleccionar el dispositivo correcto en el simulador —iPhone (Retina 4-inch)— y el esquema adecuado en Xcode —iPhone 6.0 Simulator—.

Si ejecutamos la aplicación, podemos comprobar el comportamiento por defecto del iPhone 5 con las aplicaciones no optimizadas para su pantalla.

La aplicación CoreDataBooks ejecutándose en modo Letterbox

De vuelta al Xcode, lo primero que nos ha de llamar la atención es el siguiente warning:

Missing “[email protected]” launch image.

Con este mensaje, Xcode nos está indicando que falta la imagen de lanzamiento para la pantalla de 4 pulgadas. Si el sistema no encuentra esta imagen en el bundle de la aplicación, la ejecutará en modo Letterbox. Si por el contrario, esta imagen existe, el sistema ejecutará la aplicación concediéndola todo el espacio de pantalla disponible. Es importante que la imagen tenga el nombre indicado y una resolución de 640×1136 pixeles.

Generamos una imagen de lanzamiento

Si pulsamos con el ratón sobre el warning, Xcode nos ofrecerá la posibilidad de generar la imagen de lanzamiento para nosotros. No esperéis un diseño super-chulo, Xcode genera una imagen con el fondo negro de 640×1136 pixeles. Esto es suficiente para nuestro ejemplo, pero para una aplicación en producción debemos hacerlo nosotros o pedírselo a un diseñador.

Letterbox & AutoLayout — Xcode nos avisa si no encuentra una imagen de lanzamiento para la pantalla de 4 pulgadas

Si volvemos a ejecutar la aplicación después de haber generado la imagen de lanzamiento, comprobaremos que el sistema ya no la ejecuta en modo Letterbox. Además, todo parece en orden, ya que casi todas las pantallas están basadas en UITableViewController.

Pero realmente no todo está en orden. Si navegamos al detalle de un libro y editamos cualquiera de sus campos comprobaremos que hay algunos elementos que no se encuentran en la posición correcta.

Algunos problemas tras haber añadido la imagen de lanzamiento

¡Auto-Layout al rescate!

En concreto, el campo de texto y el selector de fecha deberían de haber quedado alineados a la parte superior de la pantalla. Como podemos ver en la imagen, ambos controles se desplazan hacia abajo cuando utilizamos la nueva resolución. El motivo es que las propiedades de Autosizing de ambos controles están configuradas para alinearlos a la parte inferior de la pantalla. Afortunadamente este problema es muy fácil de arreglar. Tenemos que abrir el Storyboard, seleccionar “Editing View Controller” y modificar las propiedades de Autosizing de “Picker” y “Text Field” como se indica en la imagen. Con esta modificación conseguiremos que siempre queden alineados con la parte superior de la pantalla.

Las propiedades de Autosizing antes y después

Tras efectuar los cambios volvemos a ejecutar la aplicación para comprobar que hemos conseguido el efecto deseado.

Conclusión

Adaptar una aplicación a la nueva pantalla de 4 pulgadas puede ser cuestión de minutos o de días, dependiendo de la complejidad de la interfaz de usuario y de como esté diseñada la interacción. Por suerte, Apple es consciente de ello y está empezando a ofrecer herramientas como Cocoa Auto Layout —incluido en el SDK de iOS 6— para ayudar a los desarrolladores a realizar interfaces de usuario adaptables a diversos tamaños de pantalla y orientaciones. Espero haber arrojado algo de luz sobre este tema a los que estáis empezando a desarrollar para iOS.

El Autor: Guillermo González Real

Artesano del software, amante de los cómics y aficionado al cine. Líder de desarrollo móvil para PopCha!

@gonzalezreal