martes, 14 de agosto de 2012

Imágenes "retina" en iPhone y iPad

En los últimos modelos de iPhone (4 y 4s) y iPad (tercera generación), la pantalla tiene una característica que Apple llamó "retina display".

Básicamente lo que tienen las pantallas "retina" son muchos más pixeles en la misma superficie. En el caso del iPhone, la pantalla pasa de ser de 320x480 a ser de 640x960 en el mismo espacio. Para el iPad, pasa de ser de 768x1024 a 1536x2048.

Sin embargo a pesar de tener más resolución, no cambia el tamaño de la pantalla en dips, que sigue siendo de 320x480 y 768x1024 para iPhone y iPad respectivamente. Esto explica por que en GeneXus usamos dips (device independent pixels) en lugar de pixeles...

Las imágenes que están pensadas para las pantallas de los dispositivos anteriores, se ven borrosas en pantallas "retina". A su vez, si se usan imágenes más grandes, van a ocupar más espacio que el deseado.

La solución para resolver este problema es contar con dos juegos de imágenes. El primer juego para las pantallas "comunes", y el segundo con más resolución para pantallas "retina". La forma de indicar que es la misma imagen pero con más resolución, es agregándole el sufijo "_2x" al nombre.

Por ejemplo, supongamos que tenemos una imagen en la KB de nombre "customImage", de 40x40 pixeles, que vamos a mostrar en pantalla en un campo que ocupa 40x40dips.

Para tener la misma imagen en formato "retina", debemos tener otra imagen en la KB de nombre "customImage_2x", de 80x80 pixeles, que es la que se va a mostrar en los dispositivos con pantalla "retina" en una superficie de 40x40 dips, pero con la cantidad de pixeles adecuada para dichos dispositivos.

Luego en el layout de nuestros objetos usamos simplemente "customImage", y es la aplicación la que resuelve que imagen usar en cada dispositivo.

2 comentarios:

  1. Hola Marcos, una consulta, si las imagenes vienen de la BD por ejemplo la foto de un cliente en un listado de clientes, hay alguna alternativa?

    Saludos

    ResponderEliminar
    Respuestas
    1. No, esto es solo para recursos de la aplicación, no para imágenes que sean datos.

      Igual, en el caso que sea un dato, lo que vas a hacer es traer una imagen que en general va a ser más grande, y se va a escalar para que entre en los dips que ocupa el control. Por lo tanto, debería quedar bien en ambos tipos de dispositivo.

      Si la imagen tiene el tamaño justo para minimizar el consumo de ancho de banda, entonces lo más recomendable es que sea del tamaño para dispositivos "retina".

      Eliminar