Share
Con el iPad y el nuevo iPhone 4 ganando popularidad, parece que los dispositivos iOS se están dirigiendo rápidamente hacia pantallas de mayor resolución. Las pantallas de mayor resolución obviamente hacen que la experiencia del usuario sea mejor, pero para aprovechar esto, los desarrolladores necesitan actualizar sus aplicaciones. Este artículo explicará de qué se trata todo este alboroto y cómo hacer que sus aplicaciones se vean bien en resoluciones más altas mediante la demostración de dos técnicas para la optimización de gráficos..
El iPad tiene una pantalla más grande, y por lo tanto tiene una resolución más grande. Con el iPhone 4, sin embargo, Apple hizo algo diferente: aumentaron la resolución sin cambiar el tamaño físico de la pantalla. Esto hace que para una mayor densidad de píxeles, los píxeles son más pequeños y más compactos. En una pulgada cuadrada de la pantalla del iPhone 4 hay alrededor de 106 mil píxeles (a 326 PPI, o píxeles por pulgada), mientras que los modelos más antiguos solo tienen alrededor de 26 mil (a 163 PPI) en una pulgada, ¡4 veces menos! Esto hace que los gráficos en la pantalla parezcan líneas continuas, porque su ojo no puede ver los píxeles individuales. Apple llama a esta tecnología la "Pantalla de Retina" porque afirman que el ojo humano (la retina) no puede ver físicamente los píxeles a esta resolución.
Una de las grandes ventajas del desarrollo de iPhone, en comparación con otras plataformas, es que usted conoce el tamaño y la resolución exactos en los que se mostrará su aplicación, por lo que puede diseñar y crear para satisfacer esas dimensiones específicamente. Para mantener esa ventaja tanto como sea posible, Apple ha duplicado la resolución exactamente: cada píxel se reemplaza por 4 píxeles más pequeños. Esto significa que incluso si elige no aprovechar la pantalla Retina, su aplicación tendrá el mismo aspecto que hoy..
En el iPad, donde tanto la pantalla como la resolución son más grandes, Apple ha permitido el "Duplicado de píxeles", que hace que sus aplicaciones exploten hasta 4 veces su tamaño. En términos de píxeles, su aplicación después de la duplicación tiene el mismo tamaño que en la pantalla Retina. De esta manera, necesita optimizar su aplicación solo una vez, para duplicar la resolución, en el iPad y el iPhone 4 (a menos que, por supuesto, desee crear una versión específica para iPad).
Debe tener un iPhone 4 en sus manos para apreciar verdaderamente su pantalla y la importancia de actualizar los gráficos de su aplicación. Las aplicaciones optimizadas se ven notablemente mejores que las que no lo son, y la actualización no es tan difícil como podría pensar.
Ya sin hacer nada, todos los elementos predeterminados de la interfaz de usuario de Cocoa suministrados por Apple se procesarán a una resolución más alta en el iPhone 4. El texto, las vistas web y similares también se actualizarán automáticamente, por lo que si compila su aplicación completamente a partir de elementos de la interfaz de usuario predeterminados No hay optimizaciones para hacer para la pantalla de la retina! Sin embargo, cualquier imagen o elemento de IU personalizado basado en imágenes que pueda tener en su aplicación requiere un poco más de trabajo.
El primer paso es hacer una versión de mayor resolución de cada una de sus imágenes. Esto se demostrará en Photoshop, pero los mismos principios se pueden aplicar en cualquier programa de gráficos..
Siempre que diseñe una interfaz en Photoshop, debe usar métodos no destructivos tanto como sea posible. La creación de formas con gráficos vectoriales, utilizando objetos inteligentes y estilos de capa en lugar de filtros permite una mayor flexibilidad durante el proceso de diseño. Cuando todo es editable, hacer pequeños cambios es más fácil y crear gráficos de mayor resolución es muy simple.
Como demostración, crearemos un botón simple y luego haremos una versión de alta resolución..
Debe trabajar en la interfaz principal en la resolución "antigua" de 320x480. Esto te permitirá tener una mejor idea de lo que estás creando. Trabajar desde el principio en el tamaño completo de 640x960 puede ser confuso, porque se ve enorme en la mayoría de los monitores, y al ver su diseño en el iPhone, puede descubrir que los botones que parecían grandes en Photoshop son repentinamente pequeños. La mayoría de los dispositivos iOS aún son 320x480, y debes apuntar esa resolución al diseñar.
Cree un nuevo documento, a 320 × 480 y 163 ppi (iPhone 3G) y, utilizando la herramienta Forma, dibuje un rectángulo redondeado. Asegúrese de que está creando una "Capa de forma" y no está dibujando una forma ráster o una ruta. Diseñe el rectángulo para que se vea como un botón con estilos de capa como Superposición de degradado, Trazo, Resplandor interno y Sombra para darle profundidad y forma..
Para hacer la versión grande, seleccione Tamaño de imagen en el menú Imagen y duplique el ppi a 326, iPhone 4 ppi. Esto duplicará el tamaño de nuestra imagen a 640 × 960. Asegúrese de que la opción Estilos de escala esté marcada y haga clic en Aceptar. Asegúrate de que todo se haya escalado correctamente. Puede agregar pequeños detalles o texturas sutiles que realmente harán que su aplicación brille en la pantalla Retina. Ahora tiene una versión más grande de su interfaz de usuario, lista para cortar y guardar.
Ahora que tenemos nuestra interfaz en resolución Retina, debemos aplicarla a nuestra aplicación. Hay dos formas de hacerlo, cada una con sus pros y sus contras..
La forma oficial de agregar soporte de alta resolución a su aplicación es tener dos versiones de cada imagen, una en resolución "regular" y otra en resolución doble. Cada vez que se vea su aplicación en la pantalla Retina, la imagen más grande se cargará automáticamente. Este método permite un control completo y preciso de cómo se verá su aplicación en cada caso, y es muy fácil de aplicar a sus aplicaciones existentes.
El archivo de imagen de tamaño completo debe tener el nombre que desee, como "Button.png". Utilice este nombre de imagen en su código y en Interface Builder donde quiera que haga referencia a la imagen. La imagen de tamaño doble debe ser el doble del tamaño de su imagen más pequeña coincidente y nombrarse exactamente igual con "@ 2x" adjunto al nombre. En nuestro ejemplo, lo llamaríamos "[email protected]".
Desafortunadamente, esta técnica no funcionará en el iPad; una aplicación de píxeles duplicados no cargará el recurso de resolución más alta. Esto probablemente se solucionará en la futura actualización de iOS 4 que está programada para llegar a iPad este otoño.
Un método alternativo para agregar soporte de alta resolución es usar la escala. Solo carga el recurso de imagen grande, y luego lo escala al 50% en su código o usando Interface Builder.
Para hacer esto usando Interface Builder, cree un nuevo botón Round Rect (UIButton) y abra el inspector de atributos (Comando-1). Configure el tipo de botón en "Personalizado" y seleccione la imagen grande como Fondo. Escriba lo que quiera en el atributo Título y aplique más estilo al botón si lo desea. Para hacer que nuestro botón tenga el tamaño correcto, vaya a la pestaña Tamaño y cambie la anchura y la altura del botón a la mitad de la imagen. La imagen del botón, por ejemplo, es 300x102, por lo que el botón será 150x51. Debido a que estamos escalando exactamente un 50%, incluso el algoritmo de escalado simple utilizado por Cocoa Touch se ve bastante bien, dado que nuestra imagen está formada por trazos de 2 píxeles y tamaños de píxeles pares, que son fáciles de dividir entre 2..
El resultado es tan bueno como la imagen de tamaño específico cuando se escala, pero esto puede variar dependiendo de la imagen utilizada. La misma técnica se puede adaptar fácilmente a imágenes y vistas personalizadas para el mismo efecto. El uso de esta manera le dará menos control de cómo se verá su aplicación en una pantalla más pequeña, pero tiene algunas ventajas. El paquete de aplicaciones contendrá una de cada imagen en lugar de una copia más grande y más grande. Si su aplicación tiene muchas imágenes, en realidad podría hacer una diferencia en el tamaño del archivo. Además, esta es actualmente la única forma de tener gráficos de alta resolución en el iPad cuando se duplica el píxel. El texto y los elementos de la interfaz de usuario de Apple seguirán siendo pixelados, pero las imágenes de mayor resolución mejorarán la experiencia del usuario hasta que Apple agregue soporte oficial para la doble resolución en el iPad.
Accentsconagua