Dibujado en alta resolución (960 x 640) en la pantalla Retina del iPhone 4
Enviado por nvingenieria el Jue, 26/05/2011 - 11:11.Con la llegada del iPhone 4 y la pantalla retina, la máxima resolución posible en el iPhone pasa a ser de 960 x 640 px, es decir, se duplica la resolución en ambas direcciones, respecto al iPhone 3/3G.
La sorpresa para muchos desarrolladores que se inician en el desarrollo iOS con el iPhone 4, desde el punto de vista del software, todo en el iPhone parece seguir funcionando en 480 x 320 px, es decir, si queremos poner un botón en el centro de la pantalla, deberemos hacerlo centrado en las coordenadas (240, 160), o si queremos trazar una diagonal, dibujaremos una linea entre las coordenadas (0,0) y (480,320).
Entonces, ¿Cómo aprovechar toda la resolución del iPhone4?
Para aprovechar la resolución completa de la pantalla retina hay tres opciones. Las dos primeras, las explicamos a continuación, mientras que la tercerá, algo más avanzada y que se utiliza normalmente únicamente en juegos se explicará en otro artículo (consiste en dibujar directamente mediante las librerías OpenGL).
Aplicaciones estándar
Para las aplicaciones que no utilizan dibujado directo sobre la pantalla (la mayoría, excepto juegos), es decir, aquellas que utilizan los controles disponibles (UIButton, UITextView, etc.) en iOS, lo único que se dibuja en resolución 960x640 px son las imágenes, y el sistema operativo se encarga de ello por completo.
Cualquier posición de botones, textos, listas, etc. se expresa considerando que la pantalla tiene una resolución de 480x320 pixeles, pero para todas las imágenes que se muestran en pantalla (jpg, png, etc.) podremos tener dos versiones, una en baja resolución y otra en alta resolución.
Las dos imágenes tendrán el mismo nombre, pero a la versión del alta resolución se le añade el sufijo @2x, antes de la extensión del archivo. Por ejemplo, si tenemos una imágen llamada paisaje, tendremos dos archivos:
paisaje.png
paisaje@2x.png
Al mostrar la imagen en pantalla, por ejemplo mediante las líneas:
|
UIImage *image = [UIImage imageNamed:@"paisaje.png"]; |
El sistema operativo detectará automáticamente si puede utilizar la imagen en alta resolución: Si el dispositivo donde corre la aplicación es un iPhone 4, utilizará el fichero paisaje@2x.png, mientras que si se trata de un iPhone 3/3G o un iPad, utilizará la versión en baja resolución paisaje.png.
Logicamente, el archivo paisaje@2x.png deberá mostrar tener misma imagen que paisajes.png pero con el doble de resolución tanto horizontal como vertical.
Si uno de los archivos no está disponible, el sistema operativo utilizará el otro y redimensionará la imagen si es necesario.
Dibujado 'manual' en la función drawRect
Si además de utilizar imágenes en alta resolución, necesitamos realizar dibujado 'manual' en pantalla y en alta resolución, el método anterior no nos sirve, ya que todas las coordenadas y dimensiones en pantalla se expresan en baja resolución.
Para dibujar en alta resolución podemos utilizar el siguiente método en la función drawRect.
| // Capa de dibujo hi-res UIImageView *hires; // Iniciamos un nuevo contexto, vacío, para dibujar en él y con la resolución de la pantalla
// Establecemos las dimesiones reales // Añadimos la vista al test // Finalizamos el contexto |
El método consiste en crear un nuevo contexto de las dimensiones deseadas, dibujar en él y posteriormente convertirlo en una imagen, que será lo que finalmente mostramos en pantalla.